Skip to content

README.md

Latest commit

 

History

History
49 lines (39 loc) · 3.57 KB

README.md

File metadata and controls

49 lines (39 loc) · 3.57 KB

Frontend Mentor Challenge Solutions

Welcome to my repository of solutions for the challenges provided by Frontend Mentor. This collection is a showcase of my journey as a front-end developer, demonstrating my skills in turning designs into responsive, interactive, and pixel-perfect web interfaces.

View My Design Implementations on Figma

My Process

For each challenge, I follow a structured workflow to ensure high-quality results: Design Analysis & Planning:

  1. I start by carefully reviewing the challenge's design files. I then create my own implementation plan in Figma, where I deconstruct the layout, define a design system (colors, fonts, spacing), and plan my component structure. This crucial step allows me to think through the CSS and HTML structure before writing a single line of code.
  2. Code Implementation: I build the project using modern, semantic HTML, responsive CSS, and interactive JavaScript. I focus on writing clean, maintainable, and accessible code.
  3. Deployment: Once a solution is complete, I deploy it to a live server so it can be viewed and interacted with.

This repository serves as a living portfolio of my skills. Below you will find a list of the challenges I have completed.

Completed Challenges

Here you can find a list of all the challenges I've tackled, organized by difficulty. Each project includes a link to the live solution and the source code.

Newbie Challenges

Challenge Name Live Demo Source Code Technologies
Recipe Page Live Demo Source Code HTML, CSS
Social Links Profile Live Demo Source Code HTML, CSS
Blog Preview Card Live Demo Source Code HTML, CSS
Faq Accordion Live Demo Source Code HTML, CSS, Tailwind
Product Preview Card Component Live Demo Source Code HTML, CSS, Tailwind

Junior Challenges

Challenge Name Live Demo Source Code Technologies
News Homepage Live Demo Source Code HTML, CSS, Tailwind, Grids
Testimonials Grid Section Live Demo Source Code HTML, CSS, Tailwind, Grids

Intermediate Challenges

Challenge Name Live Demo Source Code Technologies

Tech Stack

  • HTML5
  • CSS3
  • JAVASCRIPT (ES6+)
  • Tailwind CSS
  • Figma

Connect with Me

I'm always open to connecting and talking about code, design, or new opportunities.