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