🛒 StudyMart

StudyMart is a front-end web application that simulates an online educational marketplace, where students can explore courses across different programming fields and enroll through a clean, modern interface.

🔗 Live Demo https://eslam-adel25.github.io/StudyMart/

---

📌 Overview

The project focuses on building a real-world UI experience for an e-learning platform. It includes course listings, pricing, categories, and a basic authentication modal for users.

The main goal of this project is to practice structuring scalable front-end projects and improving UI/UX implementation using pure web technologies.

---

✨ Key Features

• 🎯 Interactive course cards with pricing and ratings
• 🧾 Organized categories (Beginner / Intermediate / Advanced)
• 🔐 Authentication modal (Sign up / Login UI)
• 🌙 Dark mode toggle
• 🛒 Cart indicator (UI level)
• 📱 Fully responsive layout across devices
• ⚡ Smooth and clean user experience

---

🧠 What I Practiced

• Structuring a multi-folder front-end project
• Writing clean and reusable CSS
• Handling DOM interactions using Vanilla JavaScript
• Designing responsive layouts without frameworks
• Building UI components from scratch

---

🛠️ Tech Stack

• HTML5 – Semantic structure
• CSS3 – Layout, responsiveness, and styling
• JavaScript (Vanilla JS) – Interactivity and DOM manipulation

---

📂 Project Structure

StudyMart/
│── index.html
│
├── css/
│   └── style.css
│
├── js/
│   └── main.js
│
├── assets/
│   └── ----.html
│
├── images/
│   └── (course thumbnails & UI images)
│
└── books/
    └── (course-related data or content)

---

📸 Screenshots

🖥️ Main Interface

---

---

🌐 Deployment

This project is deployed using GitHub Pages and is publicly accessible through the link above.

---

🚧 Limitations

• No backend (UI-only project)
• Authentication is not functional (design only)
• Cart system is not connected to real data

---

📌 Future Improvements

• Connect to backend (Node.js / Firebase)
• Implement real authentication system
• Add course filtering & search
• Improve accessibility (ARIA, keyboard navigation)

---

👨‍💻 Author

Eslam Adel

• -Frontend Developer (in progress) GitHub:
• -GitHub: https://github.com/eslam-adel25

---

⭐ Feedback

If you have any suggestions or feedback, feel free to open an issue or reach out.

If you found this project useful, consider giving it a ⭐