https://github.com/pasek108/fm-joblistingswithfiltering
My solution to the Frontend Mentor "Job listings with filtering" challenge
https://github.com/pasek108/fm-joblistingswithfiltering
angular frontend-mentor frontend-mentor-challenge frontend-mentor-site frontend-mentor-solution frontendmentor frontendmentor-challenge frontendmentor-solution frontendmentorchallenge job-listings-filter typescript
Last synced: 3 months ago
JSON representation
My solution to the Frontend Mentor "Job listings with filtering" challenge
- Host: GitHub
- URL: https://github.com/pasek108/fm-joblistingswithfiltering
- Owner: Pasek108
- Created: 2025-01-09T22:34:17.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-02-14T13:57:58.000Z (3 months ago)
- Last Synced: 2025-02-14T14:41:06.889Z (3 months ago)
- Topics: angular, frontend-mentor, frontend-mentor-challenge, frontend-mentor-site, frontend-mentor-solution, frontendmentor, frontendmentor-challenge, frontendmentor-solution, frontendmentorchallenge, job-listings-filter, typescript
- Language: CSS
- Homepage: https://pasek108.github.io/FM-JobListingsWithFiltering/
- Size: 218 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
FM-JobListingsWithFiltering - Readme
My solution to the Frontend Mentor "Job listings with filtering" challenge
> [!CAUTION]
>
Please, don't look at my solutions until you have completed it yourself.
> Challenges like these are an opportunity to improve by coming up with your own solutions. Take your time and think about your approach.
> If you can't complete a challenge, skip it and come back to it later. Only look at someone else's solutions as a last resort, and treat it as a defeat.
# Table of Contents
* [FrontendMentor :thinking:](#frontendmentor-thinking)
* [What is it](#what-is-it)
* [Is it worth doing](#is-it-worth-doing)
* [Overview :sparkles:](#overview-sparkles)
* [About](#about)
* [Features](#features)
* [Technologies](#technologies)
* [Setup](#setup)
* [Copyright](#copyright-copyright)
* [Details :scroll:](#details-scroll)
* [User interface](#user-interface)
* [Performance](#performance)
# FrontendMentor :thinking:
## What is it
[FrontendMentor](https://www.frontendmentor.io/home) is a platform that provides real-world front-end coding challenges to help developers improve their skills. It offers projects ranging from simple layouts to complex web applications, allowing users to practice HTML, CSS, and JavaScript by building solutions that closely resemble professional work.
## Is it worth doing
Frontend Mentor is a great resource for developers looking to gain hands-on experience by working on practical projects. The challenges help reinforce best practices, improve design implementation skills, and build a portfolio. However, since there is no automated grading system, feedback depends on community reviews, making it essential to engage with others for constructive criticism.
# Overview :sparkles:
## About
My solution to the [Frontend Mentor "Job listings with filtering" challenge](https://www.frontendmentor.io/challenges/job-listings-with-filtering-ivstIPCt). The project was created using Angular 19 and TypeScript. The challenge gave me an opportunity to practice Angular basics, especially state management and communication between components.
Check out the [live version](https://pasek108.github.io/FM-JobListingsWithFiltering/) of this project, as well as my [Frontend Mentor profile](https://www.frontendmentor.io/profile/Pasek108).
## Technologies
Languages:
- JavaScript
- TypeScript
- CSS
- HTML
Libraries and frameworks:
- [Angular](https://angular.dev) 19.0.0
- [GoogleFonts](https://fonts.google.com)
Programs:
- [VSCode](https://code.visualstudio.com)
- [PowerToys](https://learn.microsoft.com/en-us/windows/powertoys/)
- [ShareX](https://getsharex.com)
- [GIMP](https://www.gimp.org)
## Features
### Challenge requirements
- ✅ 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
## Setup
- Use [live version](https://pasek108.github.io/FM-JobListingsWithFiltering/).
- Download this repository and:
- Open project in VSCode
- Run `npm install`
- Run `ng serve`
- Open generated address in the browser
- Deployment for GitHub:
- Run `ng build --output-path docs --base-href /FM-JobListingsWithFiltering/`
- Move conetent from `/docs/browser` to `/docs`
## Copyright :copyright:
I do not own the rights to the content of the challenges. All challenge data was downloaded and included only to provide context for the solutions.
# Details :scroll:
## User interface
### Jobs listing
The main view of the application displays job offers.
Users can filter offers by clicking on a skill.
## Performance
> [!WARNING]
> The accessibility score is lower because of the design's color contrast.
### Desktop
### Mobile
