Frontend Mentor
Change the repository type filter
All
Repositories list
72 repositories
rock-paper-scissors
Public templateThis 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.bento-grid
Public templateThis challenge is perfect for testing your CSS Grid and responsive skills with this bento grid layout.recipe-page
Public templateThis challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content.social-links-profile
Public templateIn 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!blog-preview-card
Public templateThis 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.qr-code-component
Public templateA perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.product-list-with-cart
Public templatePractice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.- This mortgage calculator is an excellent project for practicing working with forms, client-side validation, and updating the DOM. Remember to focus on accessibility, too!
rest-countries-api-with-color-theme-switcher
Public templateIf 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.contact-form
Public templateBuilding accessible forms is a crucial task for front-end developers. This challenge will help you practice building a form with several input types and validation.url-shortening-api
Public templateIntegrate with the rel.ink URL shortening API and play with browser storage in this landing page challenge.news-homepage
Public templateThis 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!ecommerce-product-page
Public templateIn 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!interactive-rating-component
Public templateThis is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!age-calculator-app
Public templateThis 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!product-preview-card-component
Public templateThis HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.results-summary-component
Public templateThis 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.fylo-landing-page-with-two-column-layout
Public templateThis 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.newsletter-sign-up-with-success-message
Public templateThis 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.ip-address-tracker
Public templateIn this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.multi-step-form
Public templateAn excellent test for your form-building and JS skills, this project will pose lots of challenges along the way to completion.notifications-page
Public templateThis 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.- 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!
interactive-card-details-form
Public templateThis 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.manage-landing-page
Public templateThis challenge will be a great test for your responsive skills. There are lots of small details and slight content shifts for different screen sizes.static-job-listings
Public templateIn 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.faq-accordion
Public templateIn 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!advice-generator-app
Public templateThe perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.huddle-landing-page-with-curved-sections
Public templatePractice using pseudo-elements for styling extras and the CSS position property for the sections with curved edges.expenses-chart-component
Public templateIn 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.