Topics Covered in This HTML & CSS Tutorial:
Build a Complete Multi-Page Website Using Professional Design Assets and Real-World Workflow
Exercise Preview
Exercise Overview
Theory without practice is worthless in web development. This hands-on exercise challenges you to synthesize everything you've learned by building a complete website from professional design files—just like you would in a real development environment. No step-by-step hand-holding here; you'll work independently to solve problems and make decisions, building the critical thinking skills that separate professional developers from tutorial followers.
Working without step-by-step instructions mirrors real-world development scenarios where you must interpret designs and make implementation decisions independently.
Getting to Know the Project
Your assignment is to code a complete website for NAPS (National Association to Promote Siestas)—a delightfully quirky project that will keep you engaged while you master essential web development workflows. In the Web Dev Class folder, you'll find a comprehensive NAPS project folder containing everything a professional developer needs:
- images: Production-ready assets including high-resolution photos optimized for modern displays and the official NAPS logo. These files have been professionally processed and compressed for optimal web performance—no additional optimization required.
- page-designs-psd: Editable Photoshop files for all four website pages. These industry-standard design files allow you to inspect layers, extract exact measurements, and copy precise color values—the same workflow used by professional front-end teams worldwide.
- page-designs-jpg: Static reference images for each page, perfect if you're working without Photoshop access. While less flexible than PSDs, these provide clear visual targets for your implementation.
- text: All written content organized by page, plus copyright information. Having content separated from design files mirrors real-world client projects where copy and visuals often come from different sources.
Project Assets Breakdown
NAPS Website Asset Structure
Images Folder
Contains hi-resolution Retina quality photos and the NAPS logo, pre-optimized for web use. Ready for direct implementation in your website.
Design Files
Both PSD and JPEG formats provided for maximum accessibility. Photoshop files allow detailed inspection of design specifications.
Content Package
Complete text content for all four pages plus copyright information. Eliminates content creation so you can focus on coding.
Getting Started
Approach this project strategically by building the homepage first—it typically contains the most complex layouts and sets the visual foundation for your entire site. Once you've established your CSS architecture and component patterns, the remaining pages will come together more efficiently.
If you have Photoshop access, leverage the PSD files fully. Use the eyedropper tool for precise colors, measure spacing with guides, and inspect text properties directly from the design layers. This workflow mirrors how professional developers collaborate with design teams and ensures pixel-perfect implementation.
Working without Photoshop? The JPEG references provide excellent visual guidance, and we've extracted the key specifications you'll need. While you'll need to estimate some measurements, this constraint actually builds valuable skills in visual estimation and CSS problem-solving that serve developers well in fast-paced environments.
- 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
Development Workflow
Start with Homepage
Begin by building the homepage first as it typically contains the core design patterns and components you'll reuse across other pages.
Inspect Design Files
Open PSD files in Photoshop to examine element specifications, or refer to JPEG designs and use the provided style guide below.
Implement Typography System
Set up the Lato font family and establish the heading, paragraph, and navigation styles according to the specifications.
Build Remaining Pages
Apply learned patterns from the homepage to create consistent styling across all four pages of the NAPS website.
Typography Specifications
Navigation and Headings
Primary blue color (#00b0dc) with darker blue (#009bc2) for navigation borders. Creates visual hierarchy and brand consistency.
Heading Styles
H1 uses Lato Bold at 34px with 41px line-height. H2 uses Lato Bold at 28px with 34px line-height for proper scaling.
Body Text System
Regular paragraphs use Lato Regular 17px with 29px line-height. Large paragraphs use Lato Light 24px with 36px line-height.
Pre-Development Checklist
Familiarize yourself with available images, designs, and text content
Decide between using PSD files for detailed specs or JPEG files with provided measurements
Organize your HTML, CSS, and assets in a logical directory structure
Include Regular, Light, and Bold weights to match the design specifications