msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'bd59ac96fd'
${ noResults }
Web-Dev-For-Beginners/3-terrarium/1-intro-to-html/assignment.md

3.1 KiB
Raw Blame History Escape

HTML Practice Assignment: Build a Blog Mockup

Objective

Design and hand-code the HTML structure for a personal blog homepage. This exercise will help you practice semantic HTML, layout planning, and code organization.

Instructions

  1. Design Your Blog Mockup

    • Sketch a visual mockup of your blog homepage. Include key sections such as header, navigation, main content, sidebar, and footer.
    • You may use paper and scan your sketch, or use digital tools (e.g., Figma, Adobe XD, Canva, or even PowerPoint).

  2. Identify HTML Elements

    • List the HTML elements you plan to use for each section (e.g., <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a>, etc.).

  3. Write the HTML Markup

    • Hand-code the HTML for your mockup. Focus on semantic structure and best practices.
    • Include at least 10 distinct HTML elements.
    • Add comments to explain your choices and structure.

  4. Submit Your Work

    • Upload your sketch/mockup and your HTML file.
    • Optionally, provide a brief reflection (2–3 sentences) on your design decisions.

Rubric

Criteria Exemplary Adequate Needs Improvement
Visual Mockup Clear, detailed mockup with labeled sections and thoughtful layout Basic mockup with some labeled sections Minimal or unclear mockup; lacks section labels
HTML Elements Uses 10+ semantic HTML elements; demonstrates understanding of structure and best practices Uses 5–9 HTML elements; some semantic structure Uses fewer than 5 elements; lacks semantic structure
Code Quality Well-organized, readable code with comments; follows HTML standards Mostly organized code; few comments Disorganized code; lacks comments
Reflection Insightful reflection on design choices and challenges Basic reflection No reflection or lacks relevance

Tips

  • Use semantic HTML tags for better accessibility and SEO.
  • Organize your code with indentation and comments.
  • Refer to MDN HTML Elements Reference for guidance.
  • Think about how your layout could be extended or styled in future assignments.