Frontend Mentor's repositories
url-shortening-api
Integrate with the rel.ink URL shortening API and play with browser storage in this landing page challenge.
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.
manage-landing-page
This challenge will be a great test for your responsive skills. There are lots of small details and slight content shifts for different screen sizes.
rock-paper-scissors
This challenge will seriously test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.
room-homepage
This 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.
product-preview-card-component
This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.
calculator-app
This 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!
digitalbank-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.
newsletter-sign-up-with-success-message
This will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.
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!
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.
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.
chat-app-css-illustration
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!
huddle-landing-page-with-single-introductory-section
A perfect challenge for beginners, this project will get you working with a two column layout.
interactive-card-details-form
This fun project will be an excellent way to practice DOM manipulation and form validation while also putting your HTML and CSS skills to the test.
intro-component-with-signup-form
Practice building out a sign-up form complete with client-side validation using JavaScript.
intro-section-with-dropdown-navigation
This challenge will test your ability to create dropdown navigation menus, a common pattern on larger sites. It will also provide some nice basic layout challenges.
ip-address-tracker
In this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.
notifications-page
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.
pricing-component-with-toggle
This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.
social-media-dashboard-with-theme-switcher
This challenge will be a perfect chance to practice your Grid skills. The color theme switcher also adds a nice additional test.
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.
static-job-listings
In this challenge, you'll be using JavaScript to filter out jobs based on selected categories. We provide a local JSON file to help you practice working with JSON data.
weather-app
Build a responsive weather app with search functionality, unit conversion, and detailed forecasts using the Open-Meteo API.