Course Introduction and Source Materials
  • HTML, CSS, Flexbox, and CSS Grid Course Introduction
  • What are HTML and CSS?
  • The Website We're Going to Build in the HTML/CSS Course
  • Source Code and Course Assets
HTML and CSS Basics
  • Tools We'll Use in the Course and Basic HTML Structure Overview
  • Introduction to Using CSS Styles
  • Deep Dive: How the CSS Cascading Process Works
  • Guide to HTML Links
  • Working with the div Tag in HTML
  • Guide to HTML Classes and IDs
Flexbox, CSS Grid, Animations, and Images
  • Introduction to Flexbox
  • Guide to Padding in CSS
  • Guide to Margin in CSS
  • Course Update: FontAwesome Import Fix
  • Integrating Icons with Font Awesome
  • How to Select and Style Child Tag Elements
  • Introduction to CSS Grid
  • How to Import and Use Custom Fonts in HTML
  • How to Import and Style Images in HTML
  • Refactoring the CSS Code to Use More Specific Selectors
  • Integrating Flexbox Inside of a CSS Grid Container to Align Items
  • Introduction to CSS Animations
  • Styling the Right Column of the Navigation Bar
  • Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev
  • How to Build a Parallax Scrolling Feature
  • Adding Text Overlays On Top of the Parallax Image
  • Adding the HTML Structure and Icons for the Feature Section of the Homepage
  • How to Create Columns with Animated Hover Effects in CSS
  • Working with nth Child Selectors in CSS
  • How to Work with Box Shadows in CSS
  • How to Embed a Google Map into a Website
  • Building the Footer's HTML Structure
  • Controlling the Flex Direction to Layout the Footer Styles
  • How to Apply Filters and Control an Image's Opacity with CSS
  • Finalizing the Footer Styles
Transforming Image Styles, Box Layouts, and Content Integration
  • Building the HTML Structure for the About Page Header
  • How to Skew Images in CSS
  • Using the CSS Float Property to Have Text Flow Around an Image
  • Building the Square Grid HTML Structure
  • Creating a Two Column Layout with CSS Grid and Flexbox
  • Finalizing the About Page Styles and Review of Code Organization Best Practices
Lists, Anchor Tags and Pseudo Elements
  • Populating the Menu Page with the Two Column Grid
  • Guide to HTML Bullet Point and Numbered LIsts
  • How to Implement Anchor Tags in HTML
  • Overview of the Before and After Pseudo Selectors in CSS
HTML Forms
  • Creating the Initial Structure for the Contact Page
  • Building the Contact Page Layout with CSS Grid
  • Introduction to HTML Form Elements
  • How to Style Text Inputs with CSS
  • Styling the Form Textarea and Button
  • Building the Label and Form Element Drop Shadow Styles
  • Integrating Custom Form Placeholder Text Styles
  • How to Animate Form Labels
  • Finalizing Contact Page Styles
CSS Media Queries
  • Introduction to CSS Media Queries
  • Finalizing the Homepage Responsive Styles
  • Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements
Site Deployment
  • How to Deploy a Static Site to the Web with Netlify
HTML and CSS Tips and Tricks
  • HTML and CSS Tips and Tricks Section
  • How to Build Animated Flipping Cards Using Just CSS
  • How to Create Custom Cursors in HTML and CSS
  • Live Coding Webinar: Build out Tooltips with HTML and CSS
Guide to HTML
  • Archived Course
  • Tools We'll Use in the Course
  • Basic HTML Website Structure
  • HTML5 Layout Cheat Sheet
  • Working with the HTML Head Tag
  • Creating Page Components with the Div Tag
  • Implementing Inline Components with the Span Tag
  • Integrate Headings into Web Pages
  • Using Multi Line Content with Paragraph Tags
  • Working with HTML Hyperlinks
  • Adding Page Breaks with the Horizontal Rule Tag
  • Integrating Line Breaks into HTML Pages
  • Creating HTML Numbed Lists
  • Working with Bullet Point Lists in HTML
  • Working with Bold HTML Styles
  • Using the Italic Style for Text
  • Comprehensive Set of HTML Style Tags
  • How to Add Images to Websites
  • Mapping Links on Images
  • How to work with Custom Tags in HTML
  • Adding Comments to HTML Code
  • Guide to Using Web Developer Tools
  • Working with HTML IDs
  • Working with HTML Classes
  • HTML Headings
  • Working with Classes and IDs
Guide to CSS Styles
  • Implementing Inline CSS Styles