You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: html/lesson5/tutorial.md
+83-48Lines changed: 83 additions & 48 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,8 +20,7 @@ Download the files required to begin working through the tutorial from [here](ht
20
20
21
21
### Recap
22
22
23
-
In the previous lessons, we spoke about **H**yper **T**ext **M**arkup **L**anguage and **C**ascading **S**tyle **S**heets.
24
-
**HTML** defines the _structure_ of a website and **CSS** the _presentation_. We also discussed the box model, inline and block elements, pseudo clases and went into more details about CSS Layouts and formatting.
23
+
In the previous lessons we spoke about **H**yper **T**ext **M**arkup **L**anguage and **C**ascading **S**tyle **S**heets. Remember how **HTML** defines the structure of a website and **CSS** is the presentation. We also discussed the box model, inline and block elements, pseudo classes and went into more detail with CSS Layouts and formatting.
25
24
26
25
27
26
## Getting started
@@ -42,11 +41,11 @@ Also, set a title for your page
42
41
43
42
Before we continue any further, format the existing content of the html file to use paragraphs `<p>`
44
43
45
-
> Do you remember how to do that? Ask your coach to help you out if you are having any problems.
44
+
> If you do not remember, ask your coach to help you.
46
45
47
46
## Main styling
48
47
49
-
Set the font family and reset the padding and margin of the page
48
+
Set the font family and reset the padding and margin of the page.
50
49
51
50
```css
52
51
body {
@@ -56,11 +55,11 @@ body {
56
55
}
57
56
```
58
57
59
-
Let's wrap the contents in a `div` element with the id `wrapper` so we can tweak its dimensions and center it.
58
+
Let's wrap the contents of the page in a `div` element with the id `wrapper` so we can tweak its dimensions and center it.
60
59
61
60
> Did you remember to close the element you just added?
62
61
63
-
Style the wrapper
62
+
Let's style the wrapper
64
63
65
64
```css
66
65
#wrapper {
@@ -71,29 +70,25 @@ Style the wrapper
71
70
}
72
71
```
73
72
74
-
Try tweaking the style.
73
+
Try tweaking some of the styles that we just added to see what happens?
75
74
76
75
> Remove the `max-width` and reload the page
77
76
78
-
79
77
> Remove the `min-width` and try resizing the page
80
78
81
-
82
79
> Do you notice how the content no longer centers when removing the `margin` property? Ask your coach to explain why.
83
80
84
81
85
82
## Text shadow
86
83
87
-
Text shadow, adds a drop shadow to the header. This only works with CSS3 compatible browsers, so unless you are using a really [old browser](http://caniuse.com/css-textshadow) or IE9, you should be able to see the results.
88
-
89
-
The text-shadow property is formatted as follows:
84
+
Text shadow will add a drop shadow to the header. The text-shadow property is formatted as follows:
- horizonal-shadow is the length of the shadow along the x-axis
94
89
- vertical-shadow is the length of the shadow along the y-axis
95
90
- blur controls how much, if any, blur radius to add to the shadows. This is optional, but can look cool.
96
-
- color controls the color of the shadow. It is also optional
91
+
- color controls the color of the shadow. It is also optional.
97
92
98
93
### Style the header
99
94
@@ -106,7 +101,7 @@ h1 {
106
101
}
107
102
```
108
103
109
-
Tweak the text-shadow property, and add a blur of 2px
104
+
Let's tweak the text-shadow property by adding a 2px blur.
110
105
111
106
> Can you see the difference? Keep the version you like the most.
112
107
@@ -157,19 +152,17 @@ Things should be looking a bit better now, but the images are still too big! Set
157
152
}
158
153
```
159
154
160
-
Great! Now our images and links are on the left, and the main content on the right.
155
+
Great! Now our images and links are on the left, and our main content is on the right.
161
156
162
157
### Border-radius
163
158
164
-
[Border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements. In the past, multiple divs and the use of images was required to achieve that effect.
159
+
[Border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements.
165
160
166
161
Border radius can be defined in many different units - the higher the number, the bigger the curve. An example of border-radius in your code would be:
167
162
168
163
`border-radius: 10px;`
169
164
170
-
Now that we know what border radius is, let's use it to add a nice frame to the first image.
171
-
172
-
Wrap the first image in a `div` with the class `frame`
165
+
Let's add it so that it adds a nice frame to the first image. Wrap the first image in a `div` with the class `frame`.
173
166
174
167
```css
175
168
.frame {
@@ -181,14 +174,15 @@ Wrap the first image in a `div` with the class `frame`
181
174
}
182
175
```
183
176
184
-
As we only want the bottom right and bottom left corners to be rounded, we can be more specific when setting the border radius so it only applies to those corners.
177
+
If we only wanted the bottom right and bottom left corners to be rounded, we could be more specific when setting the border radius so it only applies to those corners.
185
178
186
179
```css
187
-
border-bottom-left-radius: 5px;
188
-
border-bottom-right-radius: 5px;
180
+
border-bottom-left-radius: 5px;
181
+
border-bottom-right-radius: 5px;
189
182
```
183
+
> Play around with border radius a little bit to see what effects you get.
190
184
191
-
Let's also round the corners of the second picture. First, let's add a class `rounded` to it.
185
+
Let's also round the corners of the second picture. First, let's add a class `rounded` to it then add the `border-radius`.
192
186
193
187
```css
194
188
.rounded {
@@ -200,9 +194,9 @@ Rounded corners look much nicer, don't you agree?
200
194
201
195
### Adding some subtle styling to the page
202
196
203
-
Small details make the difference.
197
+
Small details like this can make a big visual difference to your website.
204
198
205
-
Add a top and bottom border to the first image
199
+
Let's add a top and bottom border to the first image.
206
200
207
201
```css
208
202
#left-bar.frameimg {
@@ -212,21 +206,21 @@ Add a top and bottom border to the first image
212
206
}
213
207
```
214
208
215
-
Also add a top border to our page, to make it a bit more polished. Add this to the style of the `body`
209
+
Also add a top border to our page, to make it a bit more polished. Add this to the style of the `body` element.
216
210
217
211
```css
218
-
border-top: 5px solid #4c4066;
212
+
border-top: 5px solid #4c4066;
219
213
```
220
214
221
-
### Background
222
-
223
-
Background is not a new CSS property, but in CSS3 it had a lot more capabilities. You can set multiple background images, specify their dimension, position and attachment.
215
+
### Background images
224
216
225
-
To seta background you can use
217
+
You can seta background image to any element on your page. To do this you declare that it's the background you want to change then add a URL, which is the path to your image. Like so:
226
218
227
219
`background: url(path/to/image)`
228
220
229
-
to set multiple backgrounds, you simple need to specify them separating them by commas
221
+
You can also set multiple background images, specify their dimension, position and attachment. To set multiple backgrounds, you simple need to specify them separating them by commas.
You can also set different properties for your backgrounds, by defining them in a similar comma separated way.
@@ -254,7 +248,7 @@ background-size: 420px auto, auto 900px;
254
248
255
249
Awesome. Now we can see Anita'spicture properly.
256
250
257
-
But when we scroll, we don't want the background to change. To fix this, we must set the images as fixed. We can do that by specifying the `background-attachment` property
251
+
But when we scroll, we don't want the background to change. To fix this, we must set the images as fixed. We can do that by specifying the `background-attachment` property. Let's add:
258
252
259
253
```css
260
254
background-attachment: fixed, fixed;
@@ -345,7 +339,7 @@ By using `em` instead of `px` to set the font-size, we are keeping it relative t
345
339
346
340
Increase the `line-height` of all other paragraphs. We can do this with another very smart selector, The **not** selector.
347
341
348
-
The **not** selector, finds all elements who don't match the specified description, in our case, all paragraphs that don't have a class `about`
342
+
The **not** selector, finds all elements who don't match the specified description, in our case, all paragraphs that do not have an `about` class.
349
343
350
344
```css
351
345
p:not(.about) {
@@ -356,16 +350,16 @@ p:not(.about) {
356
350
### Anita's speech
357
351
358
352
The speech that we are using in our page, is titled **Where We Are And Where We Are Going**.
359
-
To make our content more clear, wrap the remaining paragraphs (all but the `about`) in a div with the class `speech`
353
+
To make our content more clear, wrap the remaining paragraphs (all but the `about` one) in a div with the class `speech`.
360
354
361
355
Also, add its title using an `h2` heading
362
356
363
-
> That should come right after you open up the `speech` div
357
+
> That should come right after you open up the `speech` div.
364
358
365
359
### Achievements
366
360
367
361
Anita had an amazing personality and was a person who contributed greatly to women in technology.
368
-
Let's list some of her achievements, just after the `about` paragraph
362
+
Let's list some of her achievements, just after the `about` paragraph.
369
363
370
364
```html
371
365
<div>
@@ -380,7 +374,7 @@ Let's list some of her achievements, just after the `about` paragraph
380
374
</div>
381
375
```
382
376
383
-
It's nice to use descriptive classes, so its easy for someone else looking at our code to understand what each section is about. Add a class `achievements` to the external `div` we just added.
377
+
It's nice to use descriptive classes, so that it's easy for someone else looking at our code to understand what each section is. Add a class `achievements` to the external `div` we just added.
384
378
385
379
Now that we have done that, let's try reseting the list style, so there are no bullets present, and no margin or padding.
386
380
@@ -397,7 +391,7 @@ So here is how we will be reseting the list styling. We don't want to only speci
397
391
}
398
392
```
399
393
400
-
Making it prettier
394
+
Let's make it look even better.
401
395
402
396
```css
403
397
.achievementsli {
@@ -408,10 +402,9 @@ Making it prettier
408
402
409
403
### CSS - Even and Odd rules, applying styling to alternate elements
410
404
411
-
We will finish off by styling every second child element of our list.
412
-
Thanks to some great CSS selectors, this is quite easy to do.
405
+
In this part we will apply a different style to every second child element of our list.
413
406
414
-
We can use
407
+
Thanks to the following great CSS selectors, this is quite simple to do.
415
408
416
409
`:nth-child(odd)` and `:nth-child(even)` to do that.
417
410
@@ -422,26 +415,68 @@ In our case, we only want to change the style of every odd row. Achieving that i
422
415
background-color: rgba(176, 175, 192, 0.2);
423
416
}
424
417
```
425
-
426
418
> Try changing odd to even
427
419
428
-
## But before we end our lesson
429
-
430
420
### RGB colors and opacity
431
421
432
-
As you may have noticed, in the last example, we didn't define the color as we usually do, using hex codes. Instead, we used **rgba**. This, enables us to define the opacity of a color as well.
422
+
As you may have just noticed, we didn't define the color as we usually do, using hex codes. Instead, we used **rgba**. This, enables us to define the opacity of a color as well.
433
423
434
424
`rgba(rgb code, opacity)`
435
425
436
-
437
426
`rgb(176, 175, 192);` is another way of defining the color with the hex code `#b0afc0`
438
427
439
-
You can find both the rgb and hex values of a color through[http://0to255.com](http://0to255.com).
428
+
A great way to find both the rgb and hex values of a color is[http://0to255.com](http://0to255.com).
440
429
441
430
> Try changing the last attribute of the `rgba` we just set.
442
431
> What happens when you set it to 1?
443
432
> What happens when you set it to 0?
444
433
434
+
### Bonus - Transitions
435
+
436
+
Let's take a **property** in our code and give it an animation on hover. We do this by adding a `:hover` to the element you want to effect on hover.
437
+
438
+
For this example we will give the two links named **btn** a different background on hover.
439
+
440
+
```css
441
+
a.btn:hover {
442
+
background: black;
443
+
}
444
+
```
445
+
446
+
> Can you see this change on your website?
447
+
448
+
We can now make this affect take place during a number of seconds by adding the `transition-duration` property.
449
+
450
+
```css
451
+
a.btn:hover {
452
+
background: black;
453
+
transition-duration: 1s;
454
+
}
455
+
```
456
+
457
+
> Change the duration time to see what happens?
458
+
459
+
Now let's add a delay property.
460
+
461
+
```css
462
+
a.btn:hover {
463
+
background: black;
464
+
transition-duration: 1s;
465
+
transition-delay: 1s;
466
+
}
467
+
```
468
+
469
+
If we wanted to even wilder with our on hover effect we could add a rotate:
470
+
471
+
```css
472
+
a.btn:hover {
473
+
transform: rotate(90deg);
474
+
transition-delay: 1s;
475
+
}
476
+
```
477
+
478
+
Woo, that's it for CSS transitions. If you have some time here is a [guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) where you can sit with your coach and dive a little deeper.
445
479
446
480
-----
481
+
447
482
This ends our fifth lesson, we hope you enjoyed it and learnt something. If you have some spare time how about going back through this tutorial and, by yourself, make some amendments. If there is something you did not understand or want to give us some feedback please [send us an email.](mailto:feedback@codebar.io)
0 commit comments