Lecture Notes

Section 1: 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

Section 2: 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

Section 3: Flexbox, CSS Grid, Animations, and Images

Introduction to Flexbox
Guide to Padding in CSS
Guide to Margin in CSS
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

Section 4: 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

Section 5: 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

Section 6: 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

Section 7: 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

Lecture Notes

Course: HTML5 & CSS3 - Project Based Learning View Course Outline

Created by:





8h 45m 53s

Skill Level:




Students Enrolled:




Certification Type:

Completion Certificate

Lecture: HTML, CSS, Flexbox, and CSS Grid Course Introduction