# HTML Practice Assignment: Build a Blog Mockup
## Learning Objectives
Apply your HTML knowledge by designing and coding a complete blog homepage structure. This hands-on assignment will reinforce semantic HTML concepts, accessibility best practices, and professional code organization skills that you'll use throughout your web development journey.
**By completing this assignment, you will:**
- Practice planning website layouts before coding
- Apply semantic HTML elements appropriately
- Create accessible, well-structured markup
- Develop professional coding habits with comments and organization
## Project Requirements
### Part 1: Design Planning (Visual Mockup)
**Create a visual mockup of your blog homepage that includes:**
- Header with site title and navigation
- Main content area with at least 2-3 blog post previews
- Sidebar with additional information (about section, recent posts, categories)
- Footer with contact information or links
**Mockup Creation Options:**
- **Hand-drawn sketch**: Use paper and pencil, then photograph or scan your design
- **Digital tools**: Figma, Adobe XD, Canva, PowerPoint, or any drawing application
- **Wireframe tools**: Balsamiq, MockFlow, or similar wireframing software
**Label your mockup sections** with the HTML elements you plan to use (e.g., "Header - ``", "Blog Posts - ``").
### Part 2: HTML Element Planning
**Create a list mapping each section of your mockup to specific HTML elements:**
```
Example:
- Site Header →
- Main Navigation →