Skip to content
@frontendmentor-ilyesab

frontendmentor-ilyesab

Frontend Mentor Projects Organization

What is Frontend Mentor

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.

Repositories Navigation

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.

Free Projects

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

Pro Projects

Project Level Technologies Roadmamp Repo Link
single-page-developer-portfolio Junior React, Vite, Typescript, ChakraUI, Formik, Yup, Express Modern Styling Repo

Popular repositories Loading

  1. qr-code-component qr-code-component Public

    QR Code Component Frontend Mentor Project

    CSS

  2. 3-column-preview-card-component 3-column-preview-card-component Public

    3-column-preview-card-component Frontend Mentor Project

    HTML

  3. single-price-grid-component single-price-grid-component Public

    Single Price Grid Component Frontend Mentor Challenge

    CSS

  4. order-summary-component order-summary-component Public

    Order Summary Component Frontend Mentor Challenge

    CSS

  5. stats-preview-card-component stats-preview-card-component Public

    Stats Preview Card Component Frontend Mentor Challenge

    CSS

  6. product-preview-card-component product-preview-card-component Public

    Product Preview Card Component Frontend Mentor Challenge

    CSS

Repositories

Showing 10 of 25 repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loading…

Most used topics

Loading…