Challenges
Unlock full access
- Build our premium projects
- Access all Figma design files
- And much more!
Work in a team? Upgrade your team to Pro
Showing 42 of 119 challenges
Not sure where to start? Try our learning paths
- Premium
Personal blog
- HTML
- CSS
- JS
3intermediateThis multi-page personal blog project has a JSON file to practice working with dynamic data. You can even use a headless CMS to take the difficulty up a notch!
- Premium
Note-taking web app
- HTML
- CSS
- JS
4advancedThis project has many fun and challenging features to add, including color and font themes. It can also be built as a full-stack web app!
- Premium
Hangman game
- HTML
- CSS
- JS
4advancedThis project is a great all-around test. You'll need good HTML to ensure accessible navigation. There are many tricky CSS details, and the game logic will test your JS.
- Premium
Frontend Quiz app
- HTML
- CSS
- JS
3intermediateThis app will test your skills (as well as your knowledge!) as you build out a fully functional quiz. We provide a local JSON file to help you practice working with JSON!
- Premium
Dictionary web app
- HTML
- CSS
- JS
- API
3intermediateIn this project, you'll integrate with the Dictionary API to create a real-world dictionary web app. Additional tests include colour themes and font selection.
- Free
Multi-step form
- HTML
- CSS
- JS
4advancedAn excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.
- Premium
Connect Four game
- HTML
- CSS
- JS
4advancedYour JS knowledge will be challenged in this fun project, where you'll build a two-player game. You'll write the logic for the game and how to test for win conditions.
- Premium
Password generator app
- HTML
- CSS
- JS
3intermediateThis app will be an excellent test of your HTML, CSS, and JS skills. You'll build custom form controls and use JavaScript to generate random passwords.
- Premium
In-browser markdown editor
- HTML
- CSS
- JS
3intermediateIn this project, you'll build a fully-functional in-browser markdown editor application with a light/dark mode toggle. It's also perfect to build as a full-stack app!
- Premium
Entertainment web app
- HTML
- CSS
- JS
4advancedThis multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.
- Premium
Tic Tac Toe game
- HTML
- CSS
- JS
3intermediateThis classic practice project for web developers is a great exercise to complete. It will test your HTML semantics, your grid layout skill, as well as your JS logic.
- Free
Interactive comments section
- HTML
- CSS
- JS
3intermediateThis is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!
- Free+
Space tourism multi-page website
- HTML
- CSS
- JS
3intermediateThis project is a fun collaboration with Scrimba and Kevin Powell! If you like, you can follow along and watch Kevin complete the project on Scrimba. Lots to learn!
- Free
E-commerce product page
- HTML
- CSS
- JS
3intermediateIn this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!
- Premium
Memory game
- HTML
- CSS
- JS
4advancedThis project will be an excellent test for your HTML, CSS, and JS skills! You'll be building a fun memory game where players try to match pairs.
- Premium
Galleria slideshow site
- HTML
- CSS
- JS
3intermediateThis art gallery slideshow project will be a great test for your layout and JS skills. With the masonry layout, slideshow logic, and lightbox view there's a lot to build!
- Premium
Planets fact site
- HTML
- CSS
- JS
3intermediateIn this challenge, you'll be building out an 8-page fact site for all planets in our solar system. This project will make an incredible portfolio piece when completed!
- Free
Calculator app
- HTML
- CSS
- JS
3intermediateThis calculator app will be a great test of your CSS and JS skills especially. If you're wanting to practice using Grid, this challenge will be perfect for you!
- Premium
Coffeeroasters subscription site
- HTML
- CSS
- JS
3intermediateThis challenge will have you building a 3-page subscription site. As part of the project, you'll create an interactive subscription page to test your JS and logic skills!
- Premium
Pomodoro app
- HTML
- CSS
- JS
4advancedThis Pomodoro app will provide some tricky challenges, including building a circular progress bar. You'll also build a range of customizations, like colors and fonts.
- Free
Launch countdown timer
- HTML
- CSS
- JS
3intermediateThis will be a fun one! Your challenge is to build this countdown timer. There are lots of small CSS tests in the design as well. So it should keep you busy!
- Premium
Creative agency single-page site
- HTML
- CSS
- JS
3intermediateThis challenge will put your layout skills to the test with lots of overlapping elements. If you're getting confident with your CSS layouts, this will be a great project!
- Free
Todo app
- HTML
- CSS
- JS
3intermediateThe classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.
- Premium
Clock app
- HTML
- CSS
- JS
- API
3intermediateThis challenge will have you working with external APIs to set data based on a visitor's location. You'll also be using logic to set content depending on the time of day.
- Premium
Devjobs web app
- HTML
- CSS
- JS
4advancedBuild a jobs board that pulls data from a local JSON file. This is a great opportunity to practice JS and get to grips with a framework/library of your choice!
- Free
Room homepage
- HTML
- CSS
- JS
3intermediateThis small homepage challenge packs a big punch to test your layout skills. There's also a slider in there to add a JS layer for extra practice.
- Premium
PayAPI multi-page website
- HTML
- CSS
- JS
4advancedThis 4-page website will be a great test for your HTML & CSS skills. You'll be building out a marketing site, complete with custom form validation throughout.
- Premium
Photosnap multi-page website
- HTML
- CSS
- JS
4advancedIn this challenge, you'll be building the marketing site for a photo-sharing app. This will be a perfect opportunity to put your CSS Grid skills to the test!
- Free
IP Address Tracker
- HTML
- CSS
- JS
- API
3intermediateIn this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.
- Premium
Arch Studio multi-page website
- HTML
- CSS
- JS
4advancedIn this challenge, you'll be building a 4-page site that will look great in any portfolio. You'll even get the chance to play with mapping APIs if you choose the bonus.
- Free
Chat app CSS illustration
- HTML
- CSS
3intermediateIn 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!
- Premium
Scoot multi-page website
- HTML
- CSS
- JS
3intermediateThis multi-page website will really test your front-end skills. There are 4 pages to build with mobile, tablet, and desktop designs included.
- Premium
Dine restaurant website
- HTML
- CSS
- JS
3intermediateThis 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.
- Premium
Minimalist portfolio website
- HTML
- CSS
- JS
3intermediateThis 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!
- Free
Job listings with filtering
- HTML
- CSS
- JS
3intermediateIn this challenge, you'll be using JavaScript to filter out jobs based on selected categories. We provide a local JSON file to help you practice working with JSON data.
- Free
Easybank landing page
- HTML
- CSS
- JS
3intermediateThis 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.
- Premium
myteam multi-page website
- HTML
- CSS
- JS
4advancedThis 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.
- Free
Manage landing page
- HTML
- CSS
- JS
3intermediateThis challenge will be a great test for your responsive skills. There are lots of small details and slight content shifts for different screen sizes.
- Free
Rock, Paper, Scissors game
- HTML
- CSS
- JS
4advancedThis 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.
- Free
URL shortening API landing page
- HTML
- CSS
- JS
- API
3intermediateIntegrate with the Clean URI link shortening API and play with browser storage in this landing page challenge.
- Free
Bookmark landing page
- HTML
- CSS
- JS
3intermediateThis 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.
- Free
REST Countries API with color theme switcher
- HTML
- CSS
- JS
- API
4advancedIf 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.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord