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

Let's review the projects included with this course!

You need a text editor, also a browser, so here's my recommendation!

Let's begin this journey with a brief introduction to flexbox and some terms that we will use!

Let's review what's the Flex Container

In this video let's take a look at Flex Direction

Let's review the Flex Wrap property !

Order is really useful, you can display HTML elements in a different order without changing the HTML

Let's review some useful properties when working with Flexbox!

Let's see another example of the Flex property

Let's see how you can align elements horizontally and vertically with Flexbox

Let's practice what we have learn so far in this course

Let's add some Basic CSS to create the Card Components

Let's finish this example!

Let's add the HTML for this project

Let's add some Custom Properties, the main font and everything

Let's add the CSS for the Main Navigation

Let's add the hero image and center the content vertically and horizontally

Let's add a shadow for the Main Container

Let's add some CSS for the Services Section

Let's add the Icons for the Services

Let's add some CSS for the Contact Form

Let's practice a little more about Flexbox

Let's use flexbox to build a simple menu

Let's build a Menu with Icons

Let's finish the navigation with icons

Let's build a dropdown menu with Flex!

Let's see how we can build a Social Media Navigation

Let's see how we can display the 2 previous menus into one navbar

Let's add the HTML for this layout!

Let's add the main css, such as custom properties, and more!

Let's add some CSS for the main navigation

Let's add the final styles for the Main Nav

The Main Content area will change the order of the sidebar and main nav based on the screen size, let's see how!

Let's finish the CSS for the Sidebar Content & Footer

Let's start working with the Header HTML

Let's add the CSS for the Header

Let's finish the header with the Main Nav!

Let's start working with the Categories HTML!

Time to add some CSS into the Categories!

Let's add the Footer HTML!

Let's finish this example with some CSS!

Let's introduce a modern workflow with Node & NPM

Let's create a package.json and install the dependencies!

Let's create the Gulp Workflow

Let's add the Main SASS Files for this Project!

Let's add the Main CSS Selectors

Let's add some CSS for the shopping Cart

Let's add a Mixin that we can re use for the buttons!

Let's start working with the Hero Image

Let's see how we can build Mixins for the Media Queries

Let's add the Icons and the main features section!

Let's start working with the Courses List!

Let's finish this project!

Let's install the NPM dependencies!

Let's add the HTML for this project

Let's add the Main CSS for this project!

Let's add the Login Form CSS

Let's add some CSS to the bottom section of the form

Let's add the CSS for the footer of the login page

Let's see how we can validate a form with JavaScript

Let's see how we can display the alert message

Let's finish the form validation

In this video we're going to add a show / hide password button

Let's begin a new project, an admin panel with Flexbox and some other nice tools!

Let's add the CSS for the top section

Let's add some CSS for the Sidebar

Let's create a menu for the sidebar

Let's add some CSS for the main form

Let's add the functionality to hide or show the sidebar

Let's see a quick intro to CSS Grid

Let's see how you can create your grid rows and columns

Let's see the grid shorthand and also the shorthand to position some elements

Let's see what's Grid auto flow!

Sometimes you want to add the same size for grids let's see how you can create multiple rows and columns with less code!

Let's review how you can create a grid area!

Let's practice css grid areas

You can also mix your css grid with media queries!

Let's review what's a fraction in CSS Grid

You can use the same alignment properties that we saw in the flexbox part into grid, let's see how

Let's put in practice what we have learn so far in this course

Let's review autofit and autofill, also we're going to learn minmax!