Frontend Mentor Solutions

Solution to Frontend Mentor website challenges.

Product_preview_card_component challenge
Product preview card component

This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.

Order_summary_component challenge
Order summary component

A perfect project for newbies who are starting to build confidence with layouts!

Stats_preview_card_component challenge
Stats preview card component

This is a great small challenge to help get you used to building to a design. There's no JS in this project, so you'll be able to focus on your HTML & CSS skills.

Expenses_chart_component challenge
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.

Advice_generator_app challenge
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.

Interactive_rating_component challenge
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!

Intro_section_with_dropdown_navigation challenge
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.

QR_code_component challenge
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.

NFT_preview_card_component challenge
NFT preview card component

This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

Time_tracking_dashboard challenge
Time tracking dashboard

A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.

Tip_calculator_app challenge
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!

Interactive_pricing_component challenge
Interactive pricing component

In this project, you'll build out an interactive pricing component complete with custom range input slider and pricing toggle. A perfect way to test your JS skills!