Css Grid & Flexbox - The Ultimate Course Build +10 Projects

Create Modern Web Layouts w/ CSS Grid & Flexbox While Building +10 Real World Projects - SASS & CSS Transitions Included

What you'll learn

Learn Flexbox & CSS Grid to create amazing / responsive web layouts

CSS Grid & Flexbox are the present and the future for web layouts, you will master them in this course

You will also learn how to implement SASS, Gulp, JavaScript ES6 and other tools in your Designs

We're building several examples, each is going to be different so you can master this tools

Requirements

If you have written some websites with HTML and CSS and you want to learn Flexbox or Grid this course is for you

If you have experience working with float based layouts and want to learn Grid or Flexbox, this course is for you

We need to install some tools: a Text Editor (VS Code), Chrome and Firefox Developer Edition

Description

CSS Grid & Flexbox are the Present & Future for Web Layoutsin this course you're going to learn both tecnologies, and we're building several examples including a AirBNB Clone, Udemy & Netflix Login Page, plus several other projects (the video is enabled to watch for free where you can view all the projects)We will start with flexbox, a great technology for building one-dimensional layouts, with Flexbox you can create responsive websites really easily, you're going to learn the basics of flexbox, from flex container, flex direction, flex wrap, flex flow and others.Then we're going to build some projects with Flexbox so you can understand it's features more easilyAlso we're going to integrate some nice Tools with Flexbox, such as SASS, NPM , Gulp and also some Advanced CSS with Transitions and Custom Properties.Then we're moving into CSS Grid aka GRID or CSS Grid Layout, the most advanced way to create a web layout natively in CSS, with CSS Grid you can create more advanced  / responsive layouts with breeze, no frameworks are needed anymore!We're going to build several examples with CSS Grid, plus a Clone of the Website AirBNB and other projects that you can use for your clients or your personal use!

Overview

Section 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

Section 2: Flexbox 101 - The Basics of Flexbox

Lecture 3 What's Flexbox?

Lecture 4 Flex Container

Lecture 5 Flex Direction

Lecture 6 Flex Wrap

Lecture 7 Order

Lecture 8 Flex Grow, Flex Shrink, Flex Basis & The Shorthand Flex

Lecture 9 The Flex Property in Depth

Lecture 10 Flex Alignment with Justify-content and align-items

Lecture 11 Putting everything together - Building a Layout (part 1 of 2)

Lecture 12 Putting everything together - Building a Layout (part 2 of 2)

Section 3: Building a Card Element

Lecture 13 Kicking off the Project

Lecture 14 Finishing the Cards

Section 4: Building a Freelancer Website

Lecture 15 Starting the Project (HTML)

Lecture 16 Adding the Main font and Custom Properties

Lecture 17 Working with the Main Nav

Lecture 18 Adding the Hero Image

Lecture 19 Working with the Main Container

Lecture 20 CSS for the Services Section

Lecture 21 Adding the Icons

Lecture 22 Styling the Contact Form

Section 5: Buiding Nav Menus with Flexbox

Lecture 23 Building a Simple Menu

Lecture 24 Building a Menu with Icons

Lecture 25 Building a Menu with Icons Part 2

Lecture 26 Building a DropDown Menu

Lecture 27 Building a Social Media Navigation

Lecture 28 Building a Social Media Menu with Dropdown

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

Lecture 29 Adding the HTML

Lecture 30 Adding the Main CSS

Lecture 31 Working with the Main Navigation

Lecture 32 Finishing the Main Nav

Lecture 33 Working with the Main Content Area

Lecture 34 Finishing the Sidebar, Content & Footer

Section 7: Building a Blog Homepage Layout

Lecture 35 Adding the Header HTML

Lecture 36 CSS for the Header

Lecture 37 Working with the Main Nav

Lecture 38 Working with the Categories HTML

Lecture 39 Working with the Categories CSS

Lecture 40 Working with the Footer HTML

Lecture 41 Working with the Footer CSS

Section 8: Building the Udemy Homepage

Lecture 42 Installing Node, NPM & Gulp

Lecture 43 Creating a package.json and installing the dependencies

Lecture 44 Creating the Gulp Workflow

Lecture 45 Creating the SASS Files

Lecture 46 Adding the Main CSS Selectors

Lecture 47 Working with the Cart

Lecture 48 Building a Mixin for Buttons

Lecture 49 Working with the Hero Image

Lecture 50 Building Mixins for Media Queries

Lecture 51 Working with the Main Features Section

Lecture 52 Building the Courses List Section

Lecture 53 Finishing the Project

Section 9: Building the Netflix Login Page

Lecture 54 Installing the Dependencies and Kicking off the project

Lecture 55 Adding the HTML

Lecture 56 Adding the Main CSS

Lecture 57 Styling the Login Form

Lecture 58 Adding a CSS Transition for the Labels

Lecture 59 Stryling the Bottom Section of the Form

Lecture 60 Building the Footer Section of the Site

Lecture 61 Form Validation with JavaScript ES6

Lecture 62 Displaying the Alerts

Lecture 63 Finishing the Form Validation

Lecture 64 Adding a Show / Hide Password Button

Section 10: Building an Admin Panel with Flexbox

Lecture 65 Kicking off the Project

Lecture 66 Working with the Main Bar

Lecture 67 Styling the Sidebar

Lecture 68 Adding the CSS for the Admin Menu

Lecture 69 CSS For the Form

Lecture 70 Show / Hiding the Sidebar with a button

Section 11: Flex Layouts

Lecture 71 Building a Media Container Layout

Lecture 72 Building a Fixed Footer Layout

Lecture 73 CSS Positioning Project

Section 12: CSS Grid 101 - Introduction and the Basics of CSS Grid

Lecture 74 What's CSS Grid

Lecture 75 Grid Container - Grid Row and Grid Column

Lecture 76 The Grid Shorthand and Positioning Grid Elements

Lecture 77 Grid Auto-flow

Lecture 78 CSS Grid Repeat

Lecture 79 Grid Template Areas

Lecture 80 Grid Template Areas in Practice

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

Lecture 82 Grid Fractions and Grid Gap

Lecture 83 CSS Grid Alignment Properties

Lecture 84 Building an Experimental Layout with CSS Grid

Lecture 85 CSS Grid AutoFit, AutoFill and MinMax

Section 13: Building a Blog Entry Layout with CSS Grid

Lecture 86 Adding the Main Grid Areas

Lecture 87 Positioning the Elements in the Container

Section 14: Building a Real Estate Website Homepage

Lecture 88 Adding the Header and the Main Form

Lecture 89 Adding the Rest of the HTML

Lecture 90 Adding the Global CSS

Lecture 91 CSS for the Header

Lecture 92 Styling the Search Form

Lecture 93 Styling the Submit Button

Lecture 94 Working with the Properties Section

Lecture 95 CSS for the About Us Section

Lecture 96 CSS for the Footer

Section 15: Building a Freelancer Website with CSS Grid & JavaScript

Lecture 97 Working with the HTML

Lecture 98 Adding the Main Image and centering the content in the container

Lecture 99 Building the Services Section

Lecture 100 Styling the Footer

Lecture 101 Fetching Data from an External File

Lecture 102 Displaying the Portfolio

Lecture 103 Styling the Portfolio

Section 16: Building a AirBNB Clone with CSS Grid

Lecture 104 Working with the Header HTML

Lecture 105 Styling the Header

Lecture 106 Applying CSS Grid for the Main form

Lecture 107 Finishing the Search Form

Lecture 108 Working with the Recommendations Section

Lecture 109 CSS for the Recommended Places

Lecture 110 Building the "Explore" section

Lecture 111 Styling the Explore Section

Lecture 112 Building the Unique Homes Section

Lecture 113 Building the Top Rated Experiences

Lecture 114 Building the Footer

Lecture 115 CSS for the Footer

Lecture 116 Finishing the CSS for the Footer

Lecture 117 Adding an Animation to the Footer

Web Designers & Developers that want to learn CSS Grid & Flexbox to create modern web layouts,Any web developer with experience with any framework such as bootstrap or Foundation can take this course