Frontend Mentor's repositories
four-card-feature-section
A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.
insure-landing-page
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.
clipboard-landing-page
Put your layout skills to the test with this HTML & CSS landing page challenge. This challenge includes a design for hover states.
coding-bootcamp-testimonials-slider
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.
easybank-landing-page
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.
fylo-dark-theme-landing-page
This design has some nice layout challenges in it. A perfect training ground to practice your Flexbox and/or Grid skills.
fylo-data-storage-component
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!
huddle-landing-page-with-alternating-feature-blocks
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.
single-price-grid-component
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.
3-column-preview-card-component
This challenge is perfect if you're just starting. The shift between the layouts will be a nice test if you're new to building responsive projects.
article-preview-component
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.
base-apparel-coming-soon
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.
bookmark-landing-page
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.
huddle-landing-page-with-single-introductory-section
A perfect challenge for beginners, this project will get you working with a two column layout.
intro-component-with-signup-form
Practice building out a sign-up form complete with client-side validation using JavaScript.
pricing-component-with-toggle
This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.
profile-card-component
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!
faq-accordion-card
In this challenge, you'll be building out Frequently Asked Questions accordion. This is an extremely common pattern, so it's a great opportunity to get some practice in!
interactive-comments-section
This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!
ping-coming-soon-page
This challenge is great for beginners and offers a chance to practice basic client-side form validation.
project-tracking-intro-component
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.