Frontend Mentor Project Solutions

This is a collection of solutions I created for a variety of challenges from Frontend Mentor - a platform that provides an awesome way to grow in frontend development skills. I really enjoy how each project's approach is a lot like a real-life scenario: you're given a brief that contains core design goals and styles, sometimes Sketch or Figma files for a greater level of detail, and then it's up to you to deliver a solution that as closely matches what's needed as possible. There is a lot of flexibility to build however you want. Each of these projects within this showcase pushed me for different reasons, to stretch what I thought I was capable of, and to challenge me to keep learning and growing - aiming to get better everyday with practice.

Check out links below for each project's live demo, my Frontend Mentor solution, and the original project brief's link.

Links

Projects Showcase Site

Finished Solutions

Project Difficulty Level	Key
Newbie	⭐️
Junior	⭐️⭐️
Intermediate	⭐️⭐️⭐️
Advanced	⭐️⭐️⭐️⭐️
Guru	⭐️⭐️⭐️⭐️⭐️

Project	Level	Links	Tools & Approach
REST Countries API with color theme switcher	⭐️⭐️⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
Rock, Paper, Scissors Game	⭐️⭐️⭐️⭐️	Live Demo / Solution / Project Brief	HTML, CSS, JavaScript
Calculator App	⭐️⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
IP Address Tracker	⭐️⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
Todo App	⭐️⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind, Firebase
Advice Generator App	⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
Age Calculator App	⭐️⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Blogr Landing Page	⭐️⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Expenses Chart Component	⭐️⭐️	Live Demo / Solution / Project Brief	HTML, CSS, JavaScript
Fylo Dark Theme Landing Page	⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, SASS, Bootstrap
News Homepage	⭐️⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Notifications Page	⭐️⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Social Media Dashboard with Theme Switcher	⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
Sunnyside Agency Landing Page	⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, SASS, Bootstrap
Testimonials Grid Section	⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
Tip Calculator	⭐️⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
3-Column Preview Card Component	⭐️	Live Demo / Solution / Project Brief	React, Next, SASS, Bootstrap
Article Preview Component	⭐️	Live Demo / Solution / Project Brief	HTML, CSS, JavaScript
Base Apparel Coming Soon Page	⭐️	Live Demo / Solution / Project Brief	HTML, CSS, JavaScript
Blog Preview Card	⭐️	Live Demo / Solution / Project Brief	HTML, CSS
FAQ Accordion	⭐️	Live Demo / Solution / Project Brief	HTML, CSS, JavaScript
Four Card Feature Section	⭐️	Live Demo / Solution / Project Brief	HTML, CSS
Huddle Landing Page	⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
Interactive Rating Component	⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Intro Component with Sign-Up Form	⭐️	Live Demo / Solution / Project Brief	HTML, CSS, JavaScript
NFT Preview Card Component	⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Order Summary Component	⭐️	Live Demo / Solution / Project Brief	HTML, CSS
Ping Single Column Coming Soon Page	⭐️	Live Demo / Solution / Project Brief	HTML, CSS, JavaScript
Product Preview Card	⭐️	Live Demo / Solution / Project Brief	HTML, CSS
Profile Card Component	⭐️	Live Demo / Solution / Project Brief	React, Next, SASS, Bootstrap
QR Code Component	⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Recipe Page	⭐️	Live Demo / Solution / Project Brief	HTML, CSS
Results Summary Component	⭐️	Live Demo / Solution / Project Brief	React, Bootstrap
Single Price Grid Component	⭐️	Live Demo / Solution / Project Brief	HTML, CSS
Stats Preview Card Component	⭐️	Live Demo / Solution / Project Brief	React, Next, Tailwind
Social Links Profile	⭐️	Live Demo / Solution / Project Brief	HTML, CSS
Social Proof Section	⭐️	Live Demo / Solution / Project Brief	HTML, CSS