Welcome
  • Introduction
  • How the Web Works
Getting Started
  • Planning a Website
  • The Proposal
  • Build a Wireframe
Handcoding HTML5
  • Downloads and Example Web Pages
  • Markup Rules
  • HTML Semantics
  • Setting up your Workspace for Windows
  • Setting up your Workspace for Macintosh
  • Document Title
  • Heading and Paragraph
  • Block Quote and Break Tag
  • HTML Comments
  • Inline Tags
  • HTML Lists
  • HTML5 Entities
  • Linking Documents
  • Linking to Folders
  • Four Parts of an HTML Page
  • Build Example Site Part A
  • Build Example Site Part B
  • Build Example Site Part C
  • Build Example Site Part D (INCLUDES subdomain for "sandbox")
  • View the Completed Example Site
Introduction to CSS
  • Introduction to CSS
  • Linking to an External Style Sheet
  • CSS Reset
  • Styling Built-in Selectors
  • Styling Lists
  • Styling Borders
  • Setting Padding and Margin
  • Color Theory
  • Colors
  • Adding a Google Font Family
  • Navigation
  • Build Example Site Part A
  • Build Example Site Part B
  • Build Example Site Part C
  • Build Example Site Part D
  • View the completed example site
Adding Images
  • Overview of Images for the Web
  • Web Page Speed and Images
  • Using Photoshop to Prepare Images
  • Using PIXLR to Prepare Images
  • Add an Image to a Web Page
  • Using a PNG Image
  • Creating an Image Gallery
  • Image Gallery Using Flexbox
  • Build the Example Site Part A
  • Build the Example Site Part B
  • Build the Example Site Part C
  • Build the Example Site Part D
  • View the completed example site
HTML5 Forms for collecting user information
  • Introduction to Forms
  • Create a Basic Form
  • New HTML5 Input Types
  • Creating a Fieldset
  • Adding Radio Buttons
  • Adding Checkboxes
  • Adding a Textarea for Comments
  • Implementing a Select with Dropdowns
  • Adding Hidden Inputs
  • Using HTML5 Required and Pattern
  • Styling Your Form with CSS
  • Build the Example Site part A
  • Build the Example Site part B
  • Build the Example Site part C
  • Build the Example Site part D
  • Build the Example Site part E
  • Build the Example Site part F
  • View the completed example site
Advanced CSS
  • Overview of Advanced CSS
  • Add a Gradient Image
  • Add a Background Image
  • Implement a CSS Gradient
  • Add a Graphic for Lists
  • Creating Drop Shadows
  • Building Navigation using Media Queries
  • Tell Phones Not to Lie
  • Build the Example Site Part A
  • Build the Example Site Part B
  • Build the Example Site Part C
  • Build the Example Site Part D
  • View the completed example site
Adding the final touches
  • Overview of Media
  • Implementing iFrames
  • Recording with Audacity
  • Adding an Audio File
  • Add a Table
  • Styling a Table with CSS
  • Link to a PDF file