📌 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.

---

👩‍💻 8. Author

NF Web Development Studio
© 2026