Check out the full finished code on my codepen!
00:00:00 – INTRO
00:01:36 – Step 01 – Document Type Declaration
00:03:28 – Step 02 – Head and Title
00:04:06 – Step 03 – Charset Declaration
00:05:41 – Step 04 – Body Element
00:06:14 – Step 05 – H1 Element
00:07:13 – Step 06 – P Element
00:07:50 – Step 07 – Header Element
00:08:57 – Step 08 – Main Element
00:09:30 – Step 09 – Section Element
00:10:21 – Step 10 – H2 Element
00:10:47 – Step 11 – Style Element
00:11:40 – Step 12 – FIRST CSS CODE
00:14:24 – Step 13 – More CSS
00:15:24 – Step 14 – Grouping Selectors
00:16:26 – Step 15 – Styles.css
00:18:15 – Step 16 – Removing the Style Element
00:18:50 – Step 17 – Linking the Stylesheet
00:20:56 – Step 18 – Getting Display Width
00:22:34 – Step 19 – Background-color
00:23:49 – Step 20 – Changing background-color
00:23:35 – Step 21 – Div Element
00:26:09 – Step 22 – Div Width
00:27:47 – Step 23 – CSS Comments
00:28:55 – Step 24 – Div Background
00:30:04 – Step 25 – Relative Size
00:31:39 – Step 26 – Centring the DIV
00:32:57 – Step 27 – Adding a Class Selector
00:34:16 – Step 28 – Adding a Class to the DIV
00:35:10 – Step 29 – Adding a background Image in CSS
00:36:31 – Step 30 – Adding an Article
00:37:03 – Step 31 – The First Menu Item
00:37:54 – Step 32 – Adding more Coffees
00:39:44 – Step 33 – Adding a Flavor Class Name
00:40:32 – Step 34 – Left Aligning Text
00:41:00 – Step 35 – Adding Price Class Name
00:41:18 – Step 36 – Right Aligning Text
00:41:49 – Step 37 – Adding Item Class Name
00:42:44 – Step 38 – Nested Selectors
00:43:57 – Step 39 – Adjusting Width
00:44:41 – Step 40 – Adjusting the Width again
00:45:34 – Step 41 – Adjusting Code to have no spaces
00:46:08 – Step 42 – Adjusting the Width one more time…
00:46:40 – Step 43 – Adding the class to other elements
00:47:15 – Step 44 – Adjusting the code to have no spaces…. again
00:47:53 – Step 45 – Adding Flavor and price class names
00:48:38 – Step 46 – Adjusting the width again to get it just perfect!
00:49:53 – Step 47 – Adding the next Section
00:50:26 – Step 48 – Add a second H2
00:50:48 – Step 49 – Add more articles
00:51:37 – Step 50 – Adding our first Dessert
00:52:18 – Step 51 – Adding Classes to our Dessert
00:53:09 – Step 52 – Grouping CSS Selectors
00:54:33 – Step 53 – Adding more Desserts
00:55:41 – Step 54 – Padding left and right
00:56:48 – Step 55 – Padding top and bottom
00:57:18 – Step 56 – Condensing padding to one line
00:57:47 – Step 57 – max-width
00:58:42 – Step 58 – font-family
00:59:19 – Step 59 – Adding specific font
01:00:34 – Step 60 – Fallback fonts
01:01:14 – Step 61 – font-style attributes
01:01:57 – Step 62 – Established class
01:02:14 – Step 63 – Styling headers
01:02:59 – Step 64 – Add a footer element
01:03:23 – Step 65 – Footer text
01:04:38 – Step 66 – Adding address to the footer
01:05:11 – Step 67 – Adding a horizontal line
01:05:49 – Step 68 – Style the horizontal line
01:06:17 – Step 69 – Horizontal Line Background color
01:06:40 – Step 70 – Horizontal line border
01:07:11 – Step 71 – Adjusting the height
01:07:42 – Step 72 – Add another HR element
01:08:06 – Step 73 – Add some Padding
01:08:31 – Step 74 – Adjusting Line Spacing
01:09:25 – Step 75 – Item font size
01:09:59 – Step 76 – More space adjustments
01:10:44 – Step 77 – bottom-line class
01:11:02 – Step 78 – Styling the footer
01:12:01 – Step 79 – Footer text size
01:12:25 – Step 80 – Link Color
01:13:09 – Step 81 – Pseudo Selectors in CSS
01:13:52 – Step 82 – More Pseudo Selectors
01:14:33 – Step 83 – Active Pseudo Selector
01:15:04 – Step 84 – Adjusting the link colors
01:15:26 – Step 85 – Remove top margin from h1
01:15:56 – Step 86 – Remove bottom margin
01:16:20 – Step 87 – Adjusting bottom margin in footer
01:16:56 – Step 88 – Apply the class to the element
01:17:17 – Step 89 – Adding a coffee icon
01:18:10 – Step 90 – Centring the image
01:19:01 – Step 91 – Add a dessert icon
01:19:32 – Step 92 – Adding a negative Margin
01:20:48 – Finished!