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 each other. The goal is to be able to read a wireframe and develop that wireframe into a valid HTML structure.

Prepare

Activity Instructions

You do not need to get this activity completely accurate and complete. Just give it a valiant effort but do not spend more than 30 minutes on it. Use the video demonstration below for additional ideas.
  1. Create an HTML file named "wireframe.html"" in your week02 folder.
  2. Add the critical html document and head 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 video below for comparison and some ideas.
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/week02/wireframe.html
  2. Return to I-Learn to report on your work.