This repository has been archived by the owner on Dec 9, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 44
/
Copy pathindex.html
executable file
·1615 lines (1465 loc) · 83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ladies Learning Code - HTML + CSS</title>
<meta name="viewport" content="width=1280">
<!-- CoderDeck core and extension CSS files -->
<link rel="stylesheet" href="src/deck.js/core/deck.core.css" type="text/css">
<link rel="stylesheet" href="src/deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="src/deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="src/deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="src/deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="src/css/prettify.css">
<link rel="stylesheet" href="src/css/deck.coder.css">
<link rel="stylesheet" href="src/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="src/codemirror/theme/default.css">
<link rel="stylesheet" href="src/prism.css">
<!-- Custom for LLC -->
<link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="src/css/llc.css" type="text/css">
<!-- <link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" > -->
<style type="text/css">
</style>
<script type="text/javascript">
function showHint(answerContainerId) {
var preTags = document.getElementById(answerContainerId).style.display = "block";
}
</script>
</head>
<body class="deck-container">
<script type='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<script src='src/jquery.min.js'>SCRIPTEND</head>
<body>CODE</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-style-example'>
<html>
<title>test</title>
<style>CODE</style>
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<p>Pargraph of text <p> here</p>
<div class='stuff'>I'm a div <div> with class "stuff"</div>
<div id='my-div'>I'm a <div> with id "my-div"</div>
</body>
</html>
</script>
<div id="presentation">
<!-- **************************************** -->
<!-- SLIDE: Workshop intro -->
<article class='slide slide-title'>
<div class="workshop_title">
<h1>
Introduction to<br />
HTML & CSS
</h1>
</div>
</article>
<!-- SLIDE: Today's project -->
<article class='slide slide-list'>
<h2>Today's Project</h2>
<img src="assets/project_screenshot.jpg">
<p><a href="http://pchen.github.io/LLC-HTML-CSS/Project/final.html" target="_blank">Click here</a> to see the whole project</p>
</article>
<!-- SLIDE 2: Course Outline -->
<article class='slide slide-list'>
<h2>Course Outline</h2>
<h3>Morning</h3>
<ul>
<li>Intro to HTML</li>
<li>Write the HTML for your project</li>
<li>Intro to CSS</li>
</ul>
<h3>Afternoon</h3>
<ul>
<li>More CSS</li>
<li>Final touches</li>
<li>Fin! And next steps</li>
</ul>
<br>
<h3>Help along the way</h3>
<p><span class="icon-tip">Tips and hints</span><br>
<span class="icon-note">Extra resources, additional information</span><br>
<span class="icon-warning">Gotchas and warnings</span></p>
</article>
<!-- SLIDE 3: Set up -->
<article class='slide slide-list'>
<h2>Let's get set up</h2>
<p>You should have already downloaded the following:</p>
<ul>
<li>
<strong>Sublime Text</strong> (<a href="http://www.sublimetext.com/">link</a>) - a text editor with colour highlighting and other helpful features.<br>
<span class="sidenote">If you are unable to install Sublime Text, try installing: <a href="http://notepad-plus-plus.org/download/">Notepad++ (Windows)</a> <b>or</b> <a href="http://www.barebones.com/products/textwrangler/">TextWrangler (Mac)</a>.</span>
</li>
<li>
<strong>Google Chrome</strong> (<a href="https://www.google.com/intl/en/chrome/browser/">link</a>) - Choose a modern web browser that supports current web standards and has good development tools. It's best to set a modern browser as your <em>default</em> browser. <a href="https://support.google.com/chrome/answer/95417?hl=en">Instructions here</a>.<br>
<span class="sidenote">Another good option is <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>. Visit <a href="http://browsehappy.com/">browsehappy.com</a> for more info about modern browsers.</span>
</li>
<li>
<strong>Today's slides and files</strong> (<a href="https://github.com/pchen/LLC-HTML-CSS">link</a>) - Grab the files by clicking the <strong>Download Zip</strong> button on the bottom right of the page. To open the slides, unzip the folder (on Windows, right click and select <strong>Extract All</strong>). Right click on <code>index.html</code> or <code>index</code> and <strong>Open in Chrome</strong>.
</li>
</ul>
<p class="icon-warning">This presentation requires a modern browser.</p>
</article>
<!-- SLIDE 4: Opening HTML files in your browser -->
<article class='slide slide-list'>
<h1>Opening HTML files in your browser</h1>
</article>
<!-- SLIDE 5 -->
<article class='slide slide-list'>
<h2>First, what is a browser?</h2>
<p>The browser's main functionality is to present the <em>web resource</em> you choose, by requesting it from the server and displaying it in the browser window.</p>
<p>The <em>web resource</em> is usually an HTML document, but may also be a PDF, image, or other type.<p>
</article>
<!-- SLIDE 6 -->
<article class='slide slide-list'>
<h2>What is an HTML document?</h2>
<p>Let's check out an example. Go to <a href="http://ladieslearningcode.com">http://ladieslearningcode.com</a>. Right-click and select <strong>View Page Source</strong>. That's HTML.</p>
<p>We'll be learning to write our own HTML today. But first, let's open an HTML document (like the ones we'll create later) in our browser.</p>
<ol>
<li>Open Sublime Text and go to <strong>File > Open</strong>.</li>
<li>Navigate to the <strong>Project</strong> folder (in the folder you downloaded with today's slides).</li>
<li>With the <em>entire</em> folder selected, click <strong>Open</strong>.</li>
<li>Now that the folder is open in Sublime, click on <code>blank.html</code> so that it fills the screen. Now, right click and select <strong>Open in Browser</strong>.<br>
<span class="icon-tip">(If your default browser isn't set to Chrome, <a href="https://support.google.com/chrome/answer/95417?hl=en">here are the instructions</a>.)</span></li>
</ol>
</article>
<!-- SLIDE 7 -->
<article class='slide slide-list'>
<h2>You should see something like this:</h2>
<div class="centered">
<img src="assets/blank_output.jpg">
</div>
</article>
<!-- SLIDE 8 -->
<article class='slide slide-list'>
<h1>Now, let's make a change to our file and re-open it in our browser.</h1>
</article>
<!-- SLIDE 9 -->
<article class='slide slide-list'>
<h2>Dive back in to Sublime Text</h2>
<ol>
<li>Try changing something, like the text within the <code><p></code><code></p></code> tags.</li>
<li>Save your file using <strong>File > Save</strong>, or use keyboard shortcuts (<strong>CMD + S</strong> or <strong>CONTROL + S</strong>)</li>
<li>Right click and select <strong>Open in Browser</strong>.</li>
<li>Change something else and open it in your browser again, just to make sure you've got it!</li>
<li>After saving, you can also just refresh your browser to see the changes (rather than opening your file in a new tab every time).</li>
</ol>
<p class="icon-tip">Find a work flow that works best for you when making frequent changes. I like to use keyboard shortcuts to save my files in the editor (CTRL/CMND + S). Then I open my file in the browser once and simply refresh it (CTRL/CMND + R) after saving my edits to view the changes in the browser.</p>
</article>
<!-- SLIDE 10: You won't break anything -->
<article class='slide slide-list'>
<h2>Don't be scared about breaking anything or doing something wrong. Play around, take risks, experiment and make mistakes. That's the best way to learn.<br><br>
And remember, ask a mentor (or Google) for help!</h2>
</article>
<!-- Slide 11 -->
<article class='slide slide-subhead'>
<h1>What are HTML & CSS?</h1>
</article>
<!-- Slide 12 -->
<article class='slide slide-subhead'>
<h1>Let's start with HTML</h1>
<p>The content layer</p>
</article>
<!-- Slide 13 -->
<article class='slide slide-list'>
<h2>HTML (HyperText Markup Language) is what webpages are made out of.</h2>
<p>HTML is used to describe each part of a webpage to the browser. To display content properly in the browser, we use <i>tags</i>. Here are a few examples of common HTML <i>tags</i>:</p>
<ul>
<li><code><h1></code> and <code></h1></code></li>
<li><code><p></code> and <code></p></code></li>
<li><code><strong></code> and <code></strong></code></li>
</ul>
<p>For the browser to recogize these tags as HTML, we need to create an HTML file.<!--, you need to have <strong>.html</strong> at the end of the file name (similar to <strong>.pdf</strong> at the end of PDF documents).--></p>
</article>
<!-- Slide 14 -->
<article class='slide slide-list'>
<h2>Good file naming habits</h2>
<p>To create an HTML web page, just name your file using the <code>.html</code> extension (much like .pdf for PDF files or .doc for Word files).</p>
<ul>
<li>
Use lowercase letters.<br>
<span class="sidenote"><code>about.html</code> instead of <code>About.html</code> or <code>ABOUT.html</code></span>
</li>
<li>
Avoid <strong>s p a c e s</strong>. Use underscores (<code>_</code>) or dashes (<code>-</code>). Dashes are generally preferred for SEO (search engine optimization).<br />
<span class="sidenote"><code>business_hours.html</code> or <code>business-hours.html</code> instead of <code>business hours.html</code><br />
(The browser will interpret it as <code>business%20hours.html</code>)</span>
</li>
<li>Avoid symbols like <code># & *</code> in your file name.</li>
<li>
Keep your file names concise, yet meaningful.<br />
<span class="sidenote"><code>about.html, contact.html</code> instead of <code>page1.html, page2.html</code></span>
</li>
</ul>
<p class="icon-tip">These file naming tips can be applied to any type of files such as images, folders, CSS, etc.</p>
</article>
<!-- slide 15 -->
<article class='slide slide-list'>
<h2>Quick exercise: Saving a new file as an HTML file</h2>
<ol>
<li>In Sublime Text, click <strong>File > New File</strong></li>
<li>By default, the file type is <em>plain text</em>, not HTML.
You have two choices for saving this file as an HTML file.</li>
<ul>
<li><em>Option 1:</em> On the bottom right corner, you should see the words <strong>Plain Text</strong>. Click it and select <strong>HTML</strong> from the list. Save the file using <strong>CMD + S</strong> or <strong>CONTROL + S</strong>. Name it anything but be sure it ends with <code>.html</code>. You can save the file anywhere - we won't be using it for anything else.</li>
<li><em>Option 2:</em> From the menu bar, select <strong>File > Save As</strong>. Give your file a name and add <code>.html</code> at the end. Click <strong>save</strong>. </li>
</ul>
</ol>
</article>
<!-- slide 16 -->
<article class='slide slide-list'>
<h2>The Nuts and Bolts of HTML</h2>
<p>When writing HTML, we create HTML <i>elements</i> by wrapping our content in <i>tags</i>. These <i>tags</i> describe the content that is inside of them, NOT what they look like.</p>
<p>For example, the paragraph tag (<code><p></code>paragraph content<code></p></code>) is used to describe the content <em>in between</em> as being a paragraph, not it's color or any other style.</p>
<p>We use different kinds of tags to create multiple elements and all together they make up our <i>HTML Document</i>.</p>
<p>It is important to understand that HTML has very little to do with the style of your website or the <em>look</em> of the content - that is what CSS is for.</p>
</article>
<!-- slide 17 -->
<article class='slide slide-list'>
<h2>Tags that you should no longer use!</h2>
<p>It’s very important to create <a href="http://boagworld.com/dev/semantic-code-what-why-how/">semantic</a>, clean and <a href="http://validator.w3.org/about.html">valid markup</a> before doing anything else. Older versions of HTML used to include tags that were used for defining styles, which is now handled with CSS instead.</p>
<p>Here are a few examples of old tags that are <strong>no longer used</strong>:</p>
<ul>
<li><u>I'm underlined!</u></li>
<li><marquee>Anyone remember the marquee tag?</marquee></li>
<li><font size="large">HUGE FONTS!</font></li>
<li><center>I'm centered text!</center></li>
<li><b>I'm Bold text!</b><code>*</code></li>
<li><i>I'm Italic!</i><code>*</code></li>
</ul>
<p class="icon-note">Different versions of HTML often have different rules. In HTML5, the <code><b></code> and <code><i></code> tags were re-introduced but with a slightly different meaning. More info <a href="http://html5doctor.com/i-b-em-strong-element/">here</a>.</p>
</article>
<!-- slide 18 -->
<article class='slide slide-subhead'>
<h1>Speaking of CSS...</h1>
<p>It makes the web pretty.</p>
</article>
<!-- slide 19 -->
<article class='slide slide-list'>
<h2>What is CSS?</h2>
<p>CSS (Cascading Style Sheets) is the presentation layer. In other words, it makes websites look nice.</p>
<p>HTML tells the browser what different parts of the page <em>mean</em>, CSS tells the browser what those parts should <em>look</em> like.</p>
<p>For example, <code>p</code> means paragraph in HTML. But if we wanted to make all of our paragraphs red and underlined, in CSS we'd do something like this:</p>
<pre><code class="language-css">p {
color: red;
text-decoration: underline;
}
</code></pre>
</article>
<!-- slide 20 -->
<article class='slide slide-list'>
<h2>Your first web page</h2>
<p>Let's add the previous slide's CSS snippit to our HTML document.</p>
<p>To indicate that we're adding CSS to <code>blank.html</code>, we need to find the opening and closing <code><style></code> tags between our <code><head></code> tags.</p>
<pre class="language-markup"><code><!doctype html>
<head>
<title>Ladies Learning Code HTML and CSS</title>
<style>
p {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
</code></pre>
<p class="icon-tip">Don't forget to save and refresh the browser!</p>
</article>
<!-- slide 21 -->
<article class='slide slide-subhead'>
<h1>Ta-da!</h1>
<p>You just created your first website.<br><br>
HTML + CSS = website</p>
</article>
<!-- slide 22 -->
<article class='slide slide-list'>
<h2>A note about HTML and CSS</h2>
<p>HTML and CSS are different languages so they each have different sets of rules. It takes time to learn these languages, just like French, Spanish, etc. Don't worry if you don't get it all right away.</p>
<p>Also, just like the languages that we speak and write, HTML & CSS has to follow proper "grammar" rules as well. This is referred to as <em>syntax</em>.</p>
</article>
<!-- SLIDE 23: Websites with CSS -->
<article class='slide slide-list'>
<h2>Websites with CSS</h2>
<img src="assets/llc_site_with_css.jpg">
</article>
<!-- SLIDE 24: Websites without CSS -->
<article class='slide slide-list'>
<h2>Websites without CSS</h2>
<p>The previous example looks like this <em>without</em> CSS. You can now only see the <em>content</em>, not the <em>styles</em>.</p>
<img src="assets/llc_site_without_css.jpg">
</article>
<!-- SLIDE 25 -->
<article class='slide slide-subhead'>
<h1>Recap</h1>
<p>HTML defines <strong>content</strong>.<br><br>
CSS defines the <strong>look and layout</strong>.</p>
</article>
<!-- SLIDE 26 -->
<article class='slide slide-subhead'>
<h1>Going Deeper with HTML</h1>
<p>Writing HTML <i>markup</i><br><br>
<span class="sidenote">(You can remove the CSS we added <em>between</em> <code><style></code> and <code></style></code> for now but keep the tags there!)</span></p>
</article>
<!-- SLIDE 27: HTML -->
<article class='slide slide-list'>
<h2>HTML tags</h2>
<p>The <em>structure</em> of a web page is defined by HTML <i>tags</i>. Left & right angled brackets (<strong>shift</strong> + <strong>< </strong> and <strong>shift</strong> + <strong> > </strong>) surround the tag name like this:</p>
<div class="centered">
<p><code class="large"><tag></code></p>
<p><img src="assets/house_beam.jpg" width="300" height="232" alt="house beam" /></p>
<p class="sidenote">Think about HTML tags like the beams of a house. It's what holds up a web page creates structure.</p>
</div>
</article>
<!-- SLIDE 28: HTML -->
<article class='slide slide-list'>
<h2>HTML tags</h2>
<p>Tags typically come in <strong>pairs</strong> — an opening tag and a closing tag with a forward slash:</p>
<p class="centered"><code class="large"><tag><<span style="color:red;">/</span>tag></code></p>
<p class="sidenote">Some examples that you've already seen:</p>
<pre class="language-markup"><code><!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
</code></pre>
</article>
<!-- SLIDE 29: HTML -->
<article class='slide slide-list tags-nesting'>
<h2>HTML tags: nesting</h2>
<p>Tags can also be <i>nested</i> within other tags.</p>
<p class="centered"><code><tag><span class="nested"><tag></tag></span></tag></code> </p>
<p>Here are the HTML tags that are required for a basic web page. Let's take a closer look at how they are nested.</p>
<div class="column-2">
<pre class="prettyprint"><!DOCTYPE html>
<strong><html></strong>
<head>
<title> </title>
</head>
<body>
</body>
<strong></html></strong></pre>
</div>
<div class="column-2">
<pre class="prettyprint"><!DOCTYPE html>
<html>
<strong><head></strong>
<title></title>
<strong></head></strong>
<strong><body></strong>
<strong></body></strong>
</html></pre>
</div>
</article>
<!-- SLIDE 30: HTML -->
<article class='slide slide-list tags-nesting'>
<h2>HTML tags: nesting</h2>
<p>Nested elements make up the <i>document tree</i> & the relationships are just like a family tree; branches of ancestors, parents, children, siblings, etc.</p>
<pre class="language-markup"><code><!DOCTYPE html>
<html>
<head><!-- child of <strong>html</strong> tag, parent of <strong>title</strong> tag -->
<title></title>
</head>
<body><!-- child of <strong>html</strong> tag -->
</body>
</html></code></pre>
<ul>
<li>
<code><html></code> is always first and known as the <i>root</i> node. It has <strong>no</strong> parent nodes.<br> All other HTML tags are nested within <code><html></code>.
</li>
<li>
<code><head></code> is the child of <code><html></code> and the parent node of the <code><title></code> tag.
</li>
<li>
What is the relationship of <code><title></code> to the <code><head></code> tag?
</li>
<li>
What is the relationship between the <code><head></code> and <code><body></code> tags</code>?
</li>
</ul>
<p class="icon-tip">Whitespace through indentation (tabs) make your HTML easier to read. Note how the nested elements are indented to make it easier to see the parent/child relationship.</p>
</article>
<!-- SLIDE 31: HTML -->
<article class='slide slide-list'>
<h2>What goes in the <code><head></code> and what goes in the <code><body></code>?</h2>
<p>The code you put in between the <code><body></code> of your HTML document will be displayed on your webpage, the part that your users will see. The code included in the <code><head></code> of your HTML document will not be displayed in the browser. The information there is only for the browser to "see."</p>
<p>You can think of the <code><head></code> as a place to write secret notes to your browser. For example, our styles (CSS) go in the <code><head></code>. We don't want the actual CSS markup to show up on our page, but we want the browser to <em>apply</em> the styles.</p>
</article>
<!-- SLIDE 32: Adding text -->
<article class='slide slide-list'>
<h2>HTML content: adding text</h2>
<p><i>Heading</i> tags are used for headings/page titles.</p>
<p>There are six levels ranging from <code><h1></code> to <code><h6></code>. They follow a hierarchy with <code><h1></code> being the most significant heading on the page.</p>
<pre class="language-markup"><code><h1>Name of blog</h1>
<h2>Title of blog post</h2>
<h3>Sub headings within blog post</h3>
</code></pre>
<p><i>Paragraphs</i> are represented by the <code><p></code> tag.</p>
<pre class="language-markup"><code><p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</code></pre>
<p>Links are represented by the <code><a></code> (anchor) tag. The <code>href</code> <em>attribute</em> is needed to specify the link location (more on this later).</p>
<pre class="language-markup"><code>Visit <a <strong>href="http://ladieslearningcode.com"</strong>>Ladies Learning Code</a>.</code></pre>
</article>
<!-- SLIDE 33: HTML -->
<article class='slide slide-list'>
<h2>Exercise: Adding text and links </h2>
<p>Open <code>blank.html</code> in Sublime Text</p>
<ol>
<li>Change the content within the <code><title></title></code> tags, and observe the change in your browser.</li>
<li>Add additional paragraphs.</li>
<li>Add some headers (<code><h1></code>, <code></h2></code> ... <code></h6></code>), above each paragraph.<br><span class="icon-note">Note how different heading tags look based on their hierarchy.</span></li>
<li>Try adding three links. Example:<br>
<pre class="language-markup"><code><a href="http://link-location.com">Click here</a></code></pre>
</li>
</ol>
<p>Don't worry too much about WHERE you're putting the content for now. Just make sure it's inside the <code><body></code> tags and have fun experimenting with the code.</p>
<p class="icon-tip">Don't forget to save and refresh your browser to see your code in action!</p>
</article>
<!-- SLIDE 34: HTML -->
<article class='slide slide-list'>
<h2>More about attributes</h2>
<p>An <i>attribute</i> is a modifier of an HTML element and are used to render special content such as links, images, or videos because they provide additional information or instruction.</p>
<p>HTML attributes generally appear as <em>name-value pairs</em>, separated by "=". There are different attributes for different HTML elements. They are written <em>within</em> the opening tag of an element, after the element's name:</p>
<pre class="language-markup"><code><tag attribute="value">content to be modified by the tag</tag></code></pre>
<p>Here's an example of an attribute that we've seen today:</p>
<pre class="language-markup"><code><a href="link.com">Click here</a></code></pre>
<p>In the above example, <code>a</code> is the <i>tag</i>, <code>href</code> is the <i>attribute</i> and <code>http://link.com</code> is the <i>value</i>.</p>
</article>
<!-- SLIDE 35: HTML -->
<article class='slide slide-list'>
<h2>Exercise: HTML markup for our final project</h2>
<p>Let's write the HTML markup for our final project using what we just learned about headings, paragraphs and links.</p>
<p>Your page should look like this:</p>
<img src="assets/step_1_output.jpg" style="border:1px solid #ccc; padding:10px;">
<p class="icon-tip">Use <code><h1></h1></code> once, <code><h2></h2></code> three times and <code><h3></h3></code> once.</p>
<p class="icon-note">You can also generate your own placeholder text at <a href="http://www.lipsum.com/">http://www.lipsum.com</a>. Or, you can try <a href="http://cupcakeipsum.com/">Cupcake Ipsum</a>, <a href="http://baconipsum.com/">Bacon Ipsum</a> or <a href="http://slipsum.com/">Samuel L. Ipsum</a> for something fancy!
</article>
<!-- SLIDE 36: HTML -->
<article class='slide slide-list'>
<h2>Adding images</h2>
<p>Adding images are a little different than adding text and links because image tags are <em>self-closing</em>, also known as a <em>void element</em> — there is no closing tag.</p>
<p>Let's start by adding an image that is hosted online. Just like links, image tags require a <code>src</code> <em>attribute</em> to point to location of the image.</p>
<pre class="language-markup"><code><img src="http://placekitten.com/400/300"></code>
</pre>
<p>This is an example of an <strong>absolute path</strong>. Try copying this line of code into your project, right under the opening <code><body></code> tag.</p>
<p>Next, try finding a different image online and replacing this photo.</p>
<p class="icon-note">There are also many placeholder image sites:<br> <a href="http://placekitten.com/">http://placekitten.com/</a>, <a href="http://placehold.it/">http://placehold.it/</a>, <a href="http://placedog.com/">http://placedog.com/</a>, <a href="http://lorempixel.com/">http://lorempixel.com/</a></p>
</article>
<!-- SLIDE 37: HTML -->
<article class='slide slide-list'>
<h2>Adding images, Part 2</h2>
<p>You can add images in a folder on your computer rather than linking to images hosted online.</p>
<p>In the <strong>Project</strong> folder, at the same level as <code>blank.html</code>, there's an image called <code>logo.png</code>. Including this image on our website will be the same as before <em>except</em> the <em>value</em> of <code>src</code> will point to the image file name instead.</p>
<pre><code class="language-markup"><img src="logo.png"></code></pre>
<p>This is an example of a <strong>relative path</strong>. Try adding this line of code into your project, right under the opening <code><body></code> tag.</p>
<p>To write a <strong>relative path</strong> that goes <em>into</em> a folder, start the path with the <strong>folder name</strong> followed by a forward slash (<code>/</code>).</p>
<pre><code class="language-markup"><img src="<strong>images/</strong>logo.png"></code></pre>
<p>Try adding any of the images in the <strong>Project > images</strong> folder.</p>
</article>
<!-- SLIDE 38: HTML -->
<article class='slide slide-list'>
<h2>The <code>alt</code> attribute</h2>
<p><code>alt</code> is an optional image attribute and refers to <i>alternative text</i>. Alt text is read by screen reading software used by visually impaired users.</p>
<p>It also displays when there's a broken or missing image due to typos or moved files. It should be a short description of the image.</p>
<p>HTML tags can contain more than one attribute. Here's how you would use the <code>alt</code> attribute with the <code>src</code> attribute.</p>
<pre><code class="language-markup"> <img src="<strong>images/</strong>logo.png" alt="logo image"></code></pre>
<p class="icon-tip">The img tag will work without the alt attribute but it's required to be "<a href="http://validator.w3.org/"target="_blank">valid</a>" HTML markup.</span>
</article>
<!-- SLIDE 39: HTML -->
<article class='slide slide-list'>
<h2>Exercise: Add a logo & profile image to your project</h2>
<p>The output (what you'll see in your browser) of this exercise is shown below. Write the HTML.</p>
<img src="assets/step_2_output.jpg" style="border:1px solid #ddd;padding:10px;">
<p class="icon-tip">The logo image is called <code>logo.png</code>, and the placeholder profile image is <code>profile.jpg</code>. Both can be found inside the <strong>images</strong> folder or feel free to use your own and personalize it! Just save it in the <strong>images</strong> folder to be consistent.</strong></p>
</article>
<!-- SLIDE 40: HTML -->
<article class='slide slide-list'>
<h2>A quick note about image types:</h2>
<p>There are 3 main file types used for web. Each type is best suited for specific kinds of images. Use the format that maintains the best quality while reducing the file size.</p>
<ul class="image-types">
<li><code>jpg</code> - used for photographs with lots of rich colours or gradients</li>
<li><code>png</code> - used for images with transparent or opaque backgrounds</li>
<li><code>gif</code> - used for images with minimal colour variation and of course, for animated gifs!</li>
</ul>
<div class="centered">
<img src="http://1-ps.googleusercontent.com/h/www.catgifpage.com/gifs/182.gif.pagespeed.ce.S3pBqCa_-u.gif">
</div>
<p class="icon-note">To make your web development life easier, turn on the option to see the file extension type in Explorer (<a href="http://windows.microsoft.com/en-US/windows-vista/Show-or-hide-file-name-extensions">Windows instructions</a>) or Finder (<a href="http://osxdaily.com/2012/01/13/show-filename-extensions-in-mac-os-x/">Mac instructions</a>).</p>
</article>
<!-- SLIDE 41: HTML -->
<article class='slide slide-list'>
<h2>Exercise: Add a few more images</h2>
<ul>
<li>Add a few images of your favourite things section.<br>
<span class="sidenote">Try not to choose huge images right now - we'll be resizing images using CSS later.</span></li>
<li>Add your Twitter, Facebook and/or LinkedIn info using image icons to the contact me section. Use nested tags to make your images into links.<br>
<span class="icon-tip">Logo images can be found in the Project/images folder.</span></li>
</ul>
<p>Your output should look something like this:</p>
<img src="assets/step_3_output.jpg" style="border:1px solid #ddd;padding: 10px;">
</article>
<!-- SLIDE 42: HTML -->
<article class='slide slide-list'>
<h2>And that's it!</h2>
<p>We've written all of the HTML that we'll need for today's project! Your markup should look like this:</p>
<img src="assets/result_after_step_3.jpg">
</article>
<!-- SLIDE 43: HTML -->
<article class='slide slide-list'>
<h2>A note about organization</h2>
<p>Did you see how the markup in the previous slide was clean, organized and easy to read? It's because everything is indented properly.</p>
<p>Take a few moments now to clean up your code and make it look like the previous slide. Once you start to write more HTML and get into CSS, you'll be very grateful!</p>
</article>
<!-- //// END OF HTML SECTION //// -->
<!-- SLIDE 44: CSS Basics -->
<article class='slide slide-subhead'>
<h1>CSS basics</h1>
<p>The presentation layer</p>
</article>
<!-- SLIDE 45: CSS and HTML -->
<article class="slide slide-list">
<h2>CSS & HTML</h2>
<p>CSS is closely paired with HTML and doesn't do anything on its own. It's the presentation layer on top of a content base.</p>
<p>If HTML is the beams of the house, CSS is the layout, paint, and decorations.</p>
</article>
<!-- SLIDE 46: CSS Syntax 1 -->
<article class="slide slide-list">
<h2>CSS Syntax</h2>
<p>CSS is made up of <strong>rules</strong> that refer to HTML elements (like <code><p></code> and <code><ul></code>), and define what those elements should look like.</p>
<p>A CSS rule is made up of a <i>selector</i> and one or more <i>declarations</i>.</p>
<p>A <i>selector</i> tells the browser which element(s) to style. It looks like this:</p>
<pre><code class="language-css">h2 {}</code></pre>
<p>The above selector will select all <code><h2></code> elements and apply our styles to them. The styles (or <i>declarations</i>) will go between the curly brackets.</p>
<p class="icon-tip">The curly braces on your keyboard are located beside the "p" key. <strong>Shift</strong> + <strong>{</strong> and <strong>Shift</strong> + <strong>}</strong></p>
</article>
<!-- SLIDE 47: CSS Syntax 2 -->
<article class="slide slide-list">
<h2>CSS Syntax</h2>
<p>A <i>declaration</i> tells the browser what style to apply to the selected element.</p>
<p>A declaration is always made up of two parts: a <i>property</i> and a <i>value</i>.</p>
<p>A <i>property</i> tells the browser <strong>what</strong> we are modifying (ex. font, colour, size).</p>
<p>A <i>value</i> tells the browser <strong>how</strong> to modify the property (ex. Arial, green, small).</p>
<p>A declaration looks like this:</p>
<pre><code class="language-css">background-color: green;</code></pre>
</article>
<!-- SLIDE 48 CSS Syntax 2.1 -->
<article class="slide slide-list">
<h2>CSS Syntax</h2>
<pre><code class="language-css">background-color: green;</code></pre>
<p>The <strong>value</strong> (the part <em>after</em> the colon) is specific to the property type.</p>
<p>Ex. Size-related properties like <code>height, width</code>, or <code>font-size</code> are usually specified in <code>px</code> (pixels), while colour-related properties are specified with a colour name or code.</p>
<p>It's very important to write the syntax correctly, with a colon after the property name and a semi-colon after the value.</p>
</article>
<!-- SLIDE 49: CSS -->
<article class='slide slide-list'>
<h2>Recap: CSS terminology</h2>
<p><strong>Selectors</strong>: used to <em>select</em> which element(s) to apply the styles to.</p>
<p><strong>Declaration blocks</strong>: consists of a list of declarations (rules to follow) wrapped in curly braces <code>{ }</code>.</p>
<p><strong>Declarations</strong> are written using CSS <code>property:value</code> pairs.</p>
<pre><code class="language-css">selector { property: value; }</code></pre>
<pre><code class="language-css">h1 { color: blue; }</code></pre>
</article>
<!-- SLIDE 50 Adding Style Tags -->
<article class="slide slide-list">
<h2>Adding CSS to HTML</h2>
<p>You write CSS rules in a set of <code><style></style></code> tags included in the <code><head></code> section of your HTML document like this:</p>
<pre><code class="language-markup"><html>
<head>
<style>
h2 {
background-color: green;
}
</style>
</head>
<body>
</body>
</html>
</code></pre>
</ul>
</article>
<!-- SLIDE 51: CSS Syntax 3 -->
<article class="slide slide-list">
<h2>CSS Syntax</h2>
<p>When we put selectors and declarations together, they make a CSS rule, which looks like this: </p>
<pre><code class="language-css">h2 {
background-color: green;
}
</code></pre>
<p>This rule will select all <code><h2></code> elements and change their background colour to green.</p>
<p>Try copying and pasting the above code in between the <code><style></code> tags and refreshing the page in your browser.</p>
</article>
<!-- SLIDE 52: CSS Syntax 4 -->
<article class="slide slide-list">
<h2>CSS Syntax</h2>
<p>We can add multiple declarations to one selector to modify multiple properties:</p>
<pre><code class="language-css">h2 {
background-color: green;
font-size: 28px;
}
</code></pre>
<p>Make sure you always end each declaration with a semi-colon.</p>
<p>Try adding another declaration, using this example. Save & refresh your browser.</p>
<p>Next, clear out all the code you added between the <code><style></code> tags. We're adding more soon!</p>
</article>
<!-- SLIDE 53: CSS First -->
<article class="slide slide-list">
<h2>Exercise: First CSS Rule</h2>
<ul>
<li>Find the set of <code><style></code> tags in the <code><head></code> of <strong>blank.html</strong></li>
<li>In between the two tags, write a selector for the <code><body></code> tag of the document</li>
<li>Next, add a <code>color: </code> property with a value of <code>blue;</code></li>
<pre><code class="language-css">body {
color: blue;
}
</code></pre>
</ul>
<p>All the text on the page is now blue: this is because the <code><body></code> tag is the highest-level tag we can see on the page, so the <code>color</code> property applies to the body AND all its children, including every heading, paragraph, and list item.</p>
</article>
<!-- SLIDE 54: CSS Color Change -->
<article class="slide slide-list">
<h2>Using Hex Codes</h2>
<p>Let's change the text to a colour that's easier to read.</p>
<p>We're going to use a <strong>hex code</strong>, which is a 6-character code that allows the usage of more specific colours.</p>
<p>The code for a nice dark grey is <code>#444444</code>.</p>
<pre><code class="language-css">body {
color: #444444;
}
</code></pre>
<p class="icon-note">Check out these sites for color inspiration and more hex codes: <a href="http://www.colourlovers.com/" target="_blank">COLOURlovers</a>, <a href="http://color.hailpixel.com/" target="_blank">color.hailpixel.com</a> </p>
<p class="icon-warning">Remember, hex codes always have to start with a "#".</p>
</article>
<!-- SLIDE 55: CSS Fonts -->
<article class="slide slide-list">
<h2>Styling Type with CSS</h2>
<p>There are lots of CSS properties which let us style the text in our HTML:</p>
<ul>
<li><code>font-size</code></li>
<li><code>font-weight</code></li>
<li><code>font-style</code></li>
<li><code>font-family</code></li>
<li><code>color</code></li>
<li><code>line-height</code></li>
</ul>
<p class="icon-note">See more info about typography related CSS properties <a href="http://reference.sitepoint.com/css/typography">here</a>.</p>
</article>
<!-- SLIDE 56: CSS Fonts 2 -->
<article class="slide slide-list">
<h2>Styling Type with CSS, Part 2</h2>
<p>Let's change the font to a sans-serif font like Helvetica: </p>
<pre><code class="language-css">body {
color: #444444;
font-family: Helvetica, Arial, sans-serif;
}
</code></pre>
<p>The <code>font-family</code> property accepts a list of font names:<br>
the first is your first-choice font, the next ones are fallbacks in case that font is not available. Not all fonts are commonly available on all computers, so try to stick to 'web-safe' fonts like:</p>
<ul>
<li style="font-family: Arial;">Arial</li>
<li style="font-family: Verdana;">Verdana</li>
<li style="font-family: 'Times New Roman';">Times New Roman</li>
<li style="font-family: Georgia;">Georgia</li>
<li style="font-family: Courier;">Courier</li>
</ul>
<p class="icon-note">Here's a handy resource, <a href="http://cssfontstack.com/">CSS Font Stack</a>.</p>
</article>
<!-- SLIDE 57 -->
<article class='slide slide-list'>
<h2>Cascading, Inheritance and Specificity</h2>
<p>In the previous example, we added all our CSS properties to the <code>body</code> <i>selector</i>. Therefore, all of the children and descendants <em>inherited</em> the styles. However, if a more specific <i>selector</i> was used, it would override the inherited values.</p>
<pre><code class="language-css">body {
background-color: blue;
color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
color: black; /* only the h1 text will be black */
}
/* This is a CSS comment by the way. It is ignored by browsers so you can use it to leave notes for yourself (or others). */
</code></pre>
<p class="icon-note">More resources <a href="http://www.w3.org/TR/CSS2/cascade.html" target="_blank">here</a>, <a href="http://css-tricks.com/specifics-on-css-specificity/" target="_blank">here</a> and <a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" target="_blank">here</a>.</p>
</article>
<!-- SLIDE 58: CSS Fonts 2 -->
<article class="slide slide-list">
<h2>Changing Font Sizes</h2>
<p>If we want to make our <code><h1></code> and <code><h2></code> tags a bit bigger:</p>
<pre><code class="language-css">h1 {
font-size: 48px;
}
h2 {
font-size: 32px;
}
</code></pre>
</article>
<!-- SLIDE 59: CSS Fonts 4 -->
<article class="slide slide-list">
<h2>Changing Line Height</h2>
<p>We can change the line height (or leading) with the <code>line-height</code> property to make it easier to read</p>
<p><code>line-height</code> is specified as a multiple of the size of the font: so a value of <code>1.4</code> means the lines will be 1.4x as tall as the text.</p>
<pre><code class="language-css">p {
line-height: 1.4;
}
</code></pre>
</ul>
</article>
<!-- SLIDE 60: CSS Images 1 -->
<article class="slide slide-list">
<h2>Styling Images</h2>
<p>Let's add a dark border around the profile image. Use the <code>img</code> selector to target the <code><img></code> tag.</p>
<pre><code class="language-css">img {}
</code></pre>
<p>The <code>border</code> property can hold 3 values: width, style, and colour.<br>
To create a 1px wide, solid line, grey border, we use:</p>
<pre><code class="language-css">img {
border: 1px solid grey;
}
</code></pre>
</ul>
</article>
<!-- SLIDE 61: CSS Classes 1 -->
<article class="slide slide-list">
<h2>Being more specific: using a <code>class</code></h2>
<p>Because we used <code>img</code> as the selector, the border style now applies to <strong>all</strong> images. We don't want that, so we need a way to target <strong>only</strong> the profile image.</p>
<p>HTML gives us a way to attach extra identifying information to HTML elements so that we can target them. This is called a <code>class</code>.</p>
<p><code>Classes</code> are <i>attributes</i> than can be added to any tag and the value is define by you.</p>
<pre><code class="language-markup"><p class="classname"></p>
</code></pre>
<p class="icon-tip">When choosing a class name, you can follow the same best practices for choosing file names that was discussed <a href="/#slide-14">earlier</a>.</p>
</article>
<!-- SLIDE 62: CSS Classes 2 -->
<article class="slide slide-list">
<h2>Targeting an Element with a Class</h2>
<p>Selecting a class in CSS requires a leading period (<code>.</code>) followed by the class name with <em>no spaces</em>.</p>
<pre><code class="language-css">.classname {}
</code></pre>
<p>This will only apply the styles to the item with the class:</p>
<pre><code class="language-css">.classname {
color: red;
}
</code></pre>
</article>
<!-- SLIDE 63: CSS Classes Exercise -->
<article class="slide slide-list">
<h2>Exercise: Style Profile Image</h2>
<p>Add some style to your profile image.</p>
<ul>
<li>Add a class of <code>profile-image</code> to the <code>img</code> tag containing your profile pic</li>
<li>Target the class in your CSS with the selector <code>.profile-image</code></li>
<li>Then add a border of any color you like</li>
<li>If your picture is too big, you can resize it using the <code>width</code> and <code>height</code> properties, which are specified in <code>px</code> (pixels). Try 200 x 200 px. An example of how to use <code>width</code> and <code>height</code> is below:</li>
<pre><code class="language-css">.profile-image {
width: 200px;
height: 200px;
}
</code></pre>
</ul>
</article>
<!-- SLIDE 64: CSS Classes Exercise Solution -->
<article class="slide slide-list">
<h2>Solution: Style Profile Image</h2>
<p>Your HTML should look something like this:</p>
<pre><code class="language-markup"><img class="profile-image" src="images/profile.jpg">
</code></pre>
<p>And your CSS should look something like this:</p>
<pre><code class="language-css">.profile-image {
border: 1px solid grey;
width: 200px;
height: 200px;
}
</code></pre>
</article>
<!-- SLIDE 65: CSS Classes on multiple elements -->
<article class="slide slide-list">
<h2>Adding More Classes</h2>
<p>Once you define a CSS class, you can apply it over and over again, to any element. This is handy for applying the same style to multiple elements.</p>
<p>We can create another class to style our <strong>Favourite Things</strong> images. To style all four images, add the same class to each.</p>
<p>Add a class of <code>favourite-image</code> to each of the four images.</p>
<pre><code class="language-markup"><img class="favourite-image" src="images/kitten.jpg" >
</code></pre>
<p>Try adding some styles to your images, using <code>width</code>, <code>height</code>, and <code>border</code>.</p>
</article>
<!-- SLIDE 66: CSS Classes on fav images -->
<article class="slide slide-list">
<h2>More Stuff You Can Do</h2>
<p>Try out some of these properties and see what they do.</p>
<ul>
<li><code>border-radius: 50%;</code></li>
<li><code>border: 3px dotted pink;</code></li>
<li><code>box-shadow: 0 0 4px grey;</code></li>
</ul>
<p>Your CSS might look something like this:</p>
<pre><code class="language-css">.favourite-image {
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px dotted pink;
box-shadow: 0 0 4px grey;
}
</code></pre>
<p class="icon-note">We won't get into browser pre-fixes today but keep in mind that newer CSS features, such as <code>border-radius</code> require you to re-state the property for each browser vendor. More info <a href="https://developer.mozilla.org/en-US/docs/CSS/border-radius" target="_blank">here</a>.</p>
</article>
<!-- SLIDE 67: CSS Properties -->
<article class="slide slide-list">
<h2>Don't worry if it seems like there are a lot of CSS properties to remember (because there are lots). Keep some handy resources near by and you can always search the internet. Even the pros have to look things up :)</h2>
<p>Here are some resources to get you started. Bookmark these!</p>
<ul>
<li><a href="http://dochub.io/#css/">dochub.io</a> </li>
<li><a href="http://reference.sitepoint.com/css/propertyref">Sitepoint Reference</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">Mozilla Developer Network</a></li>
<li><a href="http://www.cheatography.com/davechild/cheat-sheets/css2/">Printable cheat sheet</a></li>
</ul>
</article>
<!-- SLIDE 68: CSS Box Model -->
<article class="slide slide-list">
<h2>The Box Model</h2>
<h3>This is the trickiest part of CSS, don't worry if it seems confusing at first!</h3>
<p>The CSS <i>Box Model</i> describes the way CSS styles the size and spacing of HTML elements.</p>
<p>To understand the box model, we need to understand how the browser "sees" HTML elements.</p>
<p>To the browser, <strong>every</strong> HTML element is a rectangular box.</p>
<p>If we show the outlines of all the elements in an HTML document, it looks a bit like the next slide:</p>
</article>
<!-- SLIDE 69: CSS Box Model 2 -->
<article class="slide slide-list">
<img src="assets/redboxes.png"></li>
</article>
<!-- SLIDE 70: CSS Box Model 3 -->
<article class="slide slide-list">
<h2>The Box Model</h2>
<p>CSS uses 5 properties to determine the size and spacing of these boxes:</p>
<ul>
<li><code>margin</code>, <code>padding</code>, <code>border</code>, <code>width</code>, and <code>height</code></li>
<li>These 5 properties make up the <strong>Box Model</strong></li>
<img src="assets/border-box-model.gif">
</ul>
<p>The <i>content</i> is the text or image visible to the user. The <code>border</code> is... the border. <code>padding</code> adds space <em>inside</em> of the box and <code>margin</code> adds space <em>outside</em> of the box.</p>
<p>Let's look at each property in more detail.</p>
</article>
<!-- SLIDE 71: CSS Box Model: Margin & Padding -->
<article class="slide slide-list">
<h2>Margin and Padding</h2>
<p>There are two CSS properties for adding space around our elements: <code>margin</code> and <code>padding</code>. Let's take a look at an example.</p>
<p>First, adding a border and background color to an element will make it easier to see how these two properties add space to the element.</p>
<p>Let's say we have 3 elements in our HTML document: a <code><p></code>, an <code><h2></code>, and another <code><p></code>. Adding a solid red border and pink background to the <code><h2></code> will look like this:</p>
<pre><code class="language-css">h2 {
border: 1px solid red;
background: pink;
}
</code></pre>
<br>
<img src="assets/bm1.png">
<p>So far, this looks pretty awful. All the elements are too close to each other.</p>
</article>
<!-- SLIDE 72: CSS Box Model: Margin-->
<article class="slide slide-list">
<h2>Margins</h2>
<p>The <code>margin</code> property adds space <em>around</em> the element, outside of the border:</p>
<pre><code class="language-css">h2 {
margin: 40px;
}
</code></pre>
<p>The example adds 40px of space on every side of the element.</p>
<br>
<img src="assets/bm2.png" alt="">
</article>
<!-- SLIDE 73: CSS Box Model: Padding -->
<article class="slide slide-list">
<h2>Padding</h2>
<p>To add some space <em>inside</em> the border, use the <code>padding</code> property:</li>
<pre><code class="language-css">h2 {
margin: 40px;
padding: 40px;
}
</code></pre>
<p>This example adds 40px of space to every side of the element, but it does so within the border.</p>
<br>
<img src="assets/bm3.png" alt="">
<p class="icon-warning">Note that the background colour extends when using padding but not margin.</p>
</article>
<!-- SLIDE CSS 74: Box Model: Margin & Padding -->
<article class="slide slide-list">
<h2>Margin vs. Padding</h2>
<p>Adding <code>padding</code> to an element makes the element <strong>bigger</strong>, whereas adding a <code>margin</code> adds space around the element.</p>
<p>If you make a 100px wide element, and then add 40px of padding to it, it will become 180px wide. <span class="sidenote">(100px width + 40px padding left + 40px padding right)</span></p>
<p>If you add a 40px margin to a 100px wide element, it stays 100px wide.</p>
<p>If you add a 1px border to a 100px wide element, it will become 102px wide. <span class="sidenote">(100px width + 1px border left + 1px border right)</span></p>
<p>If your element doesn't have a border or a background, you may not be able to see the difference between margin and padding.</p>
<p class="icon-tip">When debugging, it's useful to put a background colour on the elements to see where it begins and ends.</p>
</article>
<!-- SLIDE CSS 75: Box Mdoel: Margin & Padding Sides -->
<article class="slide slide-list">
<h2>More on Margins and Padding</h2>
<p>You can also target a specific side of an element by using these properties: <code>margin-top, margin-right, margin-bottom,</code> and <code>margin-left</code>.</p>