Challenges
- HTML
- CSS
Chat app CSS illustration
In this challenge, you'll be building out the entire app illustration from scratch. This will seriously test your CSS skills. So give it a go if you feel confident!
View challenge- HTML
- CSS
- JS
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.
View challenge- HTML
- CSS
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!
View challenge- HTML
- CSS
- JS
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.
View challenge- HTML
- CSS
- JS
Scoot multi-page website
This multi-page website will really test your front-end skills. There are 4 pages to build with mobile, tablet, and desktop designs included.
View challenge- HTML
- CSS
- JS
Dine restaurant website
This two-page website is perfect if you're starting to become more confident in your front-end skills. The challenge includes tricky design details and form validation.
View challenge- HTML
- CSS
- JS
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.
View challenge- HTML
- CSS
- JS
Minimalist portfolio website
This multi-page portfolio site will be a great challenge to test your all-round front-end skills. You can even use the site as your own portfolio when you're finished!
View challenge- HTML
- CSS
- JS
Job listings with filtering
In this challenge, you'll be using JavaScript to filter out jobs based on the categories selected.
View challenge- HTML
- CSS
- JS
Easybank landing page
This challenge will provide a nice test for your layout skills. If you're ready to move up from Junior challenges, this one is a great next step.
View challenge- HTML
- CSS
- JS
myteam multi-page website
This challenge will give you a real glimpse into a professional front-end developer's workflow. It includes designs for a 3-page fully-functional website.
View challenge- HTML
- CSS
- JS
Manage landing page
This challenge will be a great test for your responsive skills. There are lots of small details and slight content shifts for different screen sizes.
View challenge- HTML
- CSS
- JS
Insure landing page
Test your layout skills with this HTML & CSS only landing page. This challenge is perfect if you're starting to get confident in laying out web pages.
View challenge- HTML
- CSS
- JS
Pricing component with toggle
This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.
View challenge- HTML
- CSS
- JS
Rock, Paper, Scissors game
This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.
View challenge- HTML
- CSS
- JS
- API
URL shortening API landing page
Integrate with the rel.ink URL shortening API and play with browser storage in this landing page challenge.
View challenge- HTML
- CSS
Four card feature section
A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.
View challenge- HTML
- CSS
- JS
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.
View challenge- HTML
- CSS
- JS
Project tracking intro component
Some interesting layout and code challenges are baked into this design. Perfect if you're a beginner who is starting to get a bit more confident with your layouts.
View challenge- HTML
- CSS
- JS
Bookmark landing page
This challenge will really test your layout skills. There are also areas that will require some JavaScript, such as the tabbed features section and the FAQ accordion.
View challenge- HTML
- CSS
- JS
Intro component with sign-up form
Practice building out a sign-up form complete with client-side validation using JavaScript.
View challenge- HTML
- CSS
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.
View challenge- HTML
- CSS
Clipboard landing page
Put your layout skills to the test with this HTML & CSS landing page challenge. This challenge includes a design for hover states.
View challenge- HTML
- CSS
- JS
Ping single column coming soon page
This challenge is great for beginners and offers a chance to practice basic client-side form validation.
View challenge- HTML
- CSS
- JS
- API
REST Countries API with color theme switcher
If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.
View challenge- HTML
- CSS
Huddle landing page with alternating feature blocks
This challenge is perfect if you're wanting to practice your layout skills. If you're starting to get a bit more confident laying out a web page, give this project a go.
View challenge- HTML
- CSS
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.
View challenge- HTML
- CSS
Huddle landing page with a single introductory section
A perfect challenge for beginners, this project will get you working with a two column layout.
View challenge- HTML
- CSS
Fylo landing page with two column layout
This project is great if you're starting to get confident with slightly more complex layouts. The second section with the testimonial area will provide a nice challenge.
View challenge- HTML
- CSS
Huddle landing page with curved sections
Practice using pseudo-elements for styling extras and the CSS position property for the sections with curved edges.
View challenge
Join our Slack community
Join over 15,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!
Subscribe to our newsletter
Stay up-to-date with new challenges, featured solutions, selected articles and Frontend Mentor latest news
