Challenge: Building a Site from a Provided Design

Gain real-world coding experience through an exercise that challenges you to build a small website for NAPS (National Association to Promote Siestas) using provided designs and assets. This exercise is ideal for those looking to practice their HTML and CSS skills towards a career in web development.

Key Insights

This tutorial provides practical experience building a small website using HTML and CSS.
The tutorial involves coding for the NAPS (National Association to Promote Siestas) website using provided designs and assets.
The exercise is self-guided, encouraging the user to code without step-by-step instructions.
Assets provided include high-resolution photos, the NAPS logo, editable Photoshop files for each page, and JPEG files for those without Photoshop.
The tutorial recommends starting with the homepage before proceeding to other pages.
Specifications for elements such as font, colors, and heading sizes are provided for those referencing JPEG designs instead of Photoshop files.

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

This exercise is excerpted from Noble Desktop’s past front-end web development training materials and is compatible with updates through 2022. To learn current skills in web development, check out our coding bootcamps in NYC and live online.

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.

Front End Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

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

Dan Rodney

Dan Rodney has been a designer and web developer for over 20 years. He creates coursework for Noble Desktop and teaches classes. In his spare time Dan also writes scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more). Dan teaches just about anything web, video, or print related: HTML, CSS, JavaScript, Figma, Adobe XD, After Effects, Premiere Pro, Photoshop, Illustrator, InDesign, and more.