https://github.com/mena-erian/bakery

first project with css
https://github.com/mena-erian/bakery

css display float hover-effects html position pseudoelements spacing

Last synced: 4 months ago
JSON representation

first project with css

• Host: GitHub
• URL: https://github.com/mena-erian/bakery
• Owner: Mena-Erian
• Created: 2025-02-26T20:08:49.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-03-16T13:27:39.000Z (about 1 year ago)
• Last Synced: 2025-06-27T20:39:33.477Z (12 months ago)
• Topics: css, display, float, hover-effects, html, position, pseudoelements, spacing
• Language: HTML
• Homepage: https://mena-erian.github.io/Bakery/
• Size: 607 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🍞 Bakery  

This project was created during my early CSS learning phase. Although I now have a solid understanding of CSS, including `d-flex`, `grid`, and advanced styling techniques, I am keeping this repository as a **record of my learning journey** and for my **CV**.  

🔗 **Live Demo:** [Bakery Website](https://mena-erian.github.io/Bakery/index.html)  

## 🎓 What I Learned in This Project  

### **HTML Fundamentals**  

- Structuring content with **`div`** and **`span`**.  

- Embedding and working with **images** effectively.  

- Integrating a **Google Map** into the website.  

### **CSS Selectors & Styling**  

- **Element selectors** (e.g., `h1`, `p`).  

- **Class (`.class-name`)** and **ID (`#id-name`)** selectors.  

- **Descendant and child selectors** for better styling control.  

- Using **pseudo-elements (`::before`, `::after`)** for additional styling.  

### **CSS Layout & Positioning**  

- Understanding **display properties**:  

  - `inline`, `block`, `inline-block`.  

- Layout structuring with **float and clear** (before learning `flexbox`).  

- **Positioning elements** using:  

  - `static` (default positioning).  

  - `relative`, `absolute`, and `sticky` for flexible placement.  

- **z-index & stacking context**:  

  - Controlling element layering with `z-index`, especially when using `position: absolute` or `relative`.  

### **Box Model & Spacing**  

- Managing layout using **margin, padding, and borders**.  

- Controlling **overflow** to manage content visibility.  

### **Interactive & Visual Enhancements**  

- Adding **hover effects** for better user interaction.  

- Styling with **fonts, font families, and color systems**.  

🚀 **Now, I have advanced my CSS skills** and can work with:  

✅ `display flex` and `display grid` for modern, responsive layouts.  

✅ CSS animations and transitions.  

✅ Fully responsive design techniques and Other.  

## 🚀 Features  

- Fully styled with **pure CSS** (no frameworks).  

- Embedded **Google Map** for location display.  

- Clean and structured **layout** with proper spacing.  

## 🛠 Installation  

1. Clone the repository:  

   ```bash

   git clone https://github.com/Mena-Erian/Bakery.git