🎨 HTML, CSS & JavaScript Homeworks

A personal collection of web development practice projects focused on building foundational skills in HTML, CSS, and JavaScript.

---

📋 Table of Contents

• 🎨 HTML, CSS & JavaScript Homeworks
  • 📋 Table of Contents
  • 🌟 About This Repository
  • 📁 Project Structure
    • Key Files
  • 📚 Lessons Overview
  • 🛠 Technologies Used
  • 🚀 How to Run / View Projects
  • 📊 Repository Stats (as of last update)
  • 🎯 Key Learnings & Features Practiced
  • 🤝 Contributing
  • 📄 License
  • 📬 Contact

---

🌟 About This Repository

This repository (html-css-js-homeworks) contains all my homework and practice projects while learning front-end web development. Each lesson represents a step-by-step improvement in my skills — from basic static pages to interactive forms and responsive designs.

The projects were originally named Homework-1 to Homework-6 and are now organized under lesson 1 to lesson 6 for better clarity.

Goal: Practice clean code, semantic HTML, modern CSS, and vanilla JavaScript.

---

📁 Project Structure

html-css-js-homeworks/
├── .github/
│   └── workflows/          # GitHub Actions (CI/CD)
├── lesson 1/               # Registration Page
├── lesson 2/               # Sample Website with Header/Footer
├── lesson 3/               # Login + Product Selection (Interactive)
├── lesson 4/               # Design Recreation from Image
├── lesson 5/               # Simple Introduction Page
├── lesson 6/               # Contact Form
├── .gitattributes
├── .gitignore
├── LICENSE
└── README.md               # ← You are here

Key Files

• .gitignore — Standard ignores for node modules, DS_Store, etc.
• LICENSE — Project license (usually MIT for open source learning repos)
• .github/workflows/ — Automated workflows (if any)

---

📚 Lessons Overview

Lesson	Original Name	Web View	Description	Languages	Status
1	Homework-1	lesson 1	Persian Registration Page Simple registration form with proper structure and Persian text.	HTML, CSS	✅ Done
2	Homework-2	lesson 2	Sample Website Full page with header, footer, search bar, language selector, and description blocks.	HTML, CSS	✅ Done
3	Homework-3	lesson 3	Login + Shopping Cart Login/Registration + product selection with total price calculation and responsive design.	HTML, CSS, JavaScript	✅ Done
4	Homework-4	lesson 4	Design Recreation Pixel-perfect implementation based on a reference image.	HTML, CSS	✅ Done
5	Homework-5	lesson 5	About Page Simple introduction/landing page with sections, images, and contact info.	HTML, CSS	✅ Done
6	Homework-6	lesson 6	Contact Form Clean contact form with input validation practice.	HTML, CSS	✅ Done

---

🛠 Technologies Used

• HTML5 — Semantic markup
• CSS3 — Flexbox, Grid, Responsive Design, Animations
• Vanilla JavaScript — DOM manipulation, form handling, calculations
• Persian (Farsi) — Most projects include right-to-left (RTL) support

---

🚀 How to Run / View Projects

1. Clone the repository:

   git clone https://github.com/Sobhan-SRZA/html-css-js-homeworks.git

2. Navigate to any lesson:

   cd lesson\ 3

3. Open the index.html file in your browser (recommended: Chrome / Firefox).

Tip: Use Live Server extension in VS Code for best experience.

---

📊 Repository Stats (as of last update)

• Owner: Sobhan-SRZA
• Total Projects: 6
• Stars: Growing ⭐
• Public: Yes

---

🎯 Key Learnings & Features Practiced

• Responsive Design (Mobile-First approach)
• Form Validation (Client-side)
• RTL Support for Persian language
• CSS Layouts (Flexbox & Grid)
• JavaScript Interactions (Dynamic price calculation, form handling)
• Clean Code & File Organization
• UI/UX Basics

---

🤝 Contributing

This is a personal learning repository. However, feel free to:

• Open issues for suggestions
• Submit pull requests for improvements
• Star the repo if you find it helpful! ⭐

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

📬 Contact

Sobhan-SRZA
GitHub: @Sobhan-SRZA

---

Made with ❤️ for learning and practice.