CSS Grid & Flexbox – The Ultimate Course Build +10 Projects

Course Curriculum

Chapter 1: Introduction to the Course – What we're building & the tools that we need

Lecture 1: The Projects included with this Course

Lecture 2: The Development Environment & Tools needed to complete this course

Chapter 2: Flexbox 101 – The Basics of Flexbox

Lecture 1: What's Flexbox?

Lecture 2: Flex Container

Lecture 3: Flex Direction

Lecture 4: Flex Wrap

Lecture 5: Order

Lecture 6: Flex Grow, Flex Shrink, Flex Basis & The Shorthand Flex

Lecture 7: The Flex Property in Depth

Lecture 8: Flex Alignment with Justify-content and align-items

Lecture 9: Putting everything together – Building a Layout (part 1 of 2)

Lecture 10: Putting everything together – Building a Layout (part 2 of 2)

Chapter 3: Building a Card Element

Lecture 1: Kicking off the Project

Lecture 2: Finishing the Cards

Chapter 4: Building a Freelancer Website

Lecture 1: Starting the Project (HTML)

Lecture 2: Adding the Main font and Custom Properties

Lecture 3: Working with the Main Nav

Lecture 4: Adding the Hero Image

Lecture 5: Working with the Main Container

Lecture 6: CSS for the Services Section

Lecture 7: Adding the Icons

Lecture 8: Styling the Contact Form

Chapter 5: Buiding Nav Menus with Flexbox

Lecture 1: Building a Simple Menu

Lecture 2: Building a Menu with Icons

Lecture 3: Building a Menu with Icons Part 2

Lecture 4: Building a DropDown Menu

Lecture 5: Building a Social Media Navigation

Lecture 6: Building a Social Media Menu with Dropdown

Chapter 6: Building a Blog Entry Layout (Holy Grail)

Lecture 1: Adding the HTML

Lecture 2: Adding the Main CSS

Lecture 3: Working with the Main Navigation

Lecture 4: Finishing the Main Nav

Lecture 5: Working with the Main Content Area

Lecture 6: Finishing the Sidebar, Content & Footer

Chapter 7: Building a Blog Homepage Layout

Lecture 1: Adding the Header HTML

Lecture 2: CSS for the Header

Lecture 3: Working with the Main Nav

Lecture 4: Working with the Categories HTML

Lecture 5: Working with the Categories CSS

Lecture 6: Working with the Footer HTML

Lecture 7: Working with the Footer CSS

Chapter 8: Building the Udemy Homepage

Lecture 1: Installing Node, NPM & Gulp

Lecture 2: Creating a package.json and installing the dependencies

Lecture 3: Creating the Gulp Workflow

Lecture 4: Creating the SASS Files

Lecture 5: Adding the Main CSS Selectors

Lecture 6: Working with the Cart

Lecture 7: Building a Mixin for Buttons

Lecture 8: Working with the Hero Image

Lecture 9: Building Mixins for Media Queries

Lecture 10: Working with the Main Features Section

Lecture 11: Building the Courses List Section

Lecture 12: Finishing the Project

Chapter 9: Building the Netflix Login Page

Lecture 1: Installing the Dependencies and Kicking off the project

Lecture 2: Adding the HTML

Lecture 3: Adding the Main CSS

Lecture 4: Styling the Login Form

Lecture 5: Adding a CSS Transition for the Labels

Lecture 6: Stryling the Bottom Section of the Form

Lecture 7: Building the Footer Section of the Site

Lecture 8: Form Validation with JavaScript ES6

Lecture 9: Displaying the Alerts

Lecture 10: Finishing the Form Validation

Lecture 11: Adding a Show / Hide Password Button

Chapter 10: Building an Admin Panel with Flexbox

Lecture 1: Kicking off the Project

Lecture 2: Working with the Main Bar

Lecture 3: Styling the Sidebar

Lecture 4: Adding the CSS for the Admin Menu

Lecture 5: CSS For the Form

Lecture 6: Show / Hiding the Sidebar with a button

Chapter 11: Flex Layouts

Lecture 1: Building a Media Container Layout

Lecture 2: Building a Fixed Footer Layout

Lecture 3: CSS Positioning Project

Chapter 12: CSS Grid 101 – Introduction and the Basics of CSS Grid

Lecture 1: What's CSS Grid

Lecture 2: Grid Container – Grid Row and Grid Column

Lecture 3: The Grid Shorthand and Positioning Grid Elements

Lecture 4: Grid Auto-flow

Lecture 5: CSS Grid Repeat

Lecture 6: Grid Template Areas

Lecture 7: Grid Template Areas in Practice

Lecture 8: Grid Template Areas with Media Queries to change the Layout Order

Lecture 9: Grid Fractions and Grid Gap

Lecture 10: CSS Grid Alignment Properties

Lecture 11: Building an Experimental Layout with CSS Grid

Lecture 12: CSS Grid AutoFit, AutoFill and MinMax

Chapter 13: Building a Blog Entry Layout with CSS Grid

Lecture 1: Adding the Main Grid Areas