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.
Ep2: Dissecting a Web Design Layout
Walk through the final website design and begin learning how to break it down into parts.
Ep3: Translating a Design into Semantic HTML
Create the HTML skeleton for the website and learn about semantic HTML tags.
Ep4: Typography and Header Styles
Setup a custom font and style the headlines, then create the base header styles.
Ep5: Footer and Alignment Utilities
Create additional alignment and layout utilities to style the footer.
Ep6: Main Section Type Colors and Alignment
Create type color and additional alignment utilities for the main section content.
Ep7: Tour Package Cards
Develop the "card" and "button" components, and learn about background image properties.
Ep8: Header Graphics
Update the Gulp build process to include images, and create image styles for the header.
Ep9: About Section Graphics
Add the About section stars graphic, and learn more about background properties.
Ep10: Tour Package Graphics
Create multiple background effects and an animated transition.
Create the HTML for the site navigation, and learn how to pin it to the viewport.
Ep12: Booking Page and Form
Create a semantic HTML form, and get an introduction to CSS grid.
Ep13: Responsive Mobile View
Learn how to adjust the layout - aka "responsive design" - using media queries.
Learn the two primary methods of animating elements with CSS.
Ep15: Version Control
Create a GitHub account and learn the basics of version control to track changes.
Ep16: Website Launch
Create a `build` command and complete the capstone by launching on Netlify.