English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 17h 15m | 8.58 GB
The future of layouts. It’s like Flexbox, but dialled up to eleven
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
- 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
What you’ll learn
- 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
Table of Contents
Introduction
1 Introduction
2 What you need for this course. PLEASE WATCH!!
3 Rating this course. PLEASE ALSO WATCH
4 CSS Grid 101
Grid Containers and Tracks
5 Creating Grid Containers
6 Defining Rows and Columns
7 The grid property
8 Fixed and Percentage Track Sizing
9 Track Sizing based on Font Size
10 Track Sizing based on Viewport
11 Auto Track Sizes
12 The Fraction (fr) Unit
13 Fractions vs Auto
14 The minmax function
15 Minmax function gotchas
16 Understanding max-content and min-content
17 The fit-content function
18 The repeat function
19 Managing Grid Gaps
20 Grid Gap Updates!!!
21 Nested grids
22 A note on nesting
Controlling Grid Items
23 Reordering Grid Items
24 Moving Grid Items to different columns
25 Moving Grid Items to different rows
26 Moving Grid Items to non adjacent cells
27 Grid Item spanning basics
28 The span keyword
29 Grid Item spanning gotchas
30 Naming Grid Lines
31 Spanning Grid Items based on line names
32 Using multiple line names
33 Lines names and the repeat function
34 The grid-column property
35 The grid-row property
36 Positioning Grid Items using the grid-area property
37 Spanning Grid Items using the grid-area property
38 The grid property reviewed
Controlling Alignment
39 Aligning Row Tracks
40 Aligning Column Tracks
41 The place-content property
42 Vertically Aligning Grid Items
43 Horizontally Aligning Grid Items
44 The place-items property
45 Vertically Aligning an Individual Grid Item
46 Horizontally Aligning an Individual Grid Item
47 The place-self property
Responsive Grids
48 A review on media queries
49 Setting viewport for mobile and tablet devices
50 Positioning Grid Items using areas
51 Spanning Grid Items using areas
52 Defining empty grid cells
53 Gotchas with grid-template-areas
54 Building responsive grids without media queries
55 The grid property reviewed again
Implicit Grids and Autoplacement
56 Implicit vs explicit grids
57 An introduction to the Autoplacement Algorithm
58 Understanding Flow
59 Controlling Flow
60 Understanding order-modified document order
61 Understanding locking
62 Locking grid items
63 Locking and responsive web design
64 Locking and responsive web design in action
65 Understanding Grid Spans
66 Grid Spans in action
67 Understanding packing
68 Packing in action
69 Bringing it all together part 1
70 Bringing it all together part 2
71 The grid property and Autoplacement part 1
72 The grid property and Autoplacement part 2
CSS Grid Extras
73 The grid-template property
74 Absolute positioning
75 Animating grids
76 Simplifying Flexbox layouts with CSS Grid
77 More simplifying Flexbox layouts
78 When to use Flexbox over CSS Grid
79 A note of grid item sizing vs flex item sizing
80 Grid items and the box model
Some Simple Layouts
81 Building a 4 column layout
82 Building a sidebar
83 Vertically aligning text
84 Centering a modal dialog
85 Creating a sticky footer
86 Basic form formatting
Some Advanced Layouts
87 The Holygrail layout
88 The Media Objects layout
89 A Viewport Friendly Image Gallery
90 Another Viewport Friendly Image Gallery
91 Animating a Sidebar
92 A Monthly Calendar
93 A Newspaper Cover
94 A Twitter Responsive Layout
95 A Responsive Movie Gallery
96 A Responsive Movie Gallery Continued
97 A Responsive Movie Gallery Finale
Application 1 – A Chat application UI
98 What we are building
99 Setting up the basic shell
100 Building the search conversation section
101 Building the add conversation section
102 Building the chat title section
103 Building the chat form section
104 Building an individual conversation item
105 Fixing conversation item sizing issues
106 Adding more conversation items
107 Creating some initial chat messages
108 Sizing and aligning chat messages
109 Adding chat profile pictures
110 Adding the finishing touches
Application 2 – A Responsive Uber Eats Clone (Aussie Tucker)
111 What we are building
112 Setting up the basic layout for mobile
113 Building the top header
114 Defining the main content section layout
115 Building the search store section
116 Adding the delivery widget to the main section
117 Building the store list grid
118 Building the footer
119 Modifying the footer for landscape mode on mobile
120 Dealing with the store list on tablet
121 Dealing with the footer links on tablet
122 Dealing with the security section on tablet
123 Dealing with the store list on larger devices
124 Adding the delivery widget to the top bar
125 Ensuring a max width for the entire site
Application 3 – A Responsive YouTube clone
126 What we are building
127 Building the top bar
128 Building the mobile first layout
129 Building the thumbnail
130 Building the video title and views
131 Building the social interaction section
132 Building the channel details section
133 Building the related videos autoplay section
134 Building out the related videos
135 Building the comments heading section
136 Building the add comment form
137 Building out a list of comments
138 Building out the see response button
139 Adding the responses
140 Building related videos in landscape mode for mobile
141 Swapping comments and related videos
142 Building related videos in portrait mode for tablet
143 Building related videos in landscape mode for tablet
144 Building related videos on large devices
145 Adding the finishing touches
Conclusion
146 Congratulations
147 BONUS LECTURE- OTHER COURSES!!!!!
Resolve the captcha to access the links!