Front-end Projects

📑 Table of Contents

• Overview
• Repo Structure
• How to Run
• Projects
  • The Odin Project
  • Frontend Mentor
• Tech Stack
• Resources

Overview

This repository serves as a central hub for my frontend projects. It features solutions from The Odin Project curriculum and challenges from the Frontend Mentor platform. Projects focus on semantic HTML, advanced CSS (Flexbox/Grid), interactive JavaScript and high-precision design implementation.

📊 Project Insights

Metric	Status
Total Challenges	8 (4 The Odin Project + 4 Frontend Mentor)
Status	Completed & Deployed
Responsiveness	Desktop-first
Performance	Optimized for Lighthouse
Timeline	March – Oct 2025 📅

📂 Repo Structure

📂 frontend-projects/
├── 📂 assets/                  
├── 📂 the-odin-project/       
│   ├── 01-recipes/
│   ├── 02-landing-page/
│   ├── 03-rock-paper-scissors/
│   └── 04-etch-a-sketch/
└── 📂 frontend-mentor/         
    ├── 01-qr-code-component/
    ├── 02-blog-preview-card/
    ├── 03-recipe-page/
    └── 04-social-links-profile/
   

⚙️How to Run

1. Clone the repository

   git clone https://github.com/dinruz/frontend-projects.git

2. Navigate to any project folder

   For example:

   cd the-odin-project/01-recipes

3. Open index.html in your browser 🌐 or use Live Server ⚡ in VS Code

🧩 Projects

The Odin Project

#	Project	Preview	Description	Core Skills	Links
01	Odin Recipes		Multi-page recipe site	Semantic HTML	Repo / Live
02	Landing Page		Responsive marketing page	Flexbox & Layouts	Repo / Live
03	Rock Paper Scissors		Interactive logic game	JS & UI Updates	Repo / Live
04	Etch-a-Sketch		Dynamic drawing board	DOM Manipulation	Repo / Live

---

Frontend Mentor Challenges

#	Project	Preview	Description	Core Skills	Links
01	QR Code Component		Simple QR card	HTML/CSS Basics	Repo / Live
02	Blog Preview Card		Card with hover states	Typography & Layout	Repo / Live
03	Recipe Page		Content organization	CSS Lists & Styling	Repo / Live
04	Social Links Profile		Personal profile links	Flexbox Centering	Repo / Live

🛠️ Tech Stack

📚 Resources

📎 The Odin Project Foundations Course:

• Project Recipes Instructions
• Project Landing Page Instructions
• Project Rock Paper Scissors Instructions
• Project Etch-a-Sketch Instructions

📎 Front-end Mentor:

• QR Code Component Challenge Instructions
• Blog Preview Card Challenge Instructions
• Recipe Page Challenge Instructions
• Social Links Profile Challenge Instructions

--

⬆️ Back to Top