Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Mastering CSS Grid 2022 - With 3 cool projects, а также все другие курсы, прямо сейчас!
Премиум
  • Урок 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