Challenges

Challenges

    • NewFree+
      Desktop design screenshot for the Space tourism multi-page website coding challenge

      Space tourism multi-page website

      • HTML
      • CSS
      • JS
      3Intermediate

      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 be learned!

    • Free
      Desktop design screenshot for the E-commerce product page coding challenge

      E-commerce product page

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Premium
      Desktop design screenshot for the Memory game coding challenge

      Memory game

      • HTML
      • CSS
      • JS
      4Advanced

      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.

    • Free
      Desktop design screenshot for the Time tracking dashboard coding challenge

      Time tracking dashboard

      • HTML
      • CSS
      • JS
      2Junior

      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.

    • Premium
      Desktop design screenshot for the GitHub user search app coding challenge

      GitHub user search app

      • HTML
      • CSS
      • JS
      • API
      2Junior

      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.

    • Free
      Desktop design screenshot for the Order summary component coding challenge

      Order summary component

      • HTML
      • CSS
      1Newbie

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

    • Premium
      Desktop design screenshot for the Galleria slideshow site coding challenge

      Galleria slideshow site

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Free
      Desktop design screenshot for the Tip calculator app coding challenge

      Tip calculator app

      • HTML
      • CSS
      • JS
      2Junior

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

    • Premium
      Desktop design screenshot for the Product feedback app coding challenge

      Product feedback app

      • HTML
      • CSS
      • JS
      4Advanced

      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!

    • Free
      Desktop design screenshot for the Sunnyside agency landing page coding challenge

      Sunnyside agency landing page

      • HTML
      • CSS
      • JS
      2Junior

      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.

    • Premium
      Desktop design screenshot for the Planets fact site coding challenge

      Planets fact site

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Free
      Desktop design screenshot for the Calculator app coding challenge

      Calculator app

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Premium
      Desktop design screenshot for the Audiophile e-commerce website coding challenge

      Audiophile e-commerce website

      • HTML
      • CSS
      • JS
      5Guru

      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!

    • Free
      Desktop design screenshot for the Stats preview card component coding challenge

      Stats preview card component

      • HTML
      • CSS
      1Newbie

      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.

    • Premium
      Desktop design screenshot for the Meet landing page coding challenge

      Meet landing page

      • HTML
      • CSS
      1Newbie

      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!

    • Free
      Desktop design screenshot for the 3-column preview card component coding challenge

      3-column preview card component

      • HTML
      • CSS
      1Newbie

      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.

    • Premium
      Desktop design screenshot for the Typemaster pre-launch landing page coding challenge

      Typemaster pre-launch landing page

      • HTML
      • CSS
      2Junior

      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.

    • Free
      Desktop design screenshot for the Blogr landing page coding challenge

      Blogr landing page

      • HTML
      • CSS
      • JS
      2Junior

      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.

    • Premium
      Desktop design screenshot for the Invoice app coding challenge

      Invoice app

      • HTML
      • CSS
      • JS
      5Guru

      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!

    • Free
      Desktop design screenshot for the Crowdfunding product page coding challenge

      Crowdfunding product page

      • HTML
      • CSS
      • JS
      2Junior

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

    • Premium
      Desktop design screenshot for the Coffeeroasters subscription site coding challenge

      Coffeeroasters subscription site

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Free
      Desktop design screenshot for the Interactive pricing component coding challenge

      Interactive pricing component

      • HTML
      • CSS
      • JS
      2Junior

      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!

    • Premium
      Desktop design screenshot for the Maker pre-launch landing page coding challenge

      Maker pre-launch landing page

      • HTML
      • CSS
      • JS
      2Junior

      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.

    • Free
      Desktop design screenshot for the Loopstudios landing page coding challenge

      Loopstudios landing page

      • HTML
      • CSS
      • JS
      2Junior

      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!

    • Premium
      Desktop design screenshot for the Pomodoro app coding challenge

      Pomodoro app

      • HTML
      • CSS
      • JS
      4Advanced

      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.

    • Free
      Desktop design screenshot for the Launch countdown timer coding challenge

      Launch countdown timer

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Premium
      Desktop design screenshot for the Creative agency single-page site coding challenge

      Creative agency single-page site

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Free
      Desktop design screenshot for the Todo app coding challenge

      Todo app

      • HTML
      • CSS
      • JS
      3Intermediate

      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.

    • Premium
      Desktop design screenshot for the Pod request access landing page coding challenge

      Pod request access landing page

      • HTML
      • CSS
      • JS
      1Newbie

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

    • Free
      Desktop design screenshot for the Profile card component coding challenge

      Profile card component

      • HTML
      • CSS
      1Newbie

      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!

    • Premium
      Desktop design screenshot for the Clock app coding challenge

      Clock app

      • HTML
      • CSS
      • JS
      • API
      3Intermediate

      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.

    • Premium
      Desktop design screenshot for the Officelite coming soon site coding challenge

      Officelite coming soon site

      • HTML
      • CSS
      • JS
      2Junior

      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!

    • Free
      Desktop design screenshot for the Testimonials grid section coding challenge

      Testimonials grid section

      • HTML
      • CSS
      2Junior

      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!

    • Premium
      Desktop design screenshot for the Designo multi-page website coding challenge

      Designo multi-page website

      • HTML
      • CSS
      • JS
      5Guru

      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!

    • Free
      Desktop design screenshot for the FAQ accordion card coding challenge

      FAQ accordion card

      • HTML
      • CSS
      • JS
      1Newbie

      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!

    • Premium
      Desktop design screenshot for the Devjobs web app coding challenge

      Devjobs web app

      • HTML
      • CSS
      • JS
      4Advanced

      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!

    • Free
      Desktop design screenshot for the Room homepage coding challenge

      Room homepage

      • HTML
      • CSS
      • JS
      3Intermediate

      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.

    • Premium
      Desktop design screenshot for the PayAPI multi-page website coding challenge

      PayAPI multi-page website

      • HTML
      • CSS
      • JS
      4Advanced

      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.

    • Free
      Desktop design screenshot for the Social proof section coding challenge

      Social proof section

      • HTML
      • CSS
      1Newbie

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

    • Premium
      Desktop design screenshot for the Photosnap multi-page website coding challenge

      Photosnap multi-page website

      • HTML
      • CSS
      • JS
      4Advanced

      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!

    • Free
      Desktop design screenshot for the IP Address Tracker coding challenge

      IP Address Tracker

      • HTML
      • CSS
      • JS
      • API
      3Intermediate

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

    • Premium
      Desktop design screenshot for the Arch Studio multi-page website coding challenge

      Arch Studio multi-page website

      • HTML
      • CSS
      • JS
      4Advanced

      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.

    • Free
      Desktop design screenshot for the Chat app CSS illustration coding challenge

      Chat app CSS illustration

      • HTML
      • CSS
      3Intermediate

      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!

    • Free
      Desktop design screenshot for the Article preview component coding challenge

      Article preview component

      • HTML
      • CSS
      • JS
      1Newbie

      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.

    • Free
      Desktop design screenshot for the Fylo data storage component coding challenge

      Fylo data storage component

      • HTML
      • CSS
      2Junior

      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!

    • Free
      Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

      Coding bootcamp testimonials slider

      • HTML
      • CSS
      • JS
      2Junior

      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.

    • Premium
      Desktop design screenshot for the Scoot multi-page website coding challenge

      Scoot multi-page website

      • HTML
      • CSS
      • JS
      3Intermediate

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

    • Premium
      Desktop design screenshot for the Dine restaurant website coding challenge

      Dine restaurant website

      • HTML
      • CSS
      • JS
      3Intermediate

      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.

    • Free
      Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

      Social media dashboard with theme switcher

      • HTML
      • CSS
      • JS
      2Junior

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

    • Premium
      Desktop design screenshot for the Minimalist portfolio website coding challenge

      Minimalist portfolio website

      • HTML
      • CSS
      • JS
      3Intermediate

      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!

    • Free
      Desktop design screenshot for the Job listings with filtering coding challenge

      Job listings with filtering

      • HTML
      • CSS
      • JS
      3Intermediate

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

    • Free
      Desktop design screenshot for the Easybank landing page coding challenge

      Easybank landing page

      • HTML
      • CSS
      • JS
      3Intermediate

      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.

    • Premium
      Desktop design screenshot for the myteam multi-page website coding challenge

      myteam multi-page website

      • HTML
      • CSS
      • JS
      4Advanced

      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.

    • Free
      Desktop design screenshot for the Manage landing page coding challenge

      Manage landing page

      • HTML
      • CSS
      • JS
      3Intermediate

      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.

    • Free
      Desktop design screenshot for the Insure landing page coding challenge

      Insure landing page

      • HTML
      • CSS
      • JS
      2Junior

      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.

    • Free
      Desktop design screenshot for the Pricing component with toggle coding challenge

      Pricing component with toggle

      • HTML
      • CSS
      • JS
      2Junior

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

    • Free
      Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

      Rock, Paper, Scissors game

      • HTML
      • CSS
      • JS
      4Advanced

      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.

    • Free
      Desktop design screenshot for the URL shortening API landing page coding challenge

      URL shortening API landing page

      • HTML
      • CSS
      • JS
      • API
      3Intermediate

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

    • Free
      Desktop design screenshot for the Four card feature section coding challenge

      Four card feature section

      • HTML
      • CSS
      1Newbie

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

    • Free
      Desktop design screenshot for the Base Apparel coming soon page coding challenge

      Base Apparel coming soon page

      • HTML
      • CSS
      • JS
      1Newbie

      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.

    • Free
      Desktop design screenshot for the Project tracking intro component coding challenge

      Project tracking intro component

      • HTML
      • CSS
      • JS
      2Junior

      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.

    • Free
      Desktop design screenshot for the Bookmark landing page coding challenge

      Bookmark landing page

      • HTML
      • CSS
      • JS
      3Intermediate

      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.

    • Free
      Desktop design screenshot for the Intro component with sign-up form coding challenge

      Intro component with sign-up form

      • HTML
      • CSS
      • JS
      1Newbie

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

    • Free
      Desktop design screenshot for the Single price grid component coding challenge

      Single price grid component

      • HTML
      • CSS
      1Newbie

      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.

    • Free
      Desktop design screenshot for the Clipboard landing page coding challenge

      Clipboard landing page

      • HTML
      • CSS
      2Junior

      Put your layout skills to the test with this HTML & CSS landing page challenge. This challenge includes a design for hover states.

    • Free
      Desktop design screenshot for the Ping single column coming soon page coding challenge

      Ping single column coming soon page

      • HTML
      • CSS
      • JS
      1Newbie

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

    • Free
      Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

      REST Countries API with color theme switcher

      • HTML
      • CSS
      • JS
      • API
      4Advanced

      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.

    • Free
      Desktop design screenshot for the Huddle landing page with alternating feature blocks coding challenge

      Huddle landing page with alternating feature blocks

      • HTML
      • CSS
      2Junior

      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.

    • Free
      Desktop design screenshot for the Fylo dark theme landing page coding challenge

      Fylo dark theme landing page

      • HTML
      • CSS
      • JS
      2Junior

      This design has some nice layout challenges in it. A perfect training ground to practice your Flexbox and/or Grid skills.

    • Free
      Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

      Huddle landing page with a single introductory section

      • HTML
      • CSS
      1Newbie

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

    • Free
      Desktop design screenshot for the Fylo landing page with two column layout coding challenge

      Fylo landing page with two column layout

      • HTML
      • CSS
      2Junior

      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.

    • Free
      Desktop design screenshot for the Huddle landing page with curved sections coding challenge

      Huddle landing page with curved sections

      • HTML
      • CSS
      2Junior

      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 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!