• HTML
    • CSS
    • JS
    premium

    Invoice app

    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!

    • HTML
    • CSS
    • JS
    free

    Crowdfunding product page

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

    • HTML
    • CSS
    • JS
    premium

    Coffeeroasters subscription site

    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!

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    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!

    • HTML
    • CSS
    • JS
    premium

    Maker pre-launch landing page

    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.

    • HTML
    • CSS
    • JS
    free

    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!

    • HTML
    • CSS
    • JS
    premium

    Pomodoro app

    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.

    • HTML
    • CSS
    • JS
    free

    Launch countdown timer

    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!

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    premium

    Creative agency single-page site

    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!

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    Todo app

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    premium

    Pod request access landing page

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

    • HTML
    • CSS
    free

    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!

    • HTML
    • CSS
    • JS
    • API
    premium

    Clock app

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    premium

    Officelite coming soon site

    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!

    • HTML
    • CSS
    free

    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!

    • HTML
    • CSS
    • JS
    premium

    Designo multi-page website

    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!

    • HTML
    • CSS
    • JS
    free

    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!

    • HTML
    • CSS
    • JS
    • API
    premium

    GitHub Jobs API

    Build a fully-functional jobs board using the GitHub Jobs API. This is a great opportunity to practice JS and get to grips with a framework/library of your choice!

    • HTML
    • CSS
    • JS
    free

    Room homepage

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    premium

    PayAPI multi-page website

    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.

    • HTML
    • CSS
    free

    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!

    • HTML
    • CSS
    • JS
    premium

    Photosnap multi-page website

    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!

    • HTML
    • CSS
    • JS
    • API
    free

    IP Address Tracker

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

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    premium

    Arch Studio multi-page website

    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.

    • HTML
    • CSS
    free

    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!

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    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.

    • HTML
    • CSS
    free

    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!

    • HTML
    • CSS
    • JS
    free

    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.

    • HTML
    • CSS
    • JS
    premium

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    premium

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    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.

    • HTML
    • CSS
    • JS
    premium

    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!

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    Job listings with filtering

    In this challenge, you'll be using JavaScript to filter out jobs based on the categories selected.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    premium

    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.

    • HTML
    • CSS
    • JS
    free

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    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.

    • HTML
    • CSS
    • JS
    free

    Pricing component with toggle

    This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.

    • HTML
    • CSS
    • JS
    free

    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.

    • HTML
    • CSS
    • JS
    • API
    free

    URL shortening API landing page

    Integrate with the shrtcode URL shortening API and play with browser storage in this landing page challenge.

    Intermediate
    View challenge
    • HTML
    • CSS
    free

    Four card feature section

    A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.

    • HTML
    • CSS
    • JS
    free

    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.

    • HTML
    • CSS
    • JS
    free

    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.

    • HTML
    • CSS
    • JS
    free

    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.

    Intermediate
    View challenge
    • HTML
    • CSS
    • JS
    free

    Intro component with sign-up form

    Practice building out a sign-up form complete with client-side validation using JavaScript.

    • HTML
    • CSS
    free

    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.

    • HTML
    • CSS
    free

    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.

    • HTML
    • CSS
    • JS
    free

    Ping single column coming soon page

    This challenge is great for beginners and offers a chance to practice basic client-side form validation.

    • HTML
    • CSS
    • JS
    • API
    free

    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.

    • HTML
    • CSS
    free

    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.

    • HTML
    • CSS
    free

    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.

    • HTML
    • CSS
    free

    Huddle landing page with a single introductory section

    A perfect challenge for beginners, this project will get you working with a two column layout.

    • HTML
    • CSS
    free

    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.

    • HTML
    • CSS
    free

    Huddle landing page with curved sections

    Practice using pseudo-elements for styling extras and the CSS position property for the sections with curved edges.

Slack logo

Join our Slack community

Join over 40,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!