# HTML Practice Assignment: Build a Blog Mockup

## Objective

Design and hand-code the HTML structure for a personal blog homepage. This exercise will help you practice semantic HTML, layout planning, and code organization.

## Instructions

1. **Design Your Blog Mockup**
   - Sketch a visual mockup of your blog homepage. Include key sections such as header, navigation, main content, sidebar, and footer.
   - You may use paper and scan your sketch, or use digital tools (e.g., Figma, Adobe XD, Canva, or even PowerPoint).

2. **Identify HTML Elements**
   - List the HTML elements you plan to use for each section (e.g., `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, etc.).

3. **Write the HTML Markup**
   - Hand-code the HTML for your mockup. Focus on semantic structure and best practices.
   - Include at least 10 distinct HTML elements.
   - Add comments to explain your choices and structure.

4. **Submit Your Work**
   - Upload your sketch/mockup and your HTML file.
   - Optionally, provide a brief reflection (2–3 sentences) on your design decisions.

## Rubric

| Criteria         | Exemplary                                                                                   | Adequate                                                                         | Needs Improvement                                                               |
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| Visual Mockup    | Clear, detailed mockup with labeled sections and thoughtful layout                         | Basic mockup with some labeled sections                                          | Minimal or unclear mockup; lacks section labels                                 |
| HTML Elements    | Uses 10+ semantic HTML elements; demonstrates understanding of structure and best practices | Uses 5–9 HTML elements; some semantic structure                                  | Uses fewer than 5 elements; lacks semantic structure                            |
| Code Quality     | Well-organized, readable code with comments; follows HTML standards                        | Mostly organized code; few comments                                              | Disorganized code; lacks comments                                               |
| Reflection       | Insightful reflection on design choices and challenges                                     | Basic reflection                                                                 | No reflection or lacks relevance                                                |

## Tips

- Use semantic HTML tags for better accessibility and SEO.
- Organize your code with indentation and comments.
- Refer to [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) for guidance.
- Think about how your layout could be extended or styled in future assignments.