6.9 KiB

Raw 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. 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:

Practice planning website layouts before coding
Apply semantic HTML elements appropriately
Create accessible, well-structured markup
Develop professional coding habits with comments and organization

Project Requirements

Part 1: Design Planning (Visual Mockup)

Create a visual mockup of your blog homepage that includes:

Header with site title and navigation
Main content area with at least 2-3 blog post previews
Sidebar with additional information (about section, recent posts, categories)
Footer with contact information or links

Mockup Creation Options:

Hand-drawn sketch: Use paper and pencil, then photograph or scan your design
Digital tools: Figma, Adobe XD, Canva, PowerPoint, or any drawing application
Wireframe tools: Balsamiq, MockFlow, or similar wireframing software

Label your mockup sections with the HTML elements you plan to use (e.g., "Header - <header>", "Blog Posts - <article>").

Part 2: HTML Element Planning

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>
<img>, <time>, <blockquote>, <strong>, <em>

Part 3: HTML Implementation

Code your blog homepage following these standards:

Document Structure: Include proper DOCTYPE, html, head, and body elements
Semantic Markup: Use HTML elements for their intended purpose
Accessibility: Include proper alt text for images and meaningful link text
Code Quality: Use consistent indentation and meaningful comments
Content: Include realistic blog content (you can 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 a brief reflection (3-5 sentences) addressing:

Which HTML elements were you most confident using?
What challenges did you encounter while planning or coding?
How did semantic HTML help organize your content?
What would you do differently in your next HTML project?

Submission Checklist

Before submitting, ensure you have:

Visual mockup with labeled HTML elements
Complete HTML file with proper document structure
At least 10 different semantic HTML elements used appropriately
Meaningful comments explaining your code structure
Valid HTML syntax (test in a browser)
Written reflection addressing the prompt questions

Assessment Rubric

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

Learning Resources

Essential References:

MDN HTML Elements Reference - Complete guide to all HTML elements
HTML5 Semantic Elements - Understanding semantic markup
Web Accessibility Guidelines - Creating accessible web content
HTML Validator - Check your HTML syntax

Pro Tips for Success:

Start with your mockup before writing any code
Use the browser's developer tools to inspect your HTML structure
Test your page with different screen sizes (even without CSS)
Read your HTML aloud to check if the structure makes logical sense
Consider how a screen reader would interpret your page structure

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

6.9 KiB Raw Blame History Unescape Escape