🎨 ALX HTML & CSS Learning Journey

A comprehensive collection of HTML & CSS projects showcasing progressive web development skills

View Live Demo • Features • Getting Started • Projects

---

📋 Table of Contents

• About
• Projects
• Features
• Technologies Used
• Project Structure
• Getting Started
• Live Demo
• Learning Objectives
• Author

---

🚀 About

This repository contains a collection of HTML and CSS projects developed as part of the ALX Software Engineering Program. Each project demonstrates progressive learning in web development fundamentals, from basic HTML structure to advanced CSS layouts and responsive design.

The projects showcase:

• ✨ Semantic HTML5 structure and best practices
• 🎨 Modern CSS3 styling techniques
• 📱 Responsive design with Flexbox
• 🌐 Cross-browser compatibility
• ♿ Accessibility considerations

---

📁 Projects

🔰 CSS Basic

Foundation Project: Building responsive layouts with HTML5 and CSS3

📂 Location: /css_basic/

🎯 Objectives:

• Master HTML5 semantic elements
• Implement CSS Flexbox layouts
• Create responsive designs
• Apply typography and styling fundamentals

✨ Features:

• Responsive Portfolio Website with mobile-first approach
• Flexbox Layout: 2/3 article, 1/3 sidebar layout
• Custom Typography: Google Fonts integration (Yeseva One, Josefin Sans)
• Mobile Optimization: works_on_smartphone class for mobile degradation
• Interactive Elements: Navigation with hover effects
• Data Tables: Team member information display

📱 Pages:

• index.html - Portfolio homepage with team data table
• tweets.html - Social media timeline simulation

🚀 CSS Advanced

Advanced Project: Professional website implementation

📂 Location: /css_advanced/

🎯 Objectives:

• Build complex, multi-section websites
• Implement advanced CSS patterns
• Create interactive user interfaces
• Practice real-world development scenarios

✨ Features:

• Professional Landing Page with multiple sections
• Educational Platform Theme: "Get Schooled" smile tutorial website
• Font Awesome Integration: Social media icons and UI elements
• Multi-section Layout: Hero, testimonials, tutorials, FAQ, membership
• Interactive Components: Star ratings, tutorial cards, FAQ sections

---

⚡ Features

🎨 Design & User Experience

• Clean, Modern Interface with professional styling
• Consistent Branding with custom logo and color scheme
• Smooth Animations and hover effects
• User-Friendly Navigation with clear structure

📱 Responsive Design

• Mobile-First Approach ensuring optimal mobile experience
• Flexible Layouts that adapt to all screen sizes
• Cross-Device Testing for consistent performance
• Accessibility Features for inclusive design

🛠️ Technical Implementation

• Semantic HTML5 for better SEO and accessibility
• CSS3 Flexbox for robust layout systems
• CSS Reset for cross-browser consistency
• Custom Properties for maintainable styling

---

🏗️ Project Structure

alx_html_css/
├── 📁 css_basic/              # Foundation CSS project
│   ├── 🎨 base.css           # CSS reset and base styles
│   ├── ✨ styles.css         # Custom styling and flexbox layout
│   ├── 🏠 index.html         # Portfolio homepage
│   └── 🐦 tweets.html        # Social timeline page
├── 📁 css_advanced/          # Advanced CSS project
│   └── 🌟 index.html         # Professional landing page
├── 📁 images/                # Project assets and media files
│   ├── 🖼️ logo.png           # Brand logo
│   ├── 😊 smile.png          # UI icons
│   └── 📸 *.png              # Additional images
├── ⚙️  .vscode/              # VS Code workspace settings
└── 📖 README.md              # Project documentation

---

Installation & Setup

1. Clone the repository

   git clone https://github.com/ZeeAzeez/alx_html_css.git
   cd alx_html_css

2. Open with VS Code

   code .

3. Start Live Server

   • Right-click on any HTML file
   • Select "Open with Live Server"
   • Or use the Command Palette: Ctrl+Shift+P → "Live Server: Open"

4. View Projects

   • CSS Basic: http://localhost:5500/css_basic/index.html
   • CSS Advanced: http://localhost:5500/css_advanced/index.html

---

🌐 Live Demo

Coming Soon: Live deployment links will be added here

• 🔰 CSS Basic Project: View Live Demo
• 🚀 CSS Advanced Project: View Live Demo

---

📚 HTML Fundamentals

• Understanding HTML5 semantic elements
• Proper document structure and hierarchy
• Form elements and accessibility
• Meta tags and SEO optimization

🎨 CSS Mastery

• CSS selectors and specificity
• Box model and layout principles
• Flexbox for responsive layouts
• Typography and color theory
• CSS animations and transitions

📱 Responsive Design

• Mobile-first development approach
• Media queries and breakpoints
• Flexible grid systems
• Cross-device compatibility

🛠️ Best Practices

• Code organization and structure
• Performance optimization
• Accessibility standards (WCAG)
• Cross-browser compatibility

---

📊 Project Stats

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📝 License

This project is part of the ALX Software Engineering Program curriculum and is intended for educational purposes.

---

👨‍💻 Author

Azeezah Azeez ⭐

ALX Software Engineering Student | Frontend Developer | Web Development Enthusiast