Tutorial: Populating the Menu Page with the Two Column Grid | YouAccel

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

Sign In Sign Up

HTML5 & CSS3 - Project Based Learning

Enroll

Populating the Menu Page with the Two Column Grid

2024 © YouAccel

Home
About
Privacy
Terms
Contact

Home
Inbox