• Newpremium
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  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
  

  

  Fylo dark theme landing page

  • HTML
  • CSS

  2Junior

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

• free
  

  

  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
  

  

  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
  

  

  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.