Job listings with filtering

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

• Job listings with filtering solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • Front-end Style Guide
    • Layout
    • Colors
    • Typography
  • My process
    • Built with
  • 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

Links

• Live Site URL: https://benjaminvillatte.github.io/fem-static-job-listings/

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Desaturated Dark Cyan: hsl(180, 29%, 50%)

Neutral

• Light Grayish Cyan (Background): hsl(180, 52%, 96%)
• Light Grayish Cyan (Filter Tablets): hsl(180, 31%, 95%)
• Dark Grayish Cyan: hsl(180, 8%, 52%)
• Very Dark Grayish Cyan: hsl(180, 14%, 20%)

Typography

Body Copy

• Font size: 15px

Headings

• Family: Spartan
• Weights: 500, 700

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Vue.js 3 - JS library
• VueX 4 - JS library

Author

• Website - Benjamin VILLATTE