The future of layouts. It's like Flexbox but dialed up to eleven
Created by Daryl Duckmanton
In this course we take you in-depth to create a variety of different layouts in the CSS grid.
We cover the following: -
All the properties in the CSS grid, how they work, and any tricks that you may not know when using them.
Alignment and how this grid works in the CSS grid, including the alignment of tracks and grid objects at the grid level. We also show you how to override the alignment at the grid item level.
Grid areas and how it helps to simplify responsive web design
What are the concepts and differences of implicit and explicit grids
A deeper look into the auto position algorithm
High-level animations and what currently works with CSS grids
How to change some layout in Flexbox to use CSS grid instead
When to use flexbox on CSS grid
Once we cover all these concepts, we tell you about some basic layout problems and how they can be solved. This includes: -
Column based layout
Basic Sidebar Layout
Vertical text alignment
Modal alignment
Stick footer layout
Forming fields And hopefully more in the future.
We then look at some advance layout topics like: -
Holly girl layout
Media objects layout
A viewport friendly image gallery
A Responsive Image Gallery
An animated sidebar
A monthly calendar layout
Layout a newspaper cover
A Responsive Twitter Clone Layout
A Responsive Movie Gallery
Then if you do not have 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
Created by Daryl Duckmanton
📍Course length: 17 Hours 15 minutes
📍Coupon expired in 48
hours
📍Course Language: English
Description
CSS Grid is a relatively new and untapped concept of CSS. It is very important these days that our layouts are simple to maintain and easy to adjust based on the dimensions of our device.In this course we take you in-depth to create a variety of different layouts in the CSS grid.
We cover the following: -
All the properties in the CSS grid, how they work, and any tricks that you may not know when using them.
Alignment and how this grid works in the CSS grid, including the alignment of tracks and grid objects at the grid level. We also show you how to override the alignment at the grid item level.
Grid areas and how it helps to simplify responsive web design
What are the concepts and differences of implicit and explicit grids
A deeper look into the auto position algorithm
High-level animations and what currently works with CSS grids
How to change some layout in Flexbox to use CSS grid instead
When to use flexbox on CSS grid
Once we cover all these concepts, we tell you about some basic layout problems and how they can be solved. This includes: -
Column based layout
Basic Sidebar Layout
Vertical text alignment
Modal alignment
Stick footer layout
Forming fields And hopefully more in the future.
We then look at some advance layout topics like: -
Holly girl layout
Media objects layout
A viewport friendly image gallery
A Responsive Image Gallery
An animated sidebar
A monthly calendar layout
Layout a newspaper cover
A Responsive Twitter Clone Layout
A Responsive Movie Gallery
Then if you do not have 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
Certificate of Completion
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon