Mastering CSS Grid 2022 - With 3 cool projects
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.
More
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
Modal 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
Watch Online Mastering CSS Grid 2022 - With 3 cool projects
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 09:24 |
| 2 | What you need for this course. PLEASE WATCH!! | 04:59 |
| 3 | Rating this course. PLEASE ALSO WATCH | 03:24 |
| 4 | CSS Grid 101 | 13:59 |
| 5 | Creating Grid Containers | 02:29 |
| 6 | Defining Rows and Columns | 08:39 |
| 7 | The grid property | 01:45 |
| 8 | Fixed and Percentage Track Sizing | 03:28 |
| 9 | Track Sizing based on Font Size | 03:59 |
| 10 | Track Sizing based on Viewport | 08:00 |
| 11 | Auto Track Sizes | 05:47 |
| 12 | The Fraction (fr) Unit | 10:15 |
| 13 | Fractions vs Auto | 02:46 |
| 14 | The minmax function | 10:01 |
| 15 | Minmax function gotchas | 07:06 |
| 16 | Understanding max-content and min-content | 05:17 |
| 17 | The fit-content function | 05:50 |
| 18 | The repeat function | 06:13 |
| 19 | Managing Grid Gaps | 05:44 |
| 20 | Nested grids | 01:17 |
| 21 | Reordering Grid Items | 07:01 |
| 22 | Moving Grid Items to different columns | 07:56 |
| 23 | Moving Grid Items to different rows | 07:07 |
| 24 | Moving Grid Items to non adjacent cells | 09:06 |
| 25 | Grid Item spanning basics | 09:59 |
| 26 | The span keyword | 07:59 |
| 27 | Grid Item spanning gotchas | 04:08 |
| 28 | Naming Grid Lines | 05:50 |
| 29 | Spanning Grid Items based on line names | 07:20 |
| 30 | Using multiple line names | 04:59 |
| 31 | Lines names and the repeat function | 04:05 |
| 32 | The grid-column property | 08:03 |
| 33 | The grid-row property | 05:19 |
| 34 | Positioning Grid Items using the grid-area property | 10:49 |
| 35 | Spanning Grid Items using the grid-area property | 06:26 |
| 36 | The grid property reviewed | 04:54 |
| 37 | Aligning Row Tracks | 06:09 |
| 38 | Aligning Column Tracks | 02:30 |
| 39 | The place-content property | 04:57 |
| 40 | Vertically Aligning Grid Items | 03:30 |
| 41 | Horizontally Aligning Grid Items | 02:29 |
| 42 | The place-items property | 03:42 |
| 43 | Vertically Aligning an Individual Grid Item | 02:06 |
| 44 | Horizontally Aligning an Individual Grid Item | 01:38 |
| 45 | The place-self property | 02:43 |
| 46 | A review on media queries | 11:53 |
| 47 | Setting viewport for mobile and tablet devices | 03:28 |
| 48 | Positioning Grid Items using areas | 08:42 |
| 49 | Spanning Grid Items using areas | 08:04 |
| 50 | Defining empty grid cells | 01:39 |
| 51 | Gotchas with grid-template-areas | 02:19 |
| 52 | Building responsive grids without media queries | 09:08 |
| 53 | The grid property reviewed again | 08:03 |
| 54 | Implicit vs explicit grids | 06:02 |
| 55 | An introduction to the Autoplacement Algorithm | 02:48 |
| 56 | Understanding Flow | 07:14 |
| 57 | Controlling Flow | 07:51 |
| 58 | Understanding order-modified document order | 04:28 |
| 59 | Understanding locking | 12:22 |
| 60 | Locking grid items | 12:32 |
| 61 | Locking and responsive web design | 09:52 |
| 62 | Locking and responsive web design in action | 07:17 |
| 63 | Understanding Grid Spans | 04:30 |
| 64 | Grid Spans in action | 08:11 |
| 65 | Understanding packing | 05:52 |
| 66 | Packing in action | 03:37 |
| 67 | Bringing it all together part 1 | 14:48 |
| 68 | Bringing it all together part 2 | 15:00 |
| 69 | The grid property and Autoplacement part 1 | 10:45 |
| 70 | The grid property and Autoplacement part 2 | 10:10 |
| 71 | The grid-template property | 06:51 |
| 72 | Absolute positioning | 05:56 |
| 73 | Animating grids | 05:11 |
| 74 | Simplifying Flexbox layouts with CSS Grid | 11:33 |
| 75 | More simplifying Flexbox layouts | 11:45 |
| 76 | When to use Flexbox over CSS Grid | 13:14 |
| 77 | Grid items and the box model | 13:20 |
| 78 | Building a 4 column layout | 04:16 |
| 79 | Building a sidebar | 03:44 |
| 80 | Vertically aligning text | 03:05 |
| 81 | Centering a modal dialog | 04:40 |
| 82 | Creating a sticky footer | 04:32 |
| 83 | Basic form formatting | 12:18 |
| 84 | The Holygrail layout | 11:44 |
| 85 | The Media Objects layout | 09:20 |
| 86 | A Viewport Friendly Image Gallery | 06:28 |
| 87 | Another Viewport Friendly Image Gallery | 05:32 |
| 88 | Animating a Sidebar | 05:52 |
| 89 | A Monthly Calendar | 12:15 |
| 90 | A Newspaper Cover | 13:07 |
| 91 | A Twitter Responsive Layout | 20:35 |
| 92 | A Responsive Movie Gallery | 12:04 |
| 93 | A Responsive Movie Gallery Continued | 10:24 |
| 94 | A Responsive Movie Gallery Finale | 08:55 |
| 95 | What we are building | 02:04 |
| 96 | Setting up the basic shell | 15:51 |
| 97 | Building the search conversation section | 04:31 |
| 98 | Building the add conversation section | 05:32 |
| 99 | Building the chat title section | 05:29 |
| 100 | Building the chat form section | 06:44 |
| 101 | Building an individual conversation item | 11:02 |
| 102 | Fixing conversation item sizing issues | 05:51 |
| 103 | Adding more conversation items | 03:05 |
| 104 | Creating some initial chat messages | 08:15 |
| 105 | Sizing and aligning chat messages | 06:15 |
| 106 | Adding chat profile pictures | 07:23 |
| 107 | Adding the finishing touches | 01:24 |
| 108 | What we are building | 05:51 |
| 109 | Setting up the basic layout for mobile | 04:58 |
| 110 | Building the top header | 07:26 |
| 111 | Defining the main content section layout | 07:06 |
| 112 | Building the search store section | 07:14 |
| 113 | Adding the delivery widget to the main section | 11:53 |
| 114 | Building the store list grid | 13:13 |
| 115 | Building the footer | 11:01 |
| 116 | Modifying the footer for landscape mode on mobile | 03:39 |
| 117 | Dealing with the store list on tablet | 03:16 |
| 118 | Dealing with the footer links on tablet | 06:14 |
| 119 | Dealing with the security section on tablet | 01:39 |
| 120 | Dealing with the store list on larger devices | 02:06 |
| 121 | Adding the delivery widget to the top bar | 16:10 |
| 122 | Ensuring a max width for the entire site | 13:44 |
| 123 | What we are building | 05:22 |
| 124 | Building the top bar | 10:25 |
| 125 | Building the mobile first layout | 08:49 |
| 126 | Building the thumbnail | 02:37 |
| 127 | Building the video title and views | 03:13 |
| 128 | Building the social interaction section | 11:57 |
| 129 | Building the channel details section | 13:10 |
| 130 | Building the related videos autoplay section | 07:15 |
| 131 | Building out the related videos | 13:23 |
| 132 | Building the comments heading section | 07:45 |
| 133 | Building the add comment form | 06:01 |
| 134 | Building out a list of comments | 15:16 |
| 135 | Building out the see response button | 07:21 |
| 136 | Adding the responses | 06:48 |
| 137 | Building related videos in landscape mode for mobile | 09:07 |
| 138 | Swapping comments and related videos | 04:42 |
| 139 | Building related videos in portrait mode for tablet | 04:08 |
| 140 | Building related videos in landscape mode for tablet | 09:57 |
| 141 | Building related videos on large devices | 03:42 |
| 142 | Adding the finishing touches | 08:24 |
| 143 | Congratulations | 03:41 |
Similar courses to Mastering CSS Grid 2022 - With 3 cool projects
100 Days Of Code: The Complete Web Development Bootcamp 2022
Beyond CSS
Crash Course: Build a Full-Stack Web App in a Weekend!
Mastering CSS Layout
HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
CSS for JavaScript Developers
100 Days Of Code: The Complete Web Development Bootcamp 2024
