7.2 KiB

Raw Permalink Blame History Unescape Escape

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:

Document Structure: Include correct DOCTYPE, html, head, and body elements
Semantic Markup: Use HTML elements for wetin dem suppose represent
Accessibility: Put correct alt text for images and meaningful link text
Code Quality: Use consistent indentation and meaningful comments
Content: Include real blog content (you fit use placeholder text)

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>

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 - Complete guide to all HTML elements
HTML5 Semantic Elements - Understand semantic markup
Web Accessibility Guidelines - How to create accessible web content
HTML Validator - 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.

Disclaimer:
Dis document na AI translation service 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.

7.2 KiB Raw Permalink Blame History Unescape Escape