Frontend Mentor Solutions

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.

Code Preview

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.

Code Preview

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!

Code Preview

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!

Code Preview

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.

Code Preview

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.

Code Preview

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.

Code Preview

Profile card component

HTML CSS

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!

Code Preview

Four card feature section

HTML CSS

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

Code Preview

Huddle landing page with a single introductory section

HTML CSS

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

Code Preview

Order summary component

HTML CSS

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

Code Preview

Ping single column coming soon page

HTML CSS JS

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

Code Preview

Intro component with sign-up form

HTML CSS JS

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

Code Preview