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