In this tutorial I'll show you how to get through the HTML/CSS Building a Cafe Menu section on Free Code Camp that teaches you the basics of CSS and repeats a couple of HTML lessons from the previous section.
Do the exercises yourself on freecodecamp.org and refer to the walkthrough when you get stuck - btw, as the name suggests: freecodecamp is free to use.
Free Code Camp | https://www.freecodecamp.org/learn/2022/responsive-web-design/
-------------------------------------------------------------------
All my Free Code Camp Walkthroughs | https://www.youtube.com/playlist?list=PLJO7vAdVP8x0BF4qzwIk5OAmx71rVz8lQ
All my CSS tutorials | https://www.youtube.com/playlist?list=PLJO7vAdVP8x0n2RR2NLyHUa-PVtLydP1r
-------------------------------------------------------------------
Timestamps (steps 1-92 | task):
0:00 Intro
0:39 1 | DOCTYPE and html tags
1:15 2 | head and title tags
1:49 3 | meta information
2:50 4 | body tag
3:12 5 | h1 tag
3:33 6 | p tag
3:56 7 | header tag
4:29 8 | main tag
4:49 9 | section tag
5:08 10 | h2 tag
5:26 11 | style tag
6:03 12 | text-align property
7:13 13 | more text-align
8:03 14 | different way to select properties
8:38 15 | introduction to styles.css
9:17 16 | delete style tag
9:38 17 | link styles.css to index.html
10:47 18 | meta viewport
11:40 19 | background-color
12:18 20 | more background-colors
12:42 21 | div tag
13:09 22 | width property
13:49 23 | comments in CSS
14:43 24 | background-color for div tag
15:24 25 | relative values for properties
15:54 26 | margin
16:43 27 | classes
17:38 28 | adding classes to tags
18:21 29 | background image
19:07 30 | article tag
19:29 31 | two more p tags
20:05 32 | more article elements
21:16 33 | adding more classes to tags
21:49 34 | text-aling property
22:36 35 | adding more classes to tags
22:56 36 | more text-align properties
23:18 37 | block-level and inline elements
23:56 38 | targeting only elements of a certain class
24:56 39 | adjusting width values
25:49 40 | adjusting with values once more
26:17 41 | deleting spaces
26:49 42 | adjusting width again
27:04 43 | adding more classes again
27:40 44 | deleting more spaces
28:11 45 | adding more classes once more
28:53 46 | adjusting width values
29:43 47 | adding another section
30:06 48 | adding another h2
30:20 49 | adding another article
30:41 50 | adding more paragraphs
31:16 51 | adding classes to paragraphs
32:28 52 | adding properties to multiple classes
33:08 53 | adding more articles
34:02 54 | padding left and right
34:53 55 | padding top and bottom
35:16 56 | different way to use padding
35:33 57 | max-width
36:28 58 | font-family
37:01 59 | different font-families for different elements
37:55 60 | fallback font-families
38:25 61 | italic font-style
38:45 62 | adding class to header paragraph
39:09 63 | font-size
39:56 64 | footer tag
40:19 65 | paragraph and anchor tag
40:56 66 | add paragraph text
41:16 67 | hr tag
41:40 68 | hr height
42:11 69 | changing hr color
42:25 70 | changing hr border.color
42:46 71 | adjusting hr height
43:24 72 | adding another hr
43:48 73 | padding for body element
44:29 74 | margin for paragraphs
46:06 75 | changing font-size in paragraphs
46:48 76 | creating a new class
47:28 77 | adding new class to hr
48:01 78 | adding FOOTER comment
48:22 79 | changing font-size for footer
48:45 80 | changing color of links
49:23 81 | changing a:visited color
50:03 82 | changing a:hover color
50:26 83 | changing a:active color
50:52 84 | changing link colors again
51:15 85 | change margin for h1 element
52:09 86 | change margin for h1 some more
52:33 87 | create new class
53:11 88 | adding new class
53:51 89 | adding icon image
54:33 90 | change position of icon
55:42 91 | add another icon image
56:18 92 | using negative margins
56:55 Outro
-------------------------------------------------------------------
Music by Silent Partner
-------------------------------------------------------------------
Odyssey | https://odysee.com/$/invite/@michaelbrig:0
