3-terrarium/1-intro-to-html/assignment.md
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:
Create a visual mockup of your blog homepage that includes:
Mockup Creation Options:
Label your mockup sections with the HTML elements you plan to use (e.g., "Header - <header>", "Blog Posts - <article>").
Create a list mapping each section of your mockup to specific HTML elements:
Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>
Required Elements to Include: Your HTML must contain at least 10 different semantic elements from this list:
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer><h1>, <h2>, <h3>, <p>, <ul>, <li>, <a><time>, <blockquote>, <strong>, <em>Code your blog homepage following these standards:
Sample HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Blog</title>
</head>
<body>
<!-- Main site header -->
<header>
<h1>My Blog Title</h1>
<nav>
<!-- Navigation menu -->
</nav>
</header>
<!-- Main content area -->
<main>
<!-- Blog posts go here -->
</main>
<!-- Sidebar content -->
<aside>
<!-- Additional information -->
</aside>
<!-- Site footer -->
<footer>
<!-- Footer content -->
</footer>
</body>
</html>
Write a brief reflection (3-5 sentences) addressing:
Before submitting, ensure you have:
| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|---|---|---|---|---|
| Planning & Design | Detailed, well-labeled mockup showing clear understanding of layout and HTML semantic structure | Clear mockup with most sections labeled appropriately | Basic mockup with some labeling, shows general understanding | Minimal or unclear mockup, lacks proper section identification |
| Semantic HTML Usage | Uses 10+ semantic elements appropriately, demonstrates deep understanding of HTML structure and accessibility | Uses 8-9 semantic elements correctly, shows good understanding of semantic markup | Uses 6-7 semantic elements, some confusion about appropriate usage | Uses fewer than 6 elements or misuses semantic elements |
| Code Quality & Organization | Exceptionally well-organized, properly indented code with comprehensive comments and perfect HTML syntax | Well-organized code with good indentation, helpful comments, and valid syntax | Mostly organized code with some comments, minor syntax issues | Poor organization, minimal comments, multiple syntax errors |
| Accessibility & Best Practices | Excellent accessibility considerations, meaningful alt text, proper heading hierarchy, follows all modern HTML best practices | Good accessibility features, appropriate use of headings and alt text, follows most best practices | Some accessibility considerations, basic alt text and heading structure | Limited accessibility features, poor heading structure, doesn't follow best practices |
| Reflection & Learning | Insightful reflection demonstrating deep understanding of HTML concepts and thoughtful analysis of the learning process | Good reflection showing understanding of key concepts and some self-awareness of learning | Basic reflection with limited insight into HTML concepts or learning process | Minimal or missing reflection, shows little understanding of concepts learned |
Essential References:
Pro Tips for Success:
💡 Remember: This assignment focuses on HTML structure and semantics. Don't worry about visual styling – that's what CSS is for! Your page might look plain, but it should be well-structured and meaningful.