Learn How To Make a Website with Steph

Capstone Project Series

About

The Capstone Project Series is intended for those with a grasp of the basics of HTML and CSS and are ready to build and launch their first website.

If you are brand new to web development, hop back to the Foundations Series lessons first.

Preview the Final Project

Capstone Project Lessons

  • Ep1: Setup For a Website Project

    Prepare for this course by setting up the project, including adding a CSS reset.

    Watch Episode 1

  • Ep2: Dissecting a Web Design Layout

    Walk through the final website design and begin learning how to break it down into parts.

    Watch Episode 2

  • Ep3: Translating a Design into Semantic HTML

    Create the HTML skeleton for the website and learn about semantic HTML tags.

    Watch Episode 3

  • Ep4: Typography and Header Styles

    Setup a custom font and style the headlines, then create the base header styles.

    Watch Episode 4

  • Ep5: Footer and Alignment Utilities

    Create additional alignment and layout utilities to style the footer.

    Watch Episode 5

  • Ep6: Main Section Type Colors and Alignment

    Create type color and additional alignment utilities for the main section content.

    Watch Episode 6

  • Ep7: Tour Package Cards

    Develop the "card" and "button" components, and learn about background image properties.

    Watch Episode 7

  • Ep8: Header Graphics

    Update the Gulp build process to include images, and create image styles for the header.

    Watch Episode 8

  • Ep9: About Section Graphics

    Add the About section stars graphic, and learn more about background properties.

    Watch Episode 9

  • Ep10: Tour Package Graphics

    Create multiple background effects and an animated transition.

    Watch Episode 10

  • Ep11: Navigation

    Create the HTML for the site navigation, and learn how to pin it to the viewport.

    Watch Episode 11

  • Ep12: Booking Page and Form

    Create a semantic HTML form, and get an introduction to CSS grid.

    Watch Episode 12

  • Ep13: Responsive Mobile View

    Learn how to adjust the layout - aka "responsive design" - using media queries.

    Watch Episode 13

  • Ep14: Animation

    Learn the two primary methods of animating elements with CSS.

    Watch Episode 14

  • Ep15: Version Control

    Create a GitHub account and learn the basics of version control to track changes.

    Watch Episode 15

  • Ep16: Website Launch

    Create a `build` command and complete the capstone by launching on Netlify.

    Watch Episode 16

Looking for more?

Join me on egghead where I'm covering even more topics for intermediate to advanced web developers.

View egghead Lessons