You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.9 KiB
3.9 KiB
HTML Practice Assignment: Build a Blog Mockup
Objective
Create and hand-code the HTML structure for a personal blog homepage. This task will help you practice using semantic HTML, planning layouts, and organizing your code.
Instructions
-
Design Your Blog Mockup
- Draw a visual representation of your blog homepage. Include essential sections like the header, navigation, main content, sidebar, and footer.
- You can sketch it on paper and scan it, or use digital tools (e.g., Figma, Adobe XD, Canva, or even PowerPoint).
-
Identify HTML Elements
- Make a list of the HTML elements you intend to use for each section (e.g.,
<header>,<nav>,<main>,<article>,<aside>,<footer>,<section>,<h1>–<h6>,<p>,<img>,<ul>,<li>,<a>, etc.).
- Make a list of the HTML elements you intend to use for each section (e.g.,
-
Write the HTML Markup
- Hand-code the HTML for your mockup, focusing on semantic structure and best practices.
- Use at least 10 different HTML elements.
- Add comments to explain your choices and structure.
-
Submit Your Work
- Upload your sketch/mockup along with your HTML file.
- Optionally, write a short reflection (2–3 sentences) about your design decisions.
Rubric
| Criteria | Outstanding | Satisfactory | Needs Improvement |
|---|---|---|---|
| Visual Mockup | Detailed and clear mockup with labeled sections and a thoughtful layout | Basic mockup with some labeled sections | Incomplete or unclear mockup; missing section labels |
| HTML Elements | Includes 10+ semantic HTML elements; shows understanding of structure and best practices | Includes 5–9 HTML elements; some semantic structure | Includes fewer than 5 elements; lacks semantic structure |
| Code Quality | Code is well-organized, readable, and includes comments; adheres to HTML standards | Code is mostly organized; few comments | Code is disorganized; lacks comments |
| Reflection | Provides meaningful insights into design choices and challenges | Offers a basic reflection | No reflection or lacks relevance |
Tips
- Use semantic HTML tags to improve accessibility and SEO.
- Organize your code with proper indentation and comments.
- Refer to MDN HTML Elements Reference for guidance.
- Consider how your layout could be expanded or styled in future assignments.
Disclaimer:
This document has been translated using the AI translation service Co-op Translator. While we aim for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.