WDD 130: Web Fundamentals

Working with Wireframes

Overview

Wireframes are valuable tools in web design. They help visualize what should be on a page and where each piece of content should be in relation to others. The goal is for you to be able to read a wireframe and develop that wireframe into a valid HTML structure.

Prepare

Activity Instructions

For this activity, please give your best effort, but do not worry about getting it completely accurate or finished. Do not spend more than 30 minutes on this activity. Use the video demonstration below for additional ideas.

  1. Create an HTML file named "wireframe.html" in your week03 folder.
  2. Add the basic html document and head HTML elements.
    The Development Standards checklist can be used as a reference to help you with this content.

    Check Your Understanding Your HTML document should have a DOCTYPE, html (with lang attribute), head, and body element. In the head element, you should have a meta element with the charset attribute set to utf-8, a meta element with the viewport, and a title element.

  3. Using this wireframe design, build the structure (the HTML only) of the page in your wireframe.html document.
    • Start with the three (3) children of the body.
      • header
      • main
      • footer
    • Place an img and nav element inside of the header. The nav element should have four (4) a anchor tag elements that have placeholder content and references for the links.
      Check Your Understanding 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wireframe Practice</title>
  </head>
  <body>
    <header>
      <img src="" alt="">
      <nav>
        <a href="#">Home</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
      </nav>
    </header>
    <main>
    </main>
    <footer>
    </footer>
  </body>
</html>
    • Do your best to determine the elements that might be the best fit for the rest of the content on the page. Refer to the video below for comparison and additional ideas.

Video Demonstration: ▶️ Wireframe to HTML Example

Submission

  1. Commit and push your work to your GitHub Pages course repository. See your published page here: 
    https://githubusername.github.io/wdd130/week03/wireframe.html
  2. Return to I-Learn to report on your work.