|
|
# HTML Practice Assignment: Build a Blog Mockup
|
|
|
|
|
|
## Learning Objectives
|
|
|
|
|
|
Apply your HTML knowledge by designing and coding a complete blog homepage structure. Dis hand-on assignment go help you sabi semantic HTML concepts, accessibility best practices, and professional code organization skills wey you go dey use throughout your web development journey.
|
|
|
|
|
|
**By completing dis assignment, you go:**
|
|
|
- Practice how to plan website layouts before you start coding
|
|
|
- Use semantic HTML elements well well
|
|
|
- Create accessible, well-structured markup
|
|
|
- Develop professional coding habits with comments and organization
|
|
|
|
|
|
## Project Requirements
|
|
|
|
|
|
### Part 1: Design Planning (Visual Mockup)
|
|
|
|
|
|
**Create visual mockup of your blog homepage wey get:**
|
|
|
- Header with site title and navigation
|
|
|
- Main content area with at least 2-3 blog post previews
|
|
|
- Sidebar with extra information (about section, recent posts, categories)
|
|
|
- Footer with contact information or links
|
|
|
|
|
|
**Mockup Creation Options:**
|
|
|
- **Hand-drawn sketch**: Use paper and pencil, then take picture or scan your design
|
|
|
- **Digital tools**: Figma, Adobe XD, Canva, PowerPoint, or any drawing app
|
|
|
- **Wireframe tools**: Balsamiq, MockFlow, or any like that wireframing software
|
|
|
|
|
|
**Label your mockup sections** with the HTML elements wey you plan to use (e.g., "Header - `<header>`", "Blog Posts - `<article>`").
|
|
|
|
|
|
### Part 2: HTML Element Planning
|
|
|
|
|
|
**Make list wey go map each section of your mockup to the 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 get at least 10 different semantic elements from dis list:
|
|
|
- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
|
|
|
- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
|
|
|
- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`
|
|
|
|
|
|
### Part 3: HTML Implementation
|
|
|
|
|
|
**Code your blog homepage based on these standards:**
|
|
|
|
|
|
1. **Document Structure**: Include correct DOCTYPE, html, head, and body elements
|
|
|
2. **Semantic Markup**: Use HTML elements for wetin dem suppose represent
|
|
|
3. **Accessibility**: Put correct alt text for images and meaningful link text
|
|
|
4. **Code Quality**: Use consistent indentation and meaningful comments
|
|
|
5. **Content**: Include real blog content (you fit use placeholder text)
|
|
|
|
|
|
**Sample HTML Structure:**
|
|
|
```html
|
|
|
<!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>
|
|
|
```
|
|
|
|
|
|
### Part 4: Reflection
|
|
|
|
|
|
**Write small reflection (3-5 sentences) wey go talk about:**
|
|
|
- Which HTML elements you dey most confident to use?
|
|
|
- Which challenges you face during the planning or coding?
|
|
|
- How semantic HTML take help organize your content?
|
|
|
- Wetin you go do different for your next HTML project?
|
|
|
|
|
|
## Submission Checklist
|
|
|
|
|
|
**Before you submit, check say you get:**
|
|
|
- [ ] Visual mockup wey get labeled HTML elements
|
|
|
- [ ] Complete HTML file with correct document structure
|
|
|
- [ ] At least 10 different semantic HTML elements wey you use well
|
|
|
- [ ] Meaningful comments wey explain your code structure
|
|
|
- [ ] Valid HTML syntax (test am for browser)
|
|
|
- [ ] Written reflection wey answer the prompt questions
|
|
|
|
|
|
## Assessment Rubric
|
|
|
|
|
|
| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|
|
|
|----------|---------------|----------------|----------------|---------------|
|
|
|
| **Planning & Design** | Detailed, well-labeled mockup wey clear show how you sabi layout and HTML semantic structure | Clear mockup wey most sections labeled correct | Basic mockup with some labeling, show say you get general understanding | Minimal or unclear mockup, no proper section identification |
|
|
|
| **Semantic HTML Usage** | Use 10+ semantic elements well, show deep understanding of HTML structure and accessibility | Use 8-9 semantic elements correct, show good understanding of semantic markup | Use 6-7 semantic elements, small confusion about correct use | Use less than 6 elements or misuse semantic elements |
|
|
|
| **Code Quality & Organization** | Exceptionally well-organized, properly indented code with detailed comments and perfect HTML syntax | Well-organized code with good indentation, helpful comments, and valid syntax | Mostly organized code with some comments, small syntax problems | Poor organization, few comments, many syntax errors |
|
|
|
| **Accessibility & Best Practices** | Excellent accessibility, meaningful alt text, proper heading order, follow all modern HTML best practices | Good accessibility features, proper use of headings and alt text, follow most good practices | Some accessibility consideration, basic alt text and heading structure | Limited accessibility, poor heading structure, no follow best practices |
|
|
|
| **Reflection & Learning** | Insightful reflection wey show deep understanding of HTML concepts and thoughtful learning analysis | Good reflection wey show understanding of key concepts and some self-awareness | Basic reflection with small insight on HTML concepts or learning | Minimal or no reflection, no show understanding of concepts learned |
|
|
|
|
|
|
## Learning Resources
|
|
|
|
|
|
**Essential References:**
|
|
|
- [MDN HTML Elements Reference](https://developer.mozilla.org/docs/Web/HTML/Element) - Complete guide to all HTML elements
|
|
|
- [HTML5 Semantic Elements](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - Understand semantic markup
|
|
|
- [Web Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - How to create accessible web content
|
|
|
- [HTML Validator](https://validator.w3.org/) - Check your HTML syntax
|
|
|
|
|
|
**Pro Tips for Success:**
|
|
|
- Start with your mockup before you begin any coding
|
|
|
- Use browser developer tools to check your HTML structure
|
|
|
- Test your page for different screen sizes (even if you no get CSS)
|
|
|
- Read your HTML aloud to see if the structure make sense
|
|
|
- Think about how screen reader go take interpret your page structure
|
|
|
|
|
|
> 💡 **Remember**: This assignment na about HTML structure and semantics. No worry about visual styling – na wetin CSS dey do! Your page fit look simple, but e suppose well-structured and get meaning.
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**Disclaimer**:
|
|
|
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we dey try make e correct, e good make you sabi say automated translation fit get some mistakes or errors. The original document wey e dey for im original language na im suppose be the correct one. If na important information, e better make professional human translator do am. We no go responsible for any wahala or wrong meaning wey fit come from how dis translation take be.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
