MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz, 2 ChGenre: eLearning | Language: English | Duration: 17 hour | Size: 8.67 GBCSS Grid – The future of layouts. It’s like Flexbox, but dialled up to elevenWhat you’ll learnHow to implement responsive layouts using CSS GridHow to build regular layouts in CSS GridAll properties that are part of the CSS Grid SpecificationHow to build commonly used sites such as YouTube using CSS GridRequirementsSome knowledge of CSS and HTMLFlexbox is optional but preferredDescriptionIn 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 designThe concept of implicit and explicit grids and what the differences areA deep look into the Autoplacement algorithmAnimation at a high level and what works currently with CSS GridHow to convert some layouts in Flexbox to use CSS Grid insteadWhen to use Flexbox over CSS GridOnce 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 layoutBasic Sidebar layoutVertical Text alignmentModal alignmentStick footer layoutFormatting form fieldsAnd hopefully in future much more. We then look at some advance layout topics such as:-The Holygrail layoutThe Media Objects layoutA Viewport Friendly Image GalleryA Responsive Image GalleryAn Animated SidebarA Monthly Calendar layoutA Newspaper Cover layoutA Responsive Twitter Clone LayoutA Responsive Movie GalleryThen 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 interfaceAn Uber Eats Clone Responsive ApplicationA YouTube Clone Responsive ApplicationWho this course is for:Web DevelopersWeb DesignersUser Experience DesignersFront End DevelopersFull Stack Developers
