Section 01: Course Introduction and Source Materials |
|
HTML, CSS, Flexbox, and CSS Grid Course Introduction |
|
00:02:00 |
|
What are HTML and CSS |
|
00:06:00 |
|
The Website We’re Going to Build in the HTML/CSS Course |
|
00:05:00 |
Section 02: HTML and CSS Basics |
|
Tools We’ll Use in the Course and Basic HTML Structure Overview |
|
00:18:00 |
|
Introduction to Using CSS Styles |
|
00:13:00 |
|
Deep Dive: How the CSS Cascading Process Works |
|
00:10:00 |
|
Guide to HTML Links |
|
00:16:00 |
|
Working with the div Tag in HTML |
|
00:10:00 |
|
Guide to HTML Classes and IDs |
|
00:09:00 |
Section 03: Flexbox, CSS Grid, Animations, and Images |
|
Introduction to Flexbox |
|
00:16:00 |
|
Guide to Padding in CSS |
|
00:08:00 |
|
Guide to Margin in CSS |
|
00:04:00 |
|
Integrating Icons with Font Awesome |
|
00:05:00 |
|
How to Select and Style Child Tag Elements |
|
00:09:00 |
|
Introduction to CSS Grid |
|
00:13:00 |
|
How to Import and Use Custom Fonts in HTML |
|
00:10:00 |
|
How to Import and Style Images in HTML |
|
00:08:00 |
|
Refactoring the CSS Code to Use More Specific Selectors |
|
00:14:00 |
|
Integrating Flexbox Inside of a CSS Grid Container to Align Items |
|
00:07:00 |
|
Introduction to CSS Animations |
|
00:09:00 |
|
Styling the Right Column of the Navigation Bar |
|
00:14:00 |
|
Finalizing the Navigation Bar and Organizing the Style Files to Conform with Dev |
|
00:08:00 |
|
How to Build a Parallax Scrolling Feature |
|
00:11:00 |
|
Adding Text Overlays On Top of the Parallax Image |
|
00:07:00 |
|
Adding the HTML Structure and Icons for the Feature Section of the Homepage |
|
00:09:00 |
|
How to Create Columns with Animated Hover Effects in CSS |
|
00:14:00 |
|
Working with nth Child Selectors in CSS |
|
00:08:00 |
|
How to Work with Box Shadows in CSS |
|
00:09:00 |
|
How to Embed a Google Map into a Website |
|
00:04:00 |
|
Building the Footer’s HTML Structure |
|
00:11:00 |
|
Controlling the Flex Direction to Layout the Footer Styles |
|
00:10:00 |
|
How to Apply Filters and Control an Image’s Opacity with CSS |
|
00:03:00 |
|
Finalizing the Footer Styles |
|
00:16:00 |
Section 04: Transforming Image Styles, Box Layouts, and Content Integration |
|
Building the HTML Structure for the About Page Header |
|
00:06:00 |
|
How to Skew Images in CSS |
|
00:16:00 |
|
Using the CSS Float Property to Have Text Flow Around an Image |
|
00:15:00 |
|
Building the Square Grid HTML Structure |
|
00:08:00 |
|
Creating a Two Column Layout with CSS Grid and Flexbox |
|
00:13:00 |
|
Finalizing the About Page Styles and Review of Code Organization Best Practices |
|
00:10:00 |
Section 05: Lists, Anchor Tags and Pseudo Elements |
|
Populating the Menu Page with the Two Column Grid |
|
00:05:00 |
|
Guide to HTML Bullet Point and Numbered Lists |
|
00:05:00 |
|
How to Implement Anchor Tags in HTML |
|
00:07:00 |
|
Overview of the Before and After Pseudo Selectors in CSS |
|
00:07:00 |
Section 06: HTML Forms |
|
Creating the Initial Structure for the Contact Page |
|
00:16:00 |
|
Building the Contact Page Layout with CSS Grid |
|
00:10:00 |
|
Introduction to HTML Form Elements |
|
00:09:00 |
|
How to Style Text Inputs with CSS |
|
00:11:00 |
|
Styling the Form Text area and Button |
|
00:07:00 |
|
Building the Label and Form Element Drop Shadow Styles |
|
00:09:00 |
|
Integrating Custom Form Placeholder Text Styles |
|
00:03:00 |
|
How to Animate Form Labels |
|
00:06:00 |
|
Finalizing Contact Page Styles |
|
00:09:00 |
Section 07: CSS Media Queries |
|
Introduction to CSS Media Queries |
|
00:14:00 |
|
Finalizing the Homepage Responsive Styles |
|
00:07:00 |
|
Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements |
|
00:16:00 |
Assignment |
|
Assignment – HTML5 & CSS3 |
|
00:00:00 |