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
  • Continued development
• Author

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

Mobile Design

Desktop Design

Links

• Solution URL: https://github.com/Mathitarazonad/Frontend-Mentor---Job-Filter-Page
• Live Site URL: https://mathitarazonad.github.io/job-filter-page/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first design
• React - JS library

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

This Project helped me to really understand more about the React library and its utility. At the first moment I thought that using simple JavaScript in this project it would be easier than using React, because I studied something about React but I didn't really understood its utility since I have put it in practice and I saw its great power.Now I can understand more about states how to use them, to pass them like props and so more.

Also I started to use the Git version control system, it was my first time, so I dedicated myself to just learning the basics like add, commit, etc.

Continued development

For my future projects, I want to learn more about React and its tools, I heard about the useState hook but I didn't understand it and I want to implement it and my next project. Also, for my next project, I will work with class components, since functional components seems to be understood by me, I know that nowadays class components are being used yet, and I want to be able to work with both types of components.

As I said, I started to use Git, so now I want to learn more about it, about branches and that type of things. I understood that every beginner in this should learn about this, though I didn't work with a team or something like that, I saw its great utility and it was so fun learn about it since I was working in this project.

Author

• Frontend Mentor - @Mathitarazonad