Skip to content

Latest commit

 

History

History
89 lines (65 loc) · 3.03 KB

README.md

File metadata and controls

89 lines (65 loc) · 3.03 KB

🧩 Simple Frontend Projects Collection

This repository contains a collection of my beginner-to-intermediate level web projects built using HTML, CSS, and JavaScript. Each project focuses on practicing different frontend skills such as layout, UI components, user interaction, and logic.

📁 Projects Overview

🔹 1. Simple Clothes Interface

A clean clothing store layout built with HTML & CSS.

  • Product grid
  • Hover effects
  • Responsive design

🔹 2. CSS Float Challenge

Practice layout using traditional CSS float and clear.

  • Side-by-side layout
  • Pre-Flexbox era technique

🔹 3. Static Dashboard

A basic admin dashboard layout using HTML & CSS.

  • Cards, charts placeholders
  • Clean responsive design

🔹 4. Ragab Mohammed Portfolio

A personal portfolio built for Ragab Mohammed.

  • About, Projects, Contact sections

🔹 5. My Personal Website

My personal landing page as a web developer.

  • Hero, skills, and contact form
  • Built using only HTML + CSS

🔹 6. First Web Project

My very first practice project using raw HTML & CSS.

  • Basic layout, links, and structure

🧮 JavaScript Interactive Projects

🟡 7. Simple Age Calculator

Enter your birthdate and get your age in years, months, and days.

  • Built with JavaScript date manipulation

🟡 8. Calculator

A working calculator with basic math operations.

  • Supports +, –, ×, ÷
  • Keyboard support

🟡 9. Weather App

Enter a city name to get current weather.

  • Fetches data from weather API
  • Displays temperature, humidity, and conditions

🟡 10. XO Game (Tic Tac Toe)

Classic XO game with reset and winner detection.

  • Two player game logic
  • Win/draw detection

🟡 11. JS Amazon Clone

A simple UI clone of the Amazon homepage using HTML, CSS & JS.

  • Product cards
  • Search bar UI
  • Responsive layout

🟡 12. JS Online Shopping

A dynamic shopping cart project with login/register logic and localStorage.

  • Add/remove from cart
  • Login/Logout user management
  • Responsive product cards

🛠️ Technologies Used

  • HTML5
  • CSS3 (Flexbox, Grid, Float)
  • JavaScript (DOM, Events, Fetch API)
  • No libraries or frameworks

🚀 How to Run

You can visit the Live Demo links, or clone the repository and open any index.html file:

git clone https://github.com/your-username/simple-projects-html-css.git