Skip to content

wdi-atx-12/mockup-html-css-lab

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

  • 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.

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: travel blog

Hungry for More?

Here are some additional exercises to practice on your own!

Beginner

Intermediate

Advanced

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 77.8%
  • CSS 22.2%