📌 CSS Box Model Cheat Sheet

📖 1. Project Overview

This project is a CSS Box Model Cheat Sheet, built as part of the Codecademy Front-End Career Path.
It was created to practice core HTML and CSS concepts while building a clear and visually structured reference page.

The cheat sheet explains:

The four layers of the CSS box model
The main CSS properties that affect layout and sizing
A visual representation of the box model

The focus of this project was learning by doing, improving code structure, and applying basic design principles.

🔗 2. Live Demo & Repository

🌐 Live Demo (GitHub Pages):

GitHub Page: You can view the live version of this project on its dedicated 👉GitHub Page.

📁 Repository

Source Code: Click here to consult 👉the GitHub repository for this project.

🧠 3. What I Practiced

Writing semantic HTML for better structure and readability
Creating and styling tables to present structured information
Using internal navigation links within a page
Applying consistent fonts, spacing, and colors
Working with Git and GitHub for version control
Validating HTML and CSS using W3C validators

📚 4. What I Learned

How the CSS Box Model works in real layouts, not just in theory
The role of properties such as padding, margin, border, and box-sizing
Why CSS transition properties should be defined on the base element
How small visual details (spacing, color contrast, hover effects) improve usability
How to read and fix validation errors in HTML and CSS

🧱 5. HTML Structure

Tables and Semantic Elements

In this project, I practiced using:

Semantic elements like <header>, <nav>, <main>, <section>, and <footer>
Table-related elements such as <table>, <caption>, <thead>, <tbody>, <th>, and <td>
<figure> and <figcaption> for accessible image content

This helped me better understand how HTML structure impacts accessibility and maintainability.

🎨 6. CSS Styling

Design and Interaction

Styling decisions focused on simplicity and clarity:

Avoiding overly saturated colors
Maintaining readable contrast
Creating a custom visual divider using a styled <hr>
Adding smooth hover and active effects using transition and transform

These techniques helped make the page more pleasant to use without overcomplicating the design.

🛠️ 7. Workflow & Tools

Editor: Visual Studio Code
Browser: Chrome DevTools
Terminal: Windows Shell / Git Bash
Version Control: Git & GitHub
Validation Tools:
- W3C HTML Validator
- W3C CSS Validator

This project helped me become more comfortable with a basic front-end development workflow from writing code to validation and deployment.

nfavre82/cheat-sheet-css