Pinned 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.
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.
product-preview-card-component
This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.
readme-template
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.
space-tourism-website
This project is a fun collaboration between Scrimba, Kevin Powell, and ourselves! If you like, you can follow along and watch Kevin complete the project on Scrimba. Lots to be learned!
tip-calculator-app
This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!
url-shortening-api
Integrate with the rel.ink URL shortening API and play with browser storage in this landing page challenge.
Frontend Mentor's Repositories
frontendmentorio/four-card-feature-section
A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.
frontendmentorio/url-shortening-api
Integrate with the rel.ink URL shortening API and play with browser storage in this landing page challenge.
frontendmentorio/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.
frontendmentorio/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.
frontendmentorio/product-preview-card-component
This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.
frontendmentorio/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.
frontendmentorio/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!
frontendmentorio/testimonials-grid-section
This challenge will be perfect practice for anyone wanting to test their CSS Grid skills. Grid is such a powerful addition to CSS, so it's worth getting to grips with it!
frontendmentorio/tip-calculator-app
This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!
frontendmentorio/advice-generator-app
The 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.
frontendmentorio/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!
frontendmentorio/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.
frontendmentorio/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.
frontendmentorio/product-list-with-cart
Practice 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.
frontendmentorio/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.
frontendmentorio/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.
frontendmentorio/time-tracking-dashboard
frontendmentorio/bento-grid
This challenge is perfect for testing your CSS Grid and responsive skills with this bento grid layout.
frontendmentorio/browser-extensions-manager-ui
This project will be a fun way to practice working with dynamic data, filtering data, colour theming, building a responsive grid, and more!
frontendmentorio/conference-ticket-generator
In this challenge, you'll create a form that generates a ticket. There's a lot of scope for customizing the generated ticket and putting your own stamp on the project.
frontendmentorio/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!
frontendmentorio/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.
frontendmentorio/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!
frontendmentorio/ip-address-tracker
In this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.
frontendmentorio/mortgage-repayment-calculator
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!
frontendmentorio/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!
frontendmentorio/qr-code-component
A 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.
frontendmentorio/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.
frontendmentorio/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!
frontendmentorio/contact-form
Building 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.