Skip to main content
Dan Rodney/2 min read

Challenge: Building a Site from a Provided Design

Build a Web Page

1

Mark Up Structure

Semantic HTML first — header, nav, main, footer.

2

Style Layout

Flexbox for one-dimensional, Grid for two-dimensional layouts.

3

Style Components

Buttons, cards, forms — reusable design system pieces.

4

Responsive Tweaks

Media queries for tablet and mobile breakpoints.

Master HTML & CSS at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches HTML, CSS, and JavaScript — the complete front-end foundation.

Explore our HTML & CSS tutorial where you'll learn to code a small website and apply your newly acquired skills through practical exercises.

Topics Covered in This HTML & CSS Tutorial:

Code a Small Website Using Provided Designs & Assets

Exercise Preview

naps preview

Exercise Overview

It’s important to practice your newly learned coding skills, so in this exercise we challenge you to build a small website without step-by-step instructions.

Getting to Know the Project

The site we challenge you to code is for NAPS (National Association to Promote Siestas). In the Web Dev Class folder, you’ll find a NAPS folder with the following:

  • images: In this folder you’ll find hi-res (Retina) quality photos and the NAPS logo. These have been optimized and are ready for use in the website.
  • page-designs-psd: In this folder you’ll find an editable Photoshop file for each of the four pages of the site.
  • page-designs-jpg: In case you don’t have Photoshop, in this folder you’ll find a JPEG file for each of the four pages of the site.
  • text: In this folder you’ll find the text for each page, and the copyright.

Getting Started

We suggest you build the homepage first, and then move on to the other pages.

If you have Photoshop, open the Photoshop page design files (.psd). Inspect the various elements to learn type size, colors, etc.

If you don’t have Photoshop, refer to the JPEG designs instead. Because you can’t inspect the various elements to learn about them, below we’ve included some of the specifications we use in the provided designs.

  • Google Font: Lato
  • Blue for the Navigation and Headings: #00b0dc
  • Darker Blue for the Navigation’s Bottom Border: #009bc2
  • Headings (h1): Lato Bold, 34px size, 41px line-height
  • Sub-Headings (h2): Lato Bold, 28px size, 34px line-height
  • Paragraphs: Lato Regular, 17px size, 29px line-height
  • Large Paragraphs: Lato Light, 24px size, 36px line-height