Challenges

This challenge is perfect for testing your CSS Grid and responsive skills with this bento grid layout.

This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content.

In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!

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.

This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.

This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

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

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.

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.

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!

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!

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

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!

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!

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

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.

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

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.

A perfect challenge for beginners, this project will get you working with a 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.

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