Notifications Page
html
css
js
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.
Single-Page Design Portfolio
html
css
js
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.
Intro Component with Sign-up Form
html
css
js
Practice building out a sign-up form complete with client-side validation using JavaScript.
Project Tracking Intro Component
html
css
js
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.
Interactive Rating Component
html
css
js
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!
Sunnyside Agency Landing Page
html
css
js
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.
Article Preview Component
html
css
js
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.
GitHub User Search App
html
css
js
api
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.
Coding Bootcamp Testimonials Slider
html
css
js
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.
Age Calculator App
html
css
js
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!
Base Apparel Coming Soon Page
html
css
js
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.
Loopstudios Landing Page
html
css
js
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!
Stats Preview Card Component
html
css
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.
Pod Request Access Landing Page
html
css
js
In this challenge, you'll be building out an early access landing page that includes custom form validation.
Results Summary Component
html
css
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.
Single Price Grid Component
html
css
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.
Testimonials Grid Section
html
css
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!
Order Summary Component
html
css
A perfect project for newbies who are starting to build confidence with layouts!
Social Proof Section
html
css
This project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!
Advice Generator App
html
css
js
api
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.
3-Column Preview Card Component
html
css
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.
FAQ Accordion Card
html
css
js
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!
NFT Preview Card Component
html
css
This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.
QR Code Component
html
css
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.
Scroll to Top