mockup-html-css

Lab: From Mockup to HTML/CSS

Learning Objectives

Use CSS to style a web page according to a mockup.

Introduction

Working from a mockup will be part of your daily routine as a web developer. Mockups and specs — details about white space, size, color, and more — can vary depending on your designer. It’s important to be incredibly detail-oriented when following a mockup, so be sure to communicate with your designer to clarify your needs. It may take time before you agree on the best way to share materials.

Exercise

Using the provided HTML, add the CSS necessary to make the page resemble the mockup below.

Requirements

• Fork and clone this repository
• Complete lab according to directions below
• Use git to add, commit, and push your solution
• Make sure to make a pull request to alert your instructors of your completed code
• Turn this in EVEN IF YOU DO NOT FINISH IT

Also note!

• You will not need to make any edits to the HTML.
• Don’t leave anything on the page unstyled — even if your CSS isn’t perfect.
• Also, in case you missed it above… TURN IN THIS ASSIGNMENT EVEN IF YOU DO NOT FINISH IT
  • Your first commit and pull request is due prior to 9am on the day it is due!
  • You can always make subsequent changes/commits later after we review the assignment! But the first commit needs to have a timestamp before 9am!

BONUS

• Add hover effects to the nav.
• Imagine how you might use the border property to eliminate the need for the | characters in the nav.

Starter Code

This starter code contains all the HTML you need to complete this lab.

Deliverable

The final design for the blog: