CSS Grid Layout Exercise

This project is a sample exercise to investigate the use of CSS Grid for creating modern web layouts. The goal is to understand how grid-based design can be used to structure a page with a header and left navigation panel.

Project Structure

• index.html — Main HTML file containing the layout structure.
• styles/reset.css — CSS reset to ensure consistent styling across browsers.
• styles/style.css — Main stylesheet for layout and design using CSS Grid.

Features

• Demonstrates a layout with a header and left navigation using CSS Grid.
• Uses semantic HTML and modular CSS.
• Easy to extend for more complex grid-based designs.

How to Use

1. Open index.html in your browser to view the layout.
2. Edit styles/style.css to experiment with grid properties and layout changes.
3. Use the provided color-coded sections (#orange, #yellow, #green, #blue) to visualize grid areas.

Learning Objectives

• Understand the basics of CSS Grid.
• Practice creating multi-area layouts (header, nav, content, etc.).
• Explore responsive design possibilities with grid.

Customization

Feel free to modify the grid settings in style.css to create different layouts or add new sections.

---

This exercise is intended for educational purposes and experimentation with CSS Grid.