Mastering CSS Grid 2020 - With 3 cool projects
- 17 hours on-demand video
- 4 articles
- 58 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- How to implement responsive layouts using CSS Grid
- How to build regular layouts in CSS Grid
- All properties that are part of the CSS Grid Specification
- How to build commonly used sites such as YouTube using CSS Grid
In this video I talk about what the requirements are for taking this course.
In this video I talk about the best way to rate and review this course.
In this video, you will learn how to create your very first Grid Container. We will look at both types of Grid Containers as well.
In this video we will cover the new fraction (fr) unit and how we can use it to allocate remaining space to grid items.
In this video we look at how we can explicit set which column track a specific grid item could be placed inside of a grid container.
In this video we look at the grid-area property, and how we use it to place grid items into specific cells in the grid.
In this video we quickly review media queries. A concept needed to understand responsive web design. This is needed so we can properly configure CSS Grid over different device sizes.
In this video, we learn how to position grid items using the concept of areas. Areas are used to simplify the positioning of items over different device sizes.
In this video we extend our knowledge from the previous video and look at locking from a practical level.
In this video we put all the knowledge over the last few videos to get a better understanding of the Autoplacement Algorithm
In this video we look at how to build out a common layout, known as the Holygrail layout.
In this video I quickly cover the chat application we are building, and the starting state of the application.
In this video we'll set up the basic shell as a grid and organise each section of our chat application
- Some knowledge of CSS and HTML
- Flexbox is optional but preferred
CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our device. CSS grid simplifies this process over other existing strategies.
In this course we take you deep into how to build a variety of different layouts in CSS Grid. We cover the following:-
All the properties in CSS Grid, how they work, and any gotchas that you may not be aware of when using them.
Alignment and how it works in CSS Grid, including the alignment of tracks and grid items at the grid container level. We also show you how to override alignment at the grid item level.
The basics of responsive web design, such as media queries and how they work with mobile / tablet etc.
Grid areas and how it helps simplify responsive web design
The concept of implicit and explicit grids and what the differences are
A deep look into the Autoplacement algorithm
Animation at a high level and what works currently with CSS Grid
How to convert some layouts in Flexbox to use CSS Grid instead
When to use Flexbox over CSS Grid
Once we cover all of these concepts, we then go about showing you some basic layout problems and how they can be solved. This includes:-
Column based layout
Basic Sidebar layout
Vertical Text alignment
Stick footer layout
Formatting form fields
And hopefully in future much more. We then look at some advance layout topics such as:-
The Holygrail layout
The Media Objects layout
A Viewport Friendly Image Gallery
A Responsive Image Gallery
An Animated Sidebar
A Monthly Calendar layout
A Newspaper Cover layout
A Responsive Twitter Clone Layout
A Responsive Movie Gallery
Then if you haven't had enough, we have 3 real life application examples that will give you the experience you need. They are:-
A Chat UI interface
An Uber Eats Clone Responsive Application
A YouTube Clone Responsive Application
- Web Developers
- Web Designers
- User Experience Designers
- Front End Developers
- Full Stack Developers