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
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

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: My Solution
• Live Site URL: live site

My process

Built with

• React - JS library
• Semantic HTML5 markup
• Vanilla CSS/SASS
• Flexbox
• CSS Grid

What I learned

• By looking at other people's solution, I learned expected behavior when clicking the button to filter, which is inclusive filter
• Use of useContext hook in react for global state management
• Use of css grid and media query for mobile screen
• SASS can nest the css properties

Useful resources

• grid tips for different screen sizes - This helped me for my project. I really liked this pattern and will use it going forward.
• Mastering css grid - This is an amazing free course by Colt Steele, my dear sensei.

Author

• Website - Mami Nishiwaki