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.
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.
multi-step-form
An excellent test for your form-building and JS skills, this project will pose lots of challenges along the way to completion.
product-preview-card-component
This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.
huddle-landing-page-with-curved-sections
Practice using pseudo-elements for styling extras and the CSS position property for the sections with curved edges.
rest-countries-api-with-color-theme-switcher
If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.
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.
age-calculator-app
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!
blog-preview-card
This HTML & CSS-only challenge is a perfect project for beginners getting up to speed with HTML and CSS fundamentals, like HTML structure and the box model.
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!
ecommerce-product-page
In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!
fylo-landing-page-with-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.
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-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.
news-homepage
This news homepage will be an excellent opportunity to practice your CSS Grid skills. There will be lots of tricky decisions to make and plenty of learning opportunities!
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.
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.
expenses-chart-component
In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose.
faq-accordion
In this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!
interactive-rating-component
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!
recipe-page
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.
results-summary-component
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.
social-links-profile
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!
social-proof-section
This project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!
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.