Challenges
- Type
- Difficulty
- Languages
Challenges
- NewFree+
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 be learned!
- 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.
- Free
Time tracking dashboard
- HTML
- CSS
- JS
2JuniorA 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
GitHub user search app
- HTML
- CSS
- JS
- API
2JuniorIn 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
Order summary component
- HTML
- CSS
1NewbieA perfect project for newbies who are starting to build confidence with layouts!
- 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!
- Free
Tip calculator app
- HTML
- CSS
- JS
2JuniorThis 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
4AdvancedThis 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
2JuniorThis 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
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
Audiophile e-commerce website
- HTML
- CSS
- JS
5GuruThis 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
1NewbieThis 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
1NewbieThis 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
1NewbieThis 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
2JuniorThis 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
2JuniorFlex 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
5GuruThis 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
2JuniorThis 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
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!
- Free
Interactive pricing component
- HTML
- CSS
- JS
2JuniorIn 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
2JuniorPut 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
2JuniorThis 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
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
Pod request access landing page
- HTML
- CSS
- JS
1NewbieIn this challenge, you'll be building out an early access landing page that includes custom form validation.
- Free
Profile card component
- HTML
- CSS
1NewbieThis 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
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
Officelite coming soon site
- HTML
- CSS
- JS
2JuniorThis 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
2JuniorThis 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
5GuruThis 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
1NewbieIn 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
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.
- Free
Social proof section
- HTML
- CSS
1NewbieThis 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
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!
- Free
Article preview component
- HTML
- CSS
- JS
1NewbiePractice 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
2JuniorThis 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
2JuniorThis 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
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.
- Free
Social media dashboard with theme switcher
- HTML
- CSS
- JS
2JuniorThis 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
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 the categories selected.
- 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
Insure landing page
- HTML
- CSS
- JS
2JuniorTest 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
2JuniorThis 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
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 shrtcode URL shortening API and play with browser storage in this landing page challenge.
- Free
Four card feature section
- HTML
- CSS
1NewbieA 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
1NewbieThis 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
2JuniorSome 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
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
Intro component with sign-up form
- HTML
- CSS
- JS
1NewbiePractice building out a sign-up form complete with client-side validation using JavaScript.
- Free
Single price grid component
- HTML
- CSS
1NewbieIn 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
2JuniorPut 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
1NewbieThis 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
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.
- Free
Huddle landing page with alternating feature blocks
- HTML
- CSS
2JuniorThis 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
- JS
2JuniorThis 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
1NewbieA 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
2JuniorThis 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
2JuniorPractice using pseudo-elements for styling extras and the CSS position property for the sections with curved edges.
