Inspiration
The inspiration for this project stemmed from my frustrations with traditional job portals, particularly their lack of accessibility features and poor mobile responsiveness. I wanted to create a job portal that caters to all users, including those who rely on assistive technologies like screen readers, while also being optimized for mobile devices. With the increasing emphasis on inclusivity in web development, I felt motivated to create a solution that ensures everyone has equal access to employment opportunities, regardless of their abilities.
What it does
The job portal I developed connects job seekers with employers by providing an intuitive and user-friendly platform where users can search for jobs, explore top recruiters, and apply for opportunities. The portal is accessible to users relying on screen readers and is fully responsive, ensuring a smooth experience across different devices. It also incorporates dynamic features, such as real-time job searches and pagination, without requiring page reloads, enhancing user experience.
How I built it
The project was developed using HTML5, CSS3, JavaScript, Bootstrap, and AJAX to ensure accessibility, responsiveness, and interactivity. I focused on structuring the HTML for semantic clarity and ease of use with assistive technologies. The job listings were dynamically loaded with AJAX, allowing users to browse jobs seamlessly. I also implemented features like a carousel for top recruiters and form validation with accessibility in mind. Additionally, I optimized the site for SEO using meta tags and Open Graph integration to improve search engine ranking and social media sharing.
HTML and Structure
Used semantic HTML5 elements and structured the site to make it accessible:
Head Section & Meta Information
Meta tags, including Open Graph, were set up for SEO and social media sharing. A viewport meta tag was added to ensure mobile responsiveness.
<head>
<!-- Meta Information -->
<meta charset="UTF-8"> <!-- Character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design settings -->
<meta name="description" content="Find jobs, internships, government jobs, and top recruiters around you through our organizational portal."> <!-- Brief description for search engines -->
<meta name="keywords" content="job portal, recruitment, internships, government jobs, companies, job search, job listings, apply for jobs, career development, job site features"> <!-- Keywords for SEO -->
<meta name="author" content="Ojobor Jude Ikechukwu"> <!-- Author of the document -->
<!-- Favicon and Apple Touch Icons -->
<link rel="icon" href="images/favicon/favicon.ico" type="image/x-icon"> <!-- Favicon for browsers -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Icon for iOS devices -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <!-- 32x32 PNG favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <!-- 16x16 PNG favicon -->
<link rel="manifest" href="/site.webmanifest"> <!-- Web app manifest for progressive web apps -->
<!-- Link to CSS styles and Bootstrap framework -->
<link rel="stylesheet" href="css/styles.css"> <!-- Custom styles -->
<link rel="stylesheet" href="bootstrap-4.0.0-dist_3/css/bootstrap.min.css"> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"> <!-- Font Awesome for icons -->
<!-- Scripts for jQuery and Bootstrap functionality -->
<script src="jquery/jquery-3.5.1.min.js"></script> <!-- jQuery library -->
<script src="bootstrap-4.0.0-dist_3/js/bootstrap.min.js"></script> <!-- Bootstrap JavaScript -->
<!-- Page Title -->
<title>Job Search Organizational Portal - Divine Heritage Computers</title> <!-- Title of the web page -->
<!-- SEO Improvements -->
<meta property="og:title" content="Job Search Portal - Divine Heritage Computers"> <!-- Open Graph title -->
<meta property="og:description" content="Find jobs, internships, government jobs, and top recruiters around you."> <!-- Open Graph description -->
<meta property="og:image" content="images/dhc-logo.png"> <!-- Open Graph image -->
<meta property="og:url" content="https://www.dhcomputer.com/job-portal"> <!-- Open Graph URL -->
</head>
HTML Structure & Semantic Elements
The site is structured with semantic HTML5, ensuring both SEO and accessibility. Comments throughout the code make it easy to maintain and understand for future developers.
- Header Section
```
<!-- Preloader -->
Loading, please wait...
<header>
<section id="header">
<div class="menu-bar">
<!-- Navbar for navigation with screen reader enhancements -->
<nav class="navbar navbar-expand-lg navbar-light" aria-label="Main navigation">
<!-- Branding logo with alt text -->
<a class="navbar-brand" href="#" title="Divine Heritage Computer Logo">
<img src="images/dhc-logo.png" alt="Divine Heritage Computer Logo">
</a>
<!-- Toggle button for mobile menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#job-listings.html">Job Listings</a></li>
<li class="nav-item"><a class="nav-link" href="#upload-resume.html">Upload Resume</a></li>
<li class="nav-item"><a class="nav-link" href="#application-tracking.html">Application Tracking</a></li>
<li class="nav-item"><a class="nav-link" href="#job-alerts">Job Alerts</a></li>
<li class="nav-item"><a class="nav-link" href="#career-advice.html">Career Advice</a></li>
<li class="nav-item"><a class="nav-link" href="#">Internship</a></li>
<li class="nav-item"><a class="nav-link" href="#contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
<!-- Banner section for Job Portal -->
<div class="banner text-center">
<h1>JOIN OUR ORGANIZATION</h1>
<p>Be part of something great and make a lasting impact in your community!</p>
</div>
</section>
</header>
**Job Search and Top Recruiters Carousel**
This section features a *carousel of top recruiters* with ARIA attributes for keyboard navigation and screen reader instructions. The carousel allows users to move between logos of major companies using keyboard shortcuts.
- **Job Search**
<section class="search-job">
<form class="search-form" role="search" aria-labelledby="search-form-title">
<!-- Screen reader enhancement -->
<h2 id="search-form-title" class="sr-only">Job Search Form</h2>
<!-- Search field with screen reader accessibility -->
<label for="search" class="sr-only">Search Keyword</label>
<input type="text" name="search" id="search" class="form-control" placeholder="Search Keyword" aria-required="true">
<!-- Company search field -->
<label for="company" class="sr-only">Company</label>
<input type="text" name="company" id="company" class="form-control" placeholder="Company">
<!-- Location search field -->
<label for="location" class="sr-only">Location</label>
<input type="text" name="location" id="location" class="form-control" placeholder="Location">
<!-- Find Job button -->
<button type="submit" class="btn-primary" aria-label="Find Jobs">Find Job</button>
</form>
</section>
### Top Recruiters Carousel
This section features a **carousel of top recruiters** with ARIA attributes for keyboard navigation and screen reader instructions. The carousel allows users to move between logos of major companies using keyboard shortcuts.
<!-- Top Recruiters Section -->
Top Recruiters
<!-- Carousel Wrapper --> <!-- First Slide -->
<!-- Additional Slides -->
<!-- More recruiters can be added in subsequent slides -->
<!-- Carousel Controls -->
Previous
Next
<!-- End of Carousel Wrapper -->
<!-- Note: More recruiters can be added in subsequent rows -->
### Recent Job Listings Section
A key feature of the job portal is the **Recent Job Listings** section, which presents jobs with detailed information such as the position, experience level, location, and required skills. Each listing is presented with ARIA roles and semantic HTML for maximum accessibility.
<section id="jobs" aria-label="Recent Job Listings">
<div class="container">
<h2>Recent Updates</h2>
<!-- Job update 1 -->
<div class="company-details">
<div class="job-update">
<h3>Seasoned Senior Python Developer (Fresher)</h3>
<p>XYZ Solution PVT Ltd</p>
<i class="fa fa-briefcase"></i><span> 0-1 year experience</span><br>
<i class="fa fa-inr"></i><span> 3.50 - 4.00 Lacs p.a.</span><br>
<i class="fa fa-map-marker"></i><span> Bangalore</span>
<p>Skills: <small>Java</small>, <small>Python</small>, <small>HTML, CSS</small>, <small>.Net</small></p>
<p>Description: Subscribe to Ojobor Dev YouTube Channel to watch more videos on web design and digital marketing. <a href="#">Read more</a></p>
</div>
<div class="apply-btn">
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
<!-- More job updates similar to the above can be added here -->
<!-- Pagination for job listings -->
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">←</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">→</a></li>
</ul>
</div>
</section>
### Site Stats Section
The **Site Stats** section includes statistics on job seekers, employers, and jobs available. I used **icons and text descriptions** to make the stats clear and visually appealing, while also ensuring the section is accessible through semantic tags.
<section id="site-stats" aria-label="Site Stats">
<div class="container text-center">
<h2>DHCJOBS Site Stats</h2>
<div class="row">
<div class="col-md-3">
<div class="stats-box" role="group" aria-labelledby="job-seekers-stats">
<i class="fa fa-user" aria-hidden="true"></i><span> 100k +</span>
<p id="job-seekers-stats">Job Seekers</p>
</div>
</div>
<div class="col-md-3">
<div class="stats-box" role="group" aria-labelledby="employers-stats">
<i class="fa fa-shield" aria-hidden="true"></i><span> 500k +</span>
<p id="employers-stats">Employers</p>
</div>
</div>
<div class="col-md-3">
<div class="stats-box" role="group" aria-labelledby="active-jobs-stats">
<i class="fa fa-briefcase" aria-hidden="true"></i><span> 10k +</span>
<p id="active-jobs-stats">Active Jobs</p>
</div>
</div>
<div class="col-md-3">
<div class="stats-box" role="group" aria-labelledby="companies-stats">
<i class="fa fa-building" aria-hidden="true"></i><span> 500k +</span>
<p id="companies-stats">Companies</p>
</div>
</div>
</div>
</div>
</section>
### Key Features Section
The **Key Features Section** highlights essential functionalities of the job search portal. It allows users to browse job listings across various industries and filter results by criteria like job title, location, and salary range. Users can also track their job applications and receive alerts about new opportunities that match their profile.
<section id="list-items">
<div class="container text-center">
<h2>Key Features of a Job Search Portal:</h2>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="list-box">
<!-- Unordered List of Features -->
<ul type="none">
<li><strong>Job Listings:</strong> Browse job openings across various industries and locations.</li>
</ul>
</div>
</div>
<div class="col-6">
<div class="list-box">
<ul type="none">
<li><strong>Search Filters:</strong> Narrow down results by job title, location, salary range, and more.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="list-box">
<ul type="none">
<li><strong>Application Tracking:</strong> Monitor the status of your job applications in one place.</li>
</ul>
</div>
</div>
<div class="col-6">
<div class="list-box">
<ul type="none">
<li><strong>Job Alerts:</strong> Get notifications about new job openings that match your profile.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
### Why Join Us Section
The "**Why Join Us**" section provides compelling reasons for users to join the job portal, including community impact, professional development, and networking opportunities.
<section id="why-join" class="reasons-section" aria-labelledby="why-join-title">
<div class="container">
<h2 id="why-join-title">Why You Should Join Us</h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Community Impact</h5>
<p class="card-text">Our organization is committed to creating positive change and improving lives. You'll have the opportunity to contribute to meaningful projects that make a difference.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Professional Development</h5>
<p class="card-text">Gain valuable skills and experience through training, workshops, and collaboration with industry experts. Grow both personally and professionally with us.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Network and Support</h5>
<p class="card-text">Join a network of like-minded individuals who share your passion and drive. You'll have access to mentors, support systems, and a strong community.</p>
</div>
</div>
</div>
</div>
</div>
</section>
### How to Join Section
The **How to Join section** walks users through the process, ensuring that the steps are clear and accessible to all.
How to Join
Step 1: Fill Out the Application Form
Submit your information through our online application form, where you'll tell us more about yourself and why you want to join us.
Step 2: Attend an Orientation
After submitting your application, you'll be invited to attend an orientation session where you'll learn more about our organization and how we operate.
Step 3: Interview with Our Team
We'll schedule a short interview with you to understand how your skills and interests align with our goals and activities.
Step 4: Welcome Aboard!
If you're accepted, congratulations! You'll receive a welcome package and be ready to start making a difference as part of our team.
### Contact Us Section
The **Contact Us** section includes an accessible contact form with ARIA labels and a live region that displays success messages once the form is submitted. I implemented client-side validation with HTML5 and JavaScript:
Contact Us
Please fill in the form below, and we'll get back to you as soon as possible.
Your form has been submitted successfully!Contact Form
Full Name Name should only contain alphabets (e.g., John Doe). Good! <!-- Email Address -->
<section aria-labelledby="emailLabel">
<div class="mb-3">
<label for="email" class="form-label" id="emailLabel">Email Address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required aria-required="true" aria-describedby="emailError emailSuccess">
<span class="error-message" id="emailError">Please enter a valid email address (e.g., example@mail.com).</span>
<span class="success-message" id="emailSuccess">Good!</span>
</div>
</section>
<!-- Phone Number Input -->
<section aria-labelledby="phoneLabel">
<div class="mb-3">
<label for="phone" class="form-label" id="phoneLabel">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Enter your phone number" required aria-required="true" aria-describedby="phoneError phoneSuccess">
<span class="error-message" id="phoneError">Phone number should start with a + followed by country code and digits (e.g., +123456789).</span>
<span class="success-message" id="phoneSuccess">Good!</span>
</div>
</section>
<!-- Request/Message -->
<section aria-labelledby="messageLabel">
<div class="mb-3">
<label for="message" class="form-label" id="messageLabel">Your Message</label>
<textarea class="form-control" id="message" name="message" rows="5" placeholder="How can we help you?" required aria-required="true" aria-describedby="messageError messageSuccess"></textarea>
<span class="error-message" id="messageError">Message cannot be empty.</span>
<span class="success-message" id="messageSuccess">Good!</span>
</div>
</section>
<!-- Submit Button -->
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary submit-disabled" id="submitBtn" disabled>Submit Request</button>
</div>
</form>
</div>
</section>
### App Banner Section
The **App Banner Section** encourages users to download the DHCJobs app for mobile job searching. This banner features a centered heading, "Find Jobs On Mobile, Download DHCJobs APP," accompanied by clickable icons for both the Apple Store and Google Play Store. These icons, represented by images with descriptive alt text and tooltips (title), direct users to download the app from their respective platforms, enhancing the job portal's accessibility and usability across mobile devices. The section is designed with accessibility in mind, using proper ARIA labeling and semantic HTML to ensure screen readers can effectively communicate the banner's content.
<section id="app-banner" class="text-center" aria-label="Download App">
<h2>Find Jobs On Mobile, Download DHCJobs APP</h2>
<a href="#"><img src="images/app-store-icon.jpg" alt="Apple Store" title="Download from Apple Store"></a>
<a href="#"><img src="images/play-store-icon.jpg" alt="Google Play Store" title="Download from Google Play"></a>
</section>
### Footer Section
<!-- Footer Section -->
Subscribe to Divine Heritage Computer YouTube Channel to watch more videos on web designing and digital marketing. Press the bell icon for notifications.
© 2024 Divine Heritage Computer - All Rights Reserved
### Technologies Used
- **HTML5:** For structuring the content.
- **CSS3:** For styling and ensuring a responsive layout.
- **Bootstrap:** For mobile-first design and UI components.
- **JavaScript & AJAX:** For dynamic interactions, job search, and pagination.
- **ARIA Roles & WCAG Standards:** For accessibility enhancements.
- **SEO Optimization:** Using meta tags, semantic HTML, and Open Graph integration.
## Challenges I ran into
One of the primary challenges was ensuring the site met accessibility standards, particularly when using dynamic content. Implementing ARIA roles and ensuring that AJAX-loaded content was correctly announced to assistive technologies required extensive testing with screen readers. Balancing a visually appealing design with full functionality for users relying on keyboards and screen readers was another challenge. Ensuring that the site performed well across various devices and browsers required additional responsive design adjustments beyond Bootstrap.
## Accomplishments that I am proud of
I am particularly proud of the accessibility features I implemented, which allow users with disabilities to navigate the job portal effortlessly. Achieving a mobile-first, responsive design that works smoothly across devices is another significant accomplishment. Additionally, I am proud of the portal’s SEO optimization, which ensures that the platform ranks well on search engines and performs excellently when shared on social media.
## What I learned
Throughout this project, I deepened my understanding of web accessibility, responsive design, and user experience. I learned how to apply Web Content Accessibility Guidelines (WCAG) and ARIA roles to make dynamic content accessible. Implementing a mobile-first approach taught me how to adapt design elements for different devices. I also gained valuable insights into using JavaScript and AJAX to enhance interactivity while maintaining accessibility, and I improved my knowledge of SEO best practices.
## What's next for New Type Works Web Development
In addition to improving accessibility and user experience, the next steps for **New Type Works Web Development** will involve writing the backend code and developing the remaining features of the web pages. The backend will be developed using a server-side language like PHP or Node.js, and I plan to implement the following features:
1. **User Authentication & Authorization:** I will create a robust user login and registration system, allowing job seekers and employers to create accounts, manage profiles, and interact with the platform. Authentication will ensure secure access to job applications, job postings, and saved preferences.
2. **Database Integration:** I will integrate a database (MySQL or MongoDB) to store and manage job listings, user data, and applications. Employers will be able to post jobs, while job seekers can apply and track the status of their applications.
3. **Job Recommendation System:** By analyzing user profiles and job search behavior, I plan to develop a job recommendation system that provides personalized job suggestions to users, improving their experience and increasing engagement.
4. **Employer Dashboards:** Employers will have access to a dashboard where they can manage job postings, view applicants, and communicate with candidates directly through the platform. This feature will streamline the hiring process for recruiters.
5. **Admin Panel:** An administrative interface will be developed to allow moderators to oversee platform activity, manage users, and approve or reject job postings, ensuring the quality and reliability of the portal.
6. **Payment Integration:** I plan to incorporate a payment gateway for premium job postings, allowing employers to promote their job listings for better visibility. This feature will add a monetization stream to the platform.
7. **Advanced Search & Filtering:** Expanding the job search functionality with advanced filters for job type, location, salary range, and company will make it easier for users to find relevant opportunities.
8. **Performance & Security Enhancements:** To maintain the platform’s security and efficiency, I will implement SSL encryption, secure authentication methods, and performance optimizations such as caching, minimizing HTTP requests, and load balancing to ensure fast load times.
By completing the backend code and developing these features, **New Type Works Web Development** will provide a comprehensive and fully functional job portal that meets the needs of job seekers and employers alike.
[Download the source code on GitHub](https://github.com/judeik/TalentMatch-Hack2.0)
Log in or sign up for Devpost to join the conversation.