CSS Grid Flexbox The Ultimate Course Build +10 Projects

CSS Grid & Flexbox – The Ultimate Course Build +10 Projects, available at $74.99, has an average rating of 4.55, with 117 lectures, 1 quizzes, based on 279 reviews, and has 1901 subscribers.

You will learn about 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 Were building several examples, each is going to be different so you can master this tools This course is ideal for individuals who are Web Designers & Developers that want to learn CSS Grid & Flexbox to create modern web layouts or Any web developer with experience with any framework such as bootstrap or Foundation can take this course It is particularly useful for Web Designers & Developers that want to learn CSS Grid & Flexbox to create modern web layouts or Any web developer with experience with any framework such as bootstrap or Foundation can take this course.

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

Summary

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

Price: $74.99

Average Rating: 4.55

Number of Lectures: 117

Number of Quizzes: 1

Number of Published Lectures: 117

Number of Published Quizzes: 1

Number of Curriculum Items: 118

Number of Published Curriculum Objects: 118

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will 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

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

Who Should Attend

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

Target Audiences

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

CSS Grid &?Flexbox are the Present &?Future for Web Layouts

in 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 easily

Also 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!

Course Curriculum

Chapter 1: Introduction to the Course – What were 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: Whats 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: Whats 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

Instructors

Juan Pablo De la torre Valdez
Creador de Código Con Juan – Aprende Con Proyectos Reales

Rating Distribution

1 stars: 8 votes

2 stars: 4 votes

3 stars: 23 votes

4 stars: 89 votes

5 stars: 155 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!