Build a responsive recipe finder with search, filtering, and dynamic content. Practice working with JSON data, complex layouts, and interactive JavaScript features.

Recipe finder website

Building this app will be a fun way to test a range of your skills. From working with JSON data to logging and charting mood entries, there's a lot to get stuck into!

Mood tracking app

This project will be a fun way to practice working with dynamic data, filtering data, color theming, building a responsive grid, and more!

Browser extension manager UI

This 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!

Personal blog

This project will test a range of your skills, especially your JavaScript, with the counters and letter density graph. The theme switcher is another little challenge.

Character counter

In this challenge, you'll create a form that generates a ticket. There's a lot of scope for customizing the generated ticket and putting your own stamp on the project.

Conference ticket generator

This will be an excellent test of your HTML and CSS skills. The design uses common layout patterns you'll likely use in future projects, as well as some fun details.

Tech book club landing page

This 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!

Note-taking web app

This challenge is perfect for testing your CSS Grid and responsive skills with this bento grid layout.

Bento grid

This app contains 5 pages (Overview, Transactions, Budgets, Pots, and Recurring Bills) and includes a lot of tricky elements. You can also build it as a full-stack app!

Personal finance app

Practice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.

Product list with cart

This mortgage calculator is an excellent project for practicing working with forms, client-side validation, and updating the DOM. Remember to focus on accessibility, too!

Mortgage repayment calculator

Building accessible forms is a crucial task for front-end developers. This challenge will help you practice building a form with several input types and validation.

Contact form

This 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.

Hangman game

This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content.

Recipe page

In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!

Social links profile

This HTML & CSS-only challenge is a perfect project for beginners getting up to speed with HTML and CSS fundamentals, like HTML structure and the box model.

Blog preview card

In this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!

FAQ accordion

This 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!

Frontend Quiz app

In this project, you'll build a fully-functional link-sharing app for developers! You'll practice working with image uploads, repeater fields, drag-and-drop, and more!

Link-sharing app

This will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.

Newsletter sign-up form with success message

This body mass index (BMI) tool will be fun to build, testing your layout, JS and HTML form skills. The responsive layout shifts will also be an interesting challenge!

Body Mass Index calculator

This challenge is designed to sharpen your JavaScript and form validation skills. Working with dates in JavaScript can be tricky, so this will be a nice test!

Age calculator app

This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders!

Workit landing page

This challenge has something for everyone. It’s a HTML and CSS only project, but we’ve also provided a JSON file of the test results for anyone wanting to practice JS.

Results summary component

In 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.

Dictionary web app

An excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.

Multi-step form

Test your HTML and CSS skills with this portfolio site. Basic JS knowledge is needed for the form validation. You can even customize and use this as your own site!

Single-page developer portfolio

This news homepage will be an excellent opportunity to practice your CSS Grid skills. There will be lots of tricky decisions to make and plenty of learning opportunities!

News homepage

Your 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.

Connect Four game

This project will be a brilliant test of your HTML, CSS, and basic JavaScript skills. You'll use JS to toggle the visual state of the notifications.

Notifications page

This 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.

Password generator app

This fun project will be an excellent way to practice DOM manipulation and form validation while also putting your HTML and CSS skills to the test.

Interactive card details form

This project will test your layout skills, especially in making the site fully responsive. The skills grid is a perfect chance to practice CSS Grid.

Single-page design portfolio

This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.

Product preview card component

In this project, you'll build a fully-functional task management app with a light/dark mode toggle. We provide a JSON file, so you can practice working with JSON data.

Kanban task management web app

In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose.

Expenses chart component

This responsive page is perfect if you've learned the fundamentals of HTML & CSS, completed a couple of smaller projects, and want to take it up a notch.

Skilled e-learning landing page

This challenge will test your ability to create dropdown navigation menus, a common pattern on larger sites. It will also provide some nice basic layout challenges.

Intro section with dropdown navigation

In 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!

In-browser markdown editor

This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

Interactive rating component

This multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.

Entertainment web app

The perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.

Advice generator app

This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test!

Suite landing page

A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.

QR code component

This 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.

Tic Tac Toe game

This 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!

Interactive comments section

This two-page art gallery project will be perfect if you're ready to branch out beyond single landing pages. There are some particularly interesting layout challenges!

Art gallery website

This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

NFT preview card component

This challenge will be a perfect test of your HTML & CSS skills. If you're starting to get comfortable building smaller projects, this will be a great step up.

Equalizer landing page

This 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!

Space tourism multi-page website

In 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!

E-commerce product page

This 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.

Memory game

A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.

Time tracking dashboard

In this project, you'll use the GitHub users API to pull profile data and display it. It's a great challenge if you're looking to practice working with a 3rd-party API.

GitHub user search app

A perfect project for newbies who are starting to build confidence with layouts!

Order summary component

This 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!

Galleria slideshow site

This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!

Tip calculator app

This will be a perfect portfolio piece! You'll be working with JSON, managing state, and building like a real-world app. You can even create it as a full-stack project!

Product feedback app

This challenge will be a perfect test of your layout and responsive skills. There's a tiny bit of JS for the mobile menu, but the focus is HTML & CSS.

Agency landing page

In 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!

Planets fact site

This 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!

Calculator app

This huge e-commerce challenge will provide an incredible test for your front-end skills. Once you're done, you'll have an amazing project to add to your portfolio!

Audiophile e-commerce website

This is a great small challenge to help get you used to building to a design. There's no JS in this project, so you'll be able to focus on your HTML & CSS skills.

Stats preview card component

This HTML & CSS only challenge is perfect if you're starting to get a bit comfortable with your layout skills. The responsive layout shifts will also be a great test!

Meet landing page

This challenge is perfect if you're just getting started. The shift between the layouts will be a nice test if you're new to building responsive projects.

3-column preview card component

This project will be a perfect opportunity to put your CSS Grid skills to the test. The layout shifts from mobile, to tablet, to desktop will also be a nice challenge.

Typemaster pre-launch landing page

Flex your layout muscles with this landing page challenge. You'll mostly be working with HTML & CSS for this project with a tiny bit of JS for the mobile menu.

Blogr landing page

This invoicing app project will test you on many levels. You'll be working with JSON data, managing state, plus a lot more. You can even build it out as a full-stack app!

Invoice app

This challenge will test both your layout and state management skills. As visitors make pledges, your goal is to keep track of the changes.

Crowdfunding product page

This 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!

Coffeeroasters subscription site

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!

Interactive pricing component

Put your layout skills to the test with this landing page challenge. The only JS you'll need will be for the custom form validation on the email input.

Maker pre-launch 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!

Loopstudios landing page

This 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.

Pomodoro app

This 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!

Launch countdown timer

This 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!

Creative agency single-page site

The 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.

Todo app

In this challenge, you'll be building out an early access landing page that includes custom form validation.

Pod request access landing page

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!

Profile card component

This 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.

Clock app

This 2-page challenge will be a perfect test if you're starting to get comfortable with your HTML & CSS skills. There are a couple of small bonus challenges too!

Officelite coming soon site

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!

Testimonials grid section

This one's a BIG project! This challenge includes 5 different templates that make up a 7-page site. A perfect portfolio piece to show how you build multi-page websites!

Designo multi-page website

Build 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!

Devjobs web app

This 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.

Room homepage

This 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.

PayAPI multi-page website

This project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!

Social proof section

In 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!

Photosnap multi-page website

In this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.

IP Address Tracker

In 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.

Arch Studio multi-page website

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!

Chat app CSS illustration

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.

Article preview 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!

Fylo data storage component

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.

Coding bootcamp testimonials slider

This multi-page website will really test your front-end skills. There are 4 pages to build with mobile, tablet, and desktop designs included.

Scoot multi-page 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.

Dine restaurant website

This challenge will be a perfect chance to practice your Grid skills. The color theme switcher also adds a nice additional test.

Social media dashboard with theme switcher

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!

Minimalist portfolio website

In 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.

Challenges

Unlock full access

No challenges match those filters 🤔

Join our Discord community