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

Kalob Taulien, Web Development Teacher

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
81 students are watching this class

Project Description

a1704683

There are several projects in this course. There are also a few "Mini Projects" that are just smaller, bite-sized projects create to give you immediate practice with your new skills. 

We'll create our own website, a bunch of animations, a handful of transitions, we'll transform elements like crazy, get our hands dirty with flexbox and lastly we'll create a fully responsive website from scratch using Flexbox and media queries.. like how the experts do it!

The project file you can download is the source code for every single lesson, all the projects and all the project solutions. Follow along to the best of your ability.. or skip past modules you already know about! 

(P.S. Here's the free e-book I promised in an early lesson)

Resources(1)

Student Projects

project card
Oshain Hudson
1 comment
project card
Me Coding
1 comment
project card
1 comment
project card
Kristaps Buls
5 comments
project card
Bogumila R
project card
Lucas Puglielli
15 comments
project card
Lizz Soup
9 comments
project card
David Dorè
1 comment
project card
8 comments
project card
1 comment
project card
19 comments
project card
Winna Ebimalo
1 comment
project card
Franz Joseph
2 comments
project card
Mieke V.