Frontend Mentor Challenges
Projects
-
Interactive pricing component
In this project, you'll build out an interactive pricing component complete with custom range input slider and pricing toggle. A perfect way to test your JS skills!
-
Social media dashboard with theme switcher
This challenge will be a perfect chance to practice your Grid skills. The color theme switcher also adds a nice additional test.
-
Fylo dark theme landing page
This design has some nice layout challenges in it. A perfect training ground to practice your Flexbox and/or Grid skills.
-
Pricing component with toggle
This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.
-
Testimonials grid section
This challenge will be perfect practice for anyone wanting to test their CSS Grid skills. Grid is such a powerful addition to CSS, so it's worth getting to grips with it!
-
Loopstudios landing page
This challenge is perfect if you're looking to test your CSS Grid chops. Even without Grid, this project will be a fun one to help you practice your layout skills!
-
Coding bootcamp testimonials slider
This challenge will be a nice test if you're new to JavaScript. It's also a great opportunity to play around with content animations and transitions.
-
Huddle landing page with a single introductory section
A perfect challenge for beginners, this project will get you working with a two column layout.
-
FAQ accordion card
In this challenge, you'll be building out an FAQ accordion. This is an extremely common front-end pattern, so it's a great opportunity to get some practice in!
-
Social proof section
This project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!
-
Base Apparel coming soon page
This layout looks simple enough, but there are some interesting details to it that will test your CSS skills. You'll also get to practice basic form validation.
-
Single price grid component
In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge.
-
Profile card component
This is a perfect challenge to test your layout skills. The card layout doesn't shift, so it's also great for those that haven't dived into responsive websites yet!
-
Four card feature section
A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.
-
Fylo data storage component
This component has some interesting CSS challenges in the design. If you're looking to test your CSS skills, this will be a great project for you!
-
Intro component with sign-up form
Practice building out a sign-up form complete with client-side validation using JavaScript.
-
Ping single column coming soon page
This challenge is great for beginners and offers a chance to practice basic client-side form validation.
-
Article preview component
Practice your layout skills with this article preview component. There's lots of fun to be had playing around with animations for the sharing icons as well.