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 |
Membership renews after 12 months. You can cancel anytime from your account.