Frontend Mentor is a platform that allows your to improve you web development coding skills by building realistic projects. they have a list of challenges that are well designed with specific requirements. that you can choose to implement and submit on the platform.
There are two tiers of challenges in Frontend Mentor:
-
FREE : All assets and designs are in the JPG Format. this means you have to use estimations for things like spacing, sizes and so on. these project are single page small apps. and they don't include a tablet layout.
-
PRO : these challenges require a paid subscription. they are premium challenges. where you can find multi page projects, fully functional applications. you have the figma design file included with a professional design system e.g. a system that helps you plan making reusable components and styles since it details the colors, font sizes and so on used in the design. which allows you to mimic real world development workflows.
Some challenges require only HTML and CSS while others require Javascript and APIs. the difficulty of challenges spans 5 levels:
1- Newbie
2- Junior
3- Intermediate
4- Advanced
5- Guru
After starting learning web development, I'm using Frontend Mentor to practice the technologies that I learn. this Org is created to host all of the projects that I have completed and to showcase my skills in web development.
Frontend Mentor also provides you roadmaps to navigate the challenges as a beginner to web development. they offer:
1- Getting started on Frontend Mentor
2- Building responsive layouts
3- JavaScript fundamentals
4- Intro to JavaScript frameworks
5- Intro to accessibility
I've been using these roadmaps to navigate the challenges but as I completed all challenges in these roadmaps (other than the accessibility one). I'll be choosing to work on my own roadmaps from now on.
My Own Roadmaps:
- Modern Styling: Targets the trending and most used CSS styling tools. that make the development experience easier and lead to faster times styling the web.
Below is a table with all the projects done so far. as difficulty rises it's probably a more cool project. there is also the technologies column if you're interested in specific technologies.
| Project | Level | Technologies | Roadmamp | Repo Link |
|---|---|---|---|---|
| qr-code-component | Newbie | HTML, CSS | Getting Started on Frontend Mentor (beginner) | Repo |
| 3-column-preview-card-component | Newbie | HTML, CSS | Getting Started on Frontend Mentor (beginner) | Repo |
| single-price-grid-component | Newbie | HTML, CSS | Getting Started on Frontend Mentor (beginner) | Repo |
| order-summary-component | Newbie | HTML, CSS | Getting Started on Frontend Mentor (beginner) | Repo |
| stats-preview-card-component | Newbie | HTML, CSS | Getting Started on Frontend Mentor (beginner) | Repo |
| product-preview-card-component | Newbie | HTML, CSS | Building responsive layouts (beginner) | Repo |
| four-card-feature-section | Newbie | HTML, CSS | Building responsive layouts (beginner) | Repo |
| social-proof-section | Newbie | HTML, CSS | Building responsive layouts (beginner) | Repo |
| testimonials-grid-section | Junior | HTML, CSS | Building responsive layouts (beginner) | Repo |
| ping-coming-soon-page | Newbie | HTML, CSS, JS | JavaScript fundamentals (beginner) | Repo |
| interactive-rating-component | Newbie | HTML, CSS, JS | JavaScript fundamentals (beginner) | Repo |
| intro-component-with-signup-form | Newbie | HTML, CSS, JS | JavaScript fundamentals (beginner) | Repo |
| advice-generator-app | Junior | HTML, CSS, JS, API | JavaScript fundamentals (beginner) | Repo |
| results-summary-component | Newbie | HTML, CSS, JS, BEM | JavaScript fundamentals (beginner) | Repo |
| tip-calculator-app | Junior | HTML, CSS, JS, BEM | JavaScript fundamentals (beginner) | Repo |
| pricing-component-with-toggle | Junior | React, Vite, Typescript | Intro to JavaScript frameworks | Repo |
| time-tracking-dashboard | Junior | React, Vite, Typescript, BEM | Intro to JavaScript frameworks | Repo |
| newsletter-sign-up-with-success-message | Junior | React, Vite, Typescript, BEM | Intro to JavaScript frameworks | Repo |
| interactive-comments-section | Intermediate | React, Vite, Typescript, BEM | Intro to JavaScript frameworks | Repo |
| static-job-listings | Intermediate | React, Vite, Typescript, BEM | Intro to JavaScript frameworks | Repo |
| contact-form | Junior | React, NextJS, Typescript, TailwindCSS | Modern Styling | Repo |
| age-calculator-app | Junior | React, NextJS, Typescript, TailwindCSS | Modern Styling | Repo |
| interactive-card-details-form | Junior | React, Vite, Typescript, ChakraUI, Formik, Yup | Modern Styling | Repo |
| Project | Level | Technologies | Roadmamp | Repo Link |
|---|---|---|---|---|
| single-page-developer-portfolio | Junior | React, Vite, Typescript, ChakraUI, Formik, Yup, Express | Modern Styling | Repo |