CSS Masterclass: the only CSS course you'll ever need to take. - Skillshare

CSS Masterclass: the only CSS course you'll ever need to take.

Kalob Taulien, Premium web development instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
176 Lessons (12h 49m)
    • 1. Welcome

      2:27
    • 2. Introduction To CSS

      2:08
    • 3. Syntax Introduction

      3:12
    • 4. Editors

      2:12
    • 5. How to Ask Good Questions

      3:29
    • 6. Inline CSS

      3:26
    • 7. Internal CSS

      3:46
    • 8. External CSS

      9:13
    • 9. Color Types

      10:03
    • 10. Background Colors

      4:13
    • 11. Background Images

      4:29
    • 12. Repeating Background Images

      3:06
    • 13. Borders

      8:55
    • 14. The Box Model

      5:06
    • 15. Padding

      5:23
    • 16. Margin

      4:38
    • 17. Centering an Element

      4:04
    • 18. Style This Form Using Only CSS

      1:40
    • 19. Solution To Mini Project Style This Using Only CSS

      6:56
    • 20. Outline

      2:54
    • 21. Cursor

      2:41
    • 22. Text Color

      2:05
    • 23. Text Align

      4:30
    • 24. Text Decoration

      6:31
    • 25. Text Transform

      3:23
    • 26. Text Indent

      2:22
    • 27. Letter Spacing

      4:04
    • 28. Line Height

      3:32
    • 29. Text Direction

      3:21
    • 30. Word Spacing

      3:30
    • 31. Fonts: Serif vs Sans Serif

      3:31
    • 32. Font Family

      5:35
    • 33. Lots Of Free Custom Fonts

      4:16
    • 34. Font Style

      3:35
    • 35. Font Size

      4:46
    • 36. Font Weight

      6:18
    • 37. Font Variant

      2:34
    • 38. Font Awesome

      6:02
    • 39. Links

      2:07
    • 40. Links: Hover

      1:56
    • 41. Links: Visited

      1:48
    • 42. Links: Active

      2:32
    • 43. Groupong Selectors

      5:43
    • 44. Descendant Selectors and Specificity

      7:51
    • 45. Child Selectors

      4:33
    • 46. Adjacent Selectors

      3:44
    • 47. List Style

      5:23
    • 48. List Style Position

      2:01
    • 49. List Style Image

      1:28
    • 50. Tables

      1:52
    • 51. Table Borders

      1:46
    • 52. Table Cell Vertical Align

      1:21
    • 53. Table Row Hover Effect

      2:16
    • 54. Mini Project: Style This Table

      1:13
    • 55. Mini Project Solution: Style This Table

      8:15
    • 56. Display Introduction

      1:55
    • 57. Display Block

      2:14
    • 58. Display Inline

      2:44
    • 59. Display Inline Block

      2:53
    • 60. Display None

      2:21
    • 61. Sizing Width

      3:09
    • 62. Sizing Height

      2:53
    • 63. Position Introduction

      1:12
    • 64. Position Relative

      3:01
    • 65. Position Absolute

      5:58
    • 66. Position Fixed

      6:38
    • 67. Overlapping Elements with z-index

      7:08
    • 68. Overflow Introduction

      0:54
    • 69. Overflow Scroll

      2:29
    • 70. Overflow Auto

      0:58
    • 71. Overflow Hidden

      2:49
    • 72. Float Introduction

      1:42
    • 73. Float Left and Right

      4:52
    • 74. Clear

      5:01
    • 75. Clearfix Hack

      3:45
    • 76. Opacity

      7:18
    • 77. Advanced Selectors Introduction

      0:59
    • 78. Advanced Selectors Attributes

      4:48
    • 79. Advanced Selectors Exact Value

      3:59
    • 80. Advanced Selectors Contains Value

      4:14
    • 81. Advanced Selectors Starts With

      4:24
    • 82. Advanced Selectors Ends With

      3:48
    • 83. Pseudo Selectors Introduction

      1:31
    • 84. Pseudo Selectors Hover

      5:55
    • 85. Pseudo Selectors First Child

      4:44
    • 86. Pseudo Selectors Last Child

      3:34
    • 87. Pseudo Selectors Focus

      3:57
    • 88. Pseudo Selectors Checked

      6:11
    • 89. Pseudo Selectors Disabled

      3:26
    • 90. Pseudo Selectors Enabled

      1:57
    • 91. Pseudo Selectors Not

      7:57
    • 92. Pseudo Selectors Before

      8:04
    • 93. Pseudo Selectors After

      9:04
    • 94. Project Use What You've Learned

      3:11
    • 95. Project Solution Use What You've Learned Part 1

      10:10
    • 96. Project Solution Use What You've Learned Part 2

      9:44
    • 97. Project Solution Use What You've Learned Part 3

      8:38
    • 98. CSS Summary

      3:59
    • 99. CSS3 Introduction

      1:54
    • 100. Border Radius

      3:04
    • 101. Round Images

      3:12
    • 102. Individually Rounded Corners

      3:49
    • 103. Background Sizes

      6:40
    • 104. Two Background Images

      3:04
    • 105. Colors RGBA

      4:27
    • 106. Colors HSL and HSLA

      3:39
    • 107. Opacity vs Alpha

      5:55
    • 108. Linear Gradients

      6:49
    • 109. Linear Gradients Color and Transparency

      3:42
    • 110. Repeating Linear Gradients

      3:25
    • 111. Radial Gradients

      4:05
    • 112. Repeating Radial Gradients

      3:02
    • 113. Gradient Tools

      4:15
    • 114. Shadows Introduction

      1:02
    • 115. Text Shadows

      4:55
    • 116. Box Shadows

      5:54
    • 117. Mini Project: Creating A Card

      10:03
    • 118. Text Introduction

      1:54
    • 119. Text Overflow

      5:42
    • 120. Word Wrap

      2:32
    • 121. Word Break

      3:12
    • 122. Text Align Last

      3:07
    • 123. Custom Fonts

      6:05
    • 124. Transition Introduction

      1:52
    • 125. Transitioning Sizes

      5:59
    • 126. Transitioning Colors

      4:33
    • 127. Transition Timing Functions

      7:36
    • 128. Transition Delay

      2:38
    • 129. Transform Introduction

      1:41
    • 130. Transform Translate

      6:57
    • 131. Transform Rotate

      3:47
    • 132. Transform Scale

      4:30
    • 133. Transform Skew

      3:09
    • 134. Multiple Transformations

      3:42
    • 135. 3D Transformations

      4:49
    • 136. Animation Introduction

      1:36
    • 137. Animation Keyframes

      3:43
    • 138. First Animation

      8:15
    • 139. Animation Fill Mode

      1:30
    • 140. Blinking Animation

      2:58
    • 141. Animation Iteration Count

      3:35
    • 142. Animation Delay

      1:35
    • 143. Animation Direction

      4:48
    • 144. Animation Timing Function

      3:36
    • 145. Animation Mini Project

      1:52
    • 146. Animation Mini Project Solution

      7:48
    • 147. Misc. Columns

      4:39
    • 148. Misc. Resize

      3:16
    • 149. Box Sizing

      6:49
    • 150. Flexbox Introduction

      4:42
    • 151. Flexbox Equal Sized Columns

      9:54
    • 152. Flexbox Order

      3:24
    • 153. Flexbox Rows and Columns

      2:56
    • 154. Flexbox Rows and Columns in Reverse

      2:43
    • 155. Flexbox Basis

      6:02
    • 156. Flexbox Wrap

      4:29
    • 157. Flexbox Vertical Alignment

      4:47
    • 158. Flexbox Align Items

      5:56
    • 159. Flexbox Justify Content

      4:46
    • 160. Flexbox Align Self

      4:40
    • 161. Flexbox Align Content

      6:07
    • 162. Flexbox Layout Project Getting Setup Part 1

      10:37
    • 163. Flexbox Layout Project Body Styling Part 2

      6:04
    • 164. Flexbox Layout Project RWD Part 3

      9:52
    • 165. Responsive Web Design (RWD) Introduction

      3:53
    • 166. Responsive Web Design (RWD) Meta Tag

      3:49
    • 167. Responsive Web Design (RWD) A Quick Demo

      5:56
    • 168. Responsive Web Design (RWD) Responsive Layout with Flexbox Part 1

      7:08
    • 169. Responsive Web Design (RWD) Responsive Layout with Flexbox Part 2

      7:57
    • 170. Responsive Web Design (RWD) Print

      4:05
    • 171. Responsive Web Design (RWD) Multiple Media Queries

      5:56
    • 172. Responsive Web Design (RWD) Responsive Images

      2:57
    • 173. Responsive Web Design (RWD) Responsive iFrames

      6:03
    • 174. Responsive Web Design (RWD) Summary

      4:08
    • 175. Summary What to Learn Next

      4:29
    • 176. Course Summary

      6:39
66 students are watching this class