---

Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Screenshots
• Concepts Practiced
• What I Learned
• Future Improvements
• Author

---

Overview

SkillForge is a frontend practice project designed to strengthen core HTML and CSS fundamentals. The goal was to build a real-world-style landing page with a responsive layout and clean UI — without reaching for any external framework.

---

Features

• Fully responsive layout (mobile, tablet, desktop)
• Responsive navbar with mobile menu icon
• Hero section with a clear call-to-action
• Google Fonts integration (Ubuntu)
• Clean, readable typography and spacing

---

Tech Stack

Technology	Usage
HTML5	Page structure and semantic markup
CSS3	Styling and layout
Flexbox	Component alignment and layout
Media Queries	Responsive breakpoints
Responsive Units	vh, vw, %, rem for scalable sizing
calc()	Dynamic spacing and sizing

---

Project Structure

SkillForge/
├── index.html        # Main HTML file
├── style.css         # Stylesheet
└── image copy.png    # Hero section image

---

Concepts Practiced

• Semantic HTML structure
• CSS Box Model
• Flexbox layout and alignment
• Responsive typography
• Media queries and breakpoints
• Navbar responsiveness
• calc() for dynamic values
• CSS positioning

---

What I Learned

Working on SkillForge helped me get hands-on clarity on some tricky frontend concepts:

• The difference between % and vh for height
• How Flexbox alignment behaves across screen sizes
• How to structure responsive breakpoints properly
• Restructuring layouts for mobile without breaking desktop
• Writing clean, maintainable CSS

---

Future Improvements

• Add smooth scroll and CSS animations
• Add hover transitions on buttons and cards
• Introduce JavaScript for mobile menu toggle
• Deploy a live version via GitHub Pages
• Add more sections — Testimonials, Pricing, and Footer

---

Author

---

"Consistency beats motivation."

⭐ If you found this project helpful, give it a star — it means a lot!