Урок 1.00:09:24
Introduction
Урок 2.00:04:59
What you need for this course. PLEASE WATCH!!
Урок 3.00:03:24
Rating this course. PLEASE ALSO WATCH
Урок 4.00:13:59
CSS Grid 101
Урок 5.00:02:29
Creating Grid Containers
Урок 6.00:08:39
Defining Rows and Columns
Урок 7.00:01:45
The grid property
Урок 8.00:03:28
Fixed and Percentage Track Sizing
Урок 9.00:03:59
Track Sizing based on Font Size
Урок 10.00:08:00
Track Sizing based on Viewport
Урок 11.00:05:47
Auto Track Sizes
Урок 12.00:10:15
The Fraction (fr) Unit
Урок 13.00:02:46
Fractions vs Auto
Урок 14.00:10:01
The minmax function
Урок 15.00:07:06
Minmax function gotchas
Урок 16.00:05:17
Understanding max-content and min-content
Урок 17.00:05:50
The fit-content function
Урок 18.00:06:13
The repeat function
Урок 19.00:05:44
Managing Grid Gaps
Урок 20.00:01:17
Nested grids
Урок 21.00:07:01
Reordering Grid Items
Урок 22.00:07:56
Moving Grid Items to different columns
Урок 23.00:07:07
Moving Grid Items to different rows
Урок 24.00:09:06
Moving Grid Items to non adjacent cells
Урок 25.00:09:59
Grid Item spanning basics
Урок 26.00:07:59
The span keyword
Урок 27.00:04:08
Grid Item spanning gotchas
Урок 28.00:05:50
Naming Grid Lines
Урок 29.00:07:20
Spanning Grid Items based on line names
Урок 30.00:04:59
Using multiple line names
Урок 31.00:04:05
Lines names and the repeat function
Урок 32.00:08:03
The grid-column property
Урок 33.00:05:19
The grid-row property
Урок 34.00:10:49
Positioning Grid Items using the grid-area property
Урок 35.00:06:26
Spanning Grid Items using the grid-area property
Урок 36.00:04:54
The grid property reviewed
Урок 37.00:06:09
Aligning Row Tracks
Урок 38.00:02:30
Aligning Column Tracks
Урок 39.00:04:57
The place-content property
Урок 40.00:03:30
Vertically Aligning Grid Items
Урок 41.00:02:29
Horizontally Aligning Grid Items
Урок 42.00:03:42
The place-items property
Урок 43.00:02:06
Vertically Aligning an Individual Grid Item
Урок 44.00:01:38
Horizontally Aligning an Individual Grid Item
Урок 45.00:02:43
The place-self property
Урок 46.00:11:53
A review on media queries
Урок 47.00:03:28
Setting viewport for mobile and tablet devices
Урок 48.00:08:42
Positioning Grid Items using areas
Урок 49.00:08:04
Spanning Grid Items using areas
Урок 50.00:01:39
Defining empty grid cells
Урок 51.00:02:19
Gotchas with grid-template-areas
Урок 52.00:09:08
Building responsive grids without media queries
Урок 53.00:08:03
The grid property reviewed again
Урок 54.00:06:02
Implicit vs explicit grids
Урок 55.00:02:48
An introduction to the Autoplacement Algorithm
Урок 56.00:07:14
Understanding Flow
Урок 57.00:07:51
Controlling Flow
Урок 58.00:04:28
Understanding order-modified document order
Урок 59.00:12:22
Understanding locking
Урок 60.00:12:32
Locking grid items
Урок 61.00:09:52
Locking and responsive web design
Урок 62.00:07:17
Locking and responsive web design in action
Урок 63.00:04:30
Understanding Grid Spans
Урок 64.00:08:11
Grid Spans in action
Урок 65.00:05:52
Understanding packing
Урок 66.00:03:37
Packing in action
Урок 67.00:14:48
Bringing it all together part 1
Урок 68.00:15:00
Bringing it all together part 2
Урок 69.00:10:45
The grid property and Autoplacement part 1
Урок 70.00:10:10
The grid property and Autoplacement part 2
Урок 71.00:06:51
The grid-template property
Урок 72.00:05:56
Absolute positioning
Урок 73.00:05:11
Animating grids
Урок 74.00:11:33
Simplifying Flexbox layouts with CSS Grid
Урок 75.00:11:45
More simplifying Flexbox layouts
Урок 76.00:13:14
When to use Flexbox over CSS Grid
Урок 77.00:13:20
Grid items and the box model
Урок 78.00:04:16
Building a 4 column layout
Урок 79.00:03:44
Building a sidebar
Урок 80.00:03:05
Vertically aligning text
Урок 81.00:04:40
Centering a modal dialog
Урок 82.00:04:32
Creating a sticky footer
Урок 83.00:12:18
Basic form formatting
Урок 84.00:11:44
The Holygrail layout
Урок 85.00:09:20
The Media Objects layout
Урок 86.00:06:28
A Viewport Friendly Image Gallery
Урок 87.00:05:32
Another Viewport Friendly Image Gallery
Урок 88.00:05:52
Animating a Sidebar
Урок 89.00:12:15
A Monthly Calendar
Урок 90.00:13:07
A Newspaper Cover
Урок 91.00:20:35
A Twitter Responsive Layout
Урок 92.00:12:04
A Responsive Movie Gallery
Урок 93.00:10:24
A Responsive Movie Gallery Continued
Урок 94.00:08:55
A Responsive Movie Gallery Finale
Урок 95.00:02:04
What we are building
Урок 96.00:15:51
Setting up the basic shell
Урок 97.00:04:31
Building the search conversation section
Урок 98.00:05:32
Building the add conversation section
Урок 99.00:05:29
Building the chat title section
Урок 100.00:06:44
Building the chat form section
Урок 101.00:11:02
Building an individual conversation item
Урок 102.00:05:51
Fixing conversation item sizing issues
Урок 103.00:03:05
Adding more conversation items
Урок 104.00:08:15
Creating some initial chat messages
Урок 105.00:06:15
Sizing and aligning chat messages
Урок 106.00:07:23
Adding chat profile pictures
Урок 107.00:01:24
Adding the finishing touches
Урок 108.00:05:51
What we are building
Урок 109.00:04:58
Setting up the basic layout for mobile
Урок 110.00:07:26
Building the top header
Урок 111.00:07:06
Defining the main content section layout
Урок 112.00:07:14
Building the search store section
Урок 113.00:11:53
Adding the delivery widget to the main section
Урок 114.00:13:13
Building the store list grid
Урок 115.00:11:01
Building the footer
Урок 116.00:03:39
Modifying the footer for landscape mode on mobile
Урок 117.00:03:16
Dealing with the store list on tablet
Урок 118.00:06:14
Dealing with the footer links on tablet
Урок 119.00:01:39
Dealing with the security section on tablet
Урок 120.00:02:06
Dealing with the store list on larger devices
Урок 121.00:16:10
Adding the delivery widget to the top bar
Урок 122.00:13:44
Ensuring a max width for the entire site
Урок 123.00:05:22
What we are building
Урок 124.00:10:25
Building the top bar
Урок 125.00:08:49
Building the mobile first layout
Урок 126.00:02:37
Building the thumbnail
Урок 127.00:03:13
Building the video title and views
Урок 128.00:11:57
Building the social interaction section
Урок 129.00:13:10
Building the channel details section
Урок 130.00:07:15
Building the related videos autoplay section
Урок 131.00:13:23
Building out the related videos
Урок 132.00:07:45
Building the comments heading section
Урок 133.00:06:01
Building the add comment form
Урок 134.00:15:16
Building out a list of comments
Урок 135.00:07:21
Building out the see response button
Урок 136.00:06:48
Adding the responses
Урок 137.00:09:07
Building related videos in landscape mode for mobile
Урок 138.00:04:42
Swapping comments and related videos
Урок 139.00:04:08
Building related videos in portrait mode for tablet
Урок 140.00:09:57
Building related videos in landscape mode for tablet
Урок 141.00:03:42
Building related videos on large devices
Урок 142.00:08:24
Adding the finishing touches
Урок 143.00:03:41
Congratulations