Free Code Camp Walkthrough 8 | HTML/CSS - Building a Nutrition Label

Описание

In this tutorial I'll show you how to get through the HTML/CSS Building a Nutrition Label course on Free Code Camp.

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
-------------------------------------------------------------------
Timestamps (steps 1-66 | task):
0:00 Intro
0:21 1 | add heading
0:56 2 | add paragraph
1:13 3 | add another paragraph
1:28 4 | link fonts and css to html
2:28 5 | change font-family
3:11 6 | change font-size
3:29 7 | add label div
4:08 8 | add border to label
4:41 9 | change border width
5:03 10 | change padding of label
5:52 11 | change box-sizing
7:01 12 | change font-weight
7:35 13 | change text-align
7:55 14 | change margin
8:19 15 | remove margin for paragraphs
8:31 16 | create a divider div element
9:00 17 | add border to divider
10:15 18 | change letter-spacing
10:41 19 | make paragraphs bold
11:06 20 | adjust font-weight
11:43 21 | add bold class
11:54 22 | use span elements
12:24 23 | change float to float-right
12:52 24 | add header element
13:27 25 | select h1 header elements in css
14:02 26 | add large divider
14:43 27 | adjust large divider style
15:40 28 | adjust large and medium divider style
16:03 29 | create a new div container
16:33 30 | add bold small-text paragraph
17:17 31 | adjust font-size for small text
18:07 32 | add paragraph and style it
19:01 33 | adjust margin for div element
20:09 34 | adjust font-size for div span-element
21:01 35 | set overflow to hidden
21:37 36 | adjust margin for span-elements inside div
22:22 37 | add a new divider
23:09 38 | adjust medium class
23:37 39 | add paragraph and style it
25:15 40 | add another divider
25:54 41 | clear property for divider
26:20 42 | add another paragraph and style it
27:25 43 | add yet another paragraph and style it
28:16 44 | create indent class
28:43 45 | change margin for indent class
29:04 46 | adjust border-bottom
30:06 47 | add another paragraph and divider
30:34 48 | not pseudo-selector
32:48 49 | add another divider
33:34 50 | use i element
34:31 51 | add another divider
34:48 52 | add another paragraph and style
35:43 53 | add yet another paragraph and style it
36:22 54 | another paragraph
37:08 55 | yet another paragraph
37:58 56 | more paragraphs and dividers
38:36 57 | create double indent class
38:56 58 | style double-indent class in css
39:25 59 | another paragraph and divider
40:44 60 | yet another paragraph and divider
41:54 61 | and another paragraph
42:31 62 | (surprise) another paragraph
43:19 63 | (you guessed it) another paragraph
43:59 64 | final paragraph with a new class
44:40 65 | styling the new class
45:05 66 | adjusting text-indent for new class
45:38 Outro
-------------------------------------------------------------------
Music by Silent Partner
-------------------------------------------------------------------
Odyssey | https://odysee.com/$/invite/@michaelbrig:0