Frontend Mentor - Job listings with filtering solution

This is a solution to the Job listings with filtering challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

This project required building a job listings page with filtering capabilities. Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Filter job listings based on the categories

Screenshot

Links

• Solution URL: github
• Live Site URL: Preview

My process

Built with

• React: Leveraged React's component-based architecture for efficient UI development.
• Semantic HTML5: Ensured accessibility and maintainability through semantically correct HTML.
• Semantic HTML5: Ensured accessibility and maintainability through semantically correct HTML.
• Flexbox: Utilized Flexbox for creating responsive and flexible layouts.

What I learned

This project reinforced my understanding of:

• Responsive Design: Implementing media queries and flexible layouts to ensure optimal viewing across various devices.

• Interactive UI: Creating engaging user experiences with well-defined hover states and smooth transitions.

• Filtering Logic: Developing efficient filtering algorithms to manage and display large datasets effectively. (Used a combination of state management and filter functions to dynamically update the job listings based on user selections).

Author

• Frontend Mentor - @MartaDomanska