hw_wireframe

Building a Wireframe

Overview

In this assignment, you will build a web design skeleton using HTML/CSS. Your completed work should look just like the image below:

Student Notes

• This exercise will challenge most students unfamiliar with HTML/CSS.
• The process of learning web development is nothing without a serious time investment. While the work may seem strenuous now, you'll find yourself becoming more comfortable with web development as you put more hours into your training.

Instructions

1. Create a new repository in GitHub called HW-Wireframe.
2. Clone this repository to your computer by following the process we went over in class.
3. Navigate to the HW-Wireframe folder you just cloned onto your machine. Then create two files inside this folder: index.html and style.css.
4. Make your initial Git commit and push it to GitHub.
   • git add .
   • git commit -m "<COMMENT>"
   • git push origin main
   • If this process was done correctly, you should see these two files appear in your repository. This will be your initial test to confirm that you're hooked into GitHub.
5. Return to your local copies of index.html and style.css. Using the screenshot at the top of these instructions, recreate the design using HTML/CSS.
   • All of your HTML should be inside of the index.html file.
   • All of your CSS should be inside of the style.css file.
6. When you finish the assignment, commit your changes with Git and push them into your GitHub repo. Remember:
   • git add .
   • git commit -m "<COMMENT>"
   • git push origin main

Additional Specifications

1. Your HTML should have each of the following sections:
   • Header
   • Nav
   • Aside (With a Heading)
   • Section (With a Heading)
   • Article (With a Heading) contained within the Section
   • Headers contained within the Article
   • Paragraph contained within the Article
2. Your CSS should have styles for each of the following elements:
   • Body
     • font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
     • color: '#777'
     • background: '#777'
     • width: '960px'
     • font-size: '18px'
   • Header, Nav, Section, Aside, and Footer
     • background: '#ebebeb'
   • Article
     • color: '#ebebeb',
     • background: '#777'
   • h1 and p
     • color: '#777',
     • background: '#ebebeb'
3. The widths of each section should be:
   • section: 495px

Helpful Hints

• For a refresher on working with Git and GitHub, consult the GitHub Supplemental Guide we sent you in class.
• Don't forget to review these concepts: float, padding, margin, display, overflow, clear and text-align.
• This will be a tough assignment. But 23 weeks from now, you'll look back to this exercise and realize just how much you've grown as a developer. Stay positive!

Minimum Requirements

Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed.

One More Thing

If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs.