Job List

Overview:

The Job Listings project is a frontend challenge based on Frontend Mentor. The project involves creating a job listing website with filtering functionality. The focus of the project was mainly on CSS, as the JavaScript requirements were not clear from the brief. The layout of the page is designed using CSS grid, and the job listings are styled using flex. The website is responsive and uses font-size: clamp(...) for responsive text. The :has() operator is used for the first time to select the parent element of any listing that contains the 'featured' tab. CSS nesting is also used to group styles. The project also includes an HTML template to output the individual jobs, along with JavaScript modules for interactivity. Accessibility has been considered, with keyboard navigation, a 'skip to main content' link, and the use of ARIA and role attributes where required. Testing has been performed on multiple browsers, with limited support for the :has() operator and CSS nesting in Firefox. The project also includes a dark mode theme switcher and pulls in the job listings from a JSON file.

Features:

• CSS grid layout for the overall page
• Flexbox used for job listings
• Responsive design with font-size: clamp(...)
• Use of :has() operator for selecting parent elements with specific content
• CSS nesting to group styles
• HTML template used for individual jobs
• JavaScript modules
• Accessibility features including keyboard navigation and ARIA attributes
• Tested on Windows 10, Chrome, Microsoft Edge, and Firefox (with limited support)
• Dark mode theme switcher
• Job listings pulled in from a JSON file

Summary:

The Job Listings project is a frontend challenge focused on creating a job listing website with filtering functionality. The project primarily emphasizes CSS, utilizing CSS grid for the layout and flexbox for the job listings. The website is responsive and includes a dark mode theme switcher. JavaScript modules are used for interactivity, and accessibility features such as keyboard navigation and ARIA attributes have been implemented. The project has been tested on various browsers, although there is limited support for the :has() operator and CSS nesting in Firefox. Overall, the Job Listings project demonstrates proficiency in frontend development techniques and attention to usability and accessibility.