forked from pearlchen/LLC-HTML-CSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·1529 lines (1392 loc) · 67.4 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 rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >
<style type="text/css">
.deck-container {
margin-top: 20px;
}
</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">
<h2>Welcome to Ladies Learning Code's</h2>
<h1>Introduction to HTML & CSS</h1>
</div>
<br clear="left" />
<p style="padding-top: 55px; margin-bottom: 0; font-size: 0.9em; color: #999;">
Thanks to <a href="http://twitter.com/pearlchen">Pearl Chen</a> and <a href="http://twitter.com/markreale">Mark Reale</a> for creating the foundation for today's content.</p>
</article>
<!-- SLIDE: Today's project -->
<article class='slide slide-list'>
<h2>Today's Project</h2>
<a href="http://#"><img src="assets/project_screenshot.jpg"></a>
<p><a href="http://tessalt.github.io/LLC-HTML-CSS/Project/final.html" target="_blank">Click here</a> to see the whole project</p>
</article>
<!-- SLIDE: Course Outline -->
<article class='slide slide-list'>
<h2>Course Outline</h2>
<h3 style="margin-top: 1em;">First portion (usually completed before lunch):</h3>
<ul>
<li>Intro to HTML</li>
<li>Write the HTML for your project</li>
<li>Intro to CSS</li>
</ul>
<h3 style="margin-top: 1em;">Second portion (usually completed after lunch)</h3>
<ul>
<li>More CSS</li>
<li>Final touches</li>
<li>Fin! And next steps</li>
</ul>
</article>
<!-- SLIDE: 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 popular text editor that highlights your code and has other helpful features.</li>
<li><strong>Google Chrome</strong> (<a href="https://www.google.com/intl/en/chrome/browser/">link</a>) - Choose a modern web browser that has good development tools to help make building web pages easier. <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> is a good option, too! You'll also want to make one of these modern browsers your <em>default</em> browser. <a href="https://support.google.com/chrome/answer/95417?hl=en">Here are the instructions</a>.</li>
<li><strong>Today's slides and files</strong> (<a href="https://github.com/tessa-lt/LLC-HTML-CSS">link</a>). You'll see a "Download Zip" button on the bottom right of the page. Click it! To open the slides, unzip the folder (on Windows, right click and select "Extract All"). Right click on "index.html" or "index" and "Open in Chrome".</li>
</ul>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 1 -->
<article class='slide slide-list'>
<h1>Opening HTML files in your browser</h1>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 2 -->
<article class='slide slide-list'>
<h2>First, what is a browser?</h2>
<p>The browser's main functionality is to present the "web resource" you choose, by requesting it from the server and displaying it in the browser window. The "web resource" is usually an HTML document, but may also be a PDF, image, or other type.<p>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 3 -->
<article class='slide slide-list'>
<h2>What is an HTML document?</h2>
<p>We'll get into this in more detail shortly. For now, let's check out an example. Go to <a href="http://ladieslearningcode.com">http://ladieslearningcode.com</a>. Right-click and select "View Page Source". That's HTML.</p>
<p>We'll learn to write our own HTML today. For now, let's learn to open an HTML document (like the ones we'll create later) in our browser.</p>
<ol>
<li>Open Sublime Text and go to "File -> Open".</li>
<li>Navigate to the folder called "Project" in the folder you downloaded with today's slides.</li>
<li>With the entire folder selected (not just one file within it), click "Open".</li>
<li>Now that the folder is open in Sublime, click on "blank.html" so that it fills the screen. Now, right click and select "Open in Browser". (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>.)</li>
</ol>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 4 -->
<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: Opening HTML files in your browser, Part 5 -->
<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: Opening HTML files in your browser, Part 6 -->
<article class='slide slide-list'>
<h2>Dive back in to Sublime Text...</h2>
<ol>
<li>Change something. For example, change the text within the <p> and </p> tags.</li>
<li>Save your file (CMD + S or CONTROL + S)</li>
<li>Right click and select "Open in Browser".</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>
</article>
<!-- SLIDE: You won't break anything -->
<article class='slide slide-list'>
<h2>A note: don't be scared about breaking anything or doing something wrong. The stuff we're doing today is what computers were designed to do! Feel free to play around, take risks and make mistakes. That's the best way to learn.</h2>
</article>
<!-- new slide -->
<article class='slide slide-subhead'>
<h1>What are HTML & CSS?</h1>
</article>
<article class='slide slide-subhead'>
<h1>Let's start with HTML...</h1>
<p>It's the content layer</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>HTML (HyperText Markup Language) is what webpages are made out of.</h2>
<p>We use HTML to describe each part of a webpage is to the browser, so that our content is displayed properly. We help our browsers to understand how we want things displayed by using tags. Here are a few examples of tags that you've probably seen before:</p>
<ul>
<li><h1> and </h1></li>
<li><p> and </p></li>
<li><strong> and </strong></li>
</ul>
<p>To create an HTML file, you need to have .html at the end (sort of like how you need .pdf at the end of PDF documents).</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Quick exercise: Let's save a new file as an HTML file</h2>
<ol>
<li>In Sublime Text, click "File -> New File"</li>
<li>By default, the file type is "Plain Text" not HTML</li>
<li>You have two choices for saving this file as an HTML file:</li>
<ul>
<li>On the bottom right corner, you should see the words "Plain Text". Click the words, and select HTML from the list. Save the file by clicking CMD + S or CONTROL + S. Call it anything, save it anywhere. We won't be using it for anything else.</li>
<li>Click on "File -> Save As". Give your file a name and add .html at the end (for example, "puppydog.html"). Click save. You can save it anywhere - we won't be using this file for anything else.</li>
</ul>
</ol>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>The Nuts and Bolts of HTML</h2>
<p>When we write HTML, we create HTML Elements by wrapping our content in tags. These tags describe the content that is inside of them, NOT what they look like. We use different kinds of tags to create multiple elements and all together they make up something called our HTML Document.</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>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Tags that you should no longer use!</h2>
<p>It’s very important to create semantic, clean and valid markup before doing anything else. When we write HTML, we are only describing the content - not defining how out website looks (that's what CSS is for).</p>
<p>Here are a few examples of tags you should NEVER use:</p>
<ul>
<li><b>I'm Bold text!</b></li>
<li><i>I'm Italic!</i></li>
<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>
</ul>
<h3>Please don't use any of these tags ever again!</h3>
</article>
<!-- new slide -->
<article class='slide slide-subhead'>
<h1>Speaking of CSS...</h1>
<p>It's what makes the web look nice.</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>What is CSS?</h2>
<p>CSS (Cascading Style Sheets) is what makes websites look nice.</p>
<p>While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like.</p>
<p>For example, p means paragraph in HTML. If we wanted to make all of our paragraphs red and underlined, we'd do something like:</p>
<pre><code class="language-css">
p {
color: red;
text-decoration: underline;
}
</code></pre>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Let's add this to our HTML document</h2>
<p>To indicate that we're adding CSS to blank.html, we need to find the opening and closing <code><style></code> tags between our opening and closing <code><head></code> tags.</p>
<pre class="language-markup"><code class="">
<!doctype html>
<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>
</article>
<!-- new slide -->
<article class='slide slide-subhead'>
<h1>Ta-da!</h1>
<p>You just created your first website.</p>
<p>HTML + CSS = website</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>A note about HTML and CSS...</h2>
<p>HTML and CSS are sort of like languages, but they're DIFFERENT languages. Just like French or Italian, they each have their own set of rules. It takes time to learn these languages. Don't worry if you don't get it all right away.</p>
</article>
<!-- SLIDE: Websites without CSS -->
<article class='slide slide-list'>
<h2>Websites without CSS...</h2>
<p>This:</p>
<img src="assets/llc_site_with_css.jpg">
</article>
<!-- SLIDE: Websites without CSS -->
<article class='slide slide-list'>
<h2>Websites without CSS...</h2>
<p>Becomes this:</p>
<img src="assets/llc_site_without_css.jpg">
</article>
<!-- SLIDE: What is a website? -->
<article class='slide slide-subhead'>
<h1>Why is that again?</h1>
<h2>Because HTML defines content, and CSS defines the look and layout (it makes the web look nice).</h2>
</article>
<!-- SLIDE: What is a website? -->
<article class='slide slide-subhead'>
<h1>Let's focus on HTML for now</h1>
<p>Time to start writing some HTML (which is also called "markup")</p>
<p>You can remove what we added between <style> and </style> for now. Keep <style> and </style> there!</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>HTML tags</h2>
<p>The structure of a webpage is defined by HTML <span class="keyword">tags</span>. Angled brackets denote tags, like this:</p>
<p class="centered" style="font-size: 3em;"><code><tag></code></p>
<p class="centered sidenote">Think about HTML tags like the beams of a house.<br />
It's what holds up a webpage.</p>
<p class="centered"><img src="assets/house_beam.jpg" width="300" height="232" alt="house beam" /></p>
</article>
<!-- SLIDE: 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" style="font-size: 3em;"><code><tag></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: HTML -->
<article class='slide slide-list' >
<h2>HTML tags</h2>
<p>Tags can be "nested" within other tags, like this:</p>
<p class="centered" style="font-size: 2.5em;"><code><tag><span style="font-size: 1.3em; color: purple;"><tag></tag></span></tag></code></p>
<p class="centered sidenote">(This relationship is often referred to using the terms "parent" node and "child" nodes.)</p>
<br />
<p class="sidenote" style="margin-bottom: 0px;">In the example below:</p>
<ul class="sidenote">
<li><code><title></code> is nested between opening and closing <code><head></code> tags so <code><head></code> is the parent node and <code><title></code> is the child node.</li>
<li>Going further, <code><head></code> is also (at the same time) a child node of <code><html></code>.</li>
<li>While <code><html></code> is the always the "root" node and has <strong>no</strong> parent nodes.</li>
<li>Notice too that <code><head></code> and <code><body></code> are on the same level. They are both child nodes of <code><html></code>. They're like sublings!</li>
</ul>
<pre style="width: 45%; float: left;">
<!DOCTYPE html>
<html>
<head>
<strong><title></strong> <strong></title></strong>
</head>
<body>
</body>
</html></pre>
<pre style="width: 45%; float: right;">
<!DOCTYPE html>
<html>
<strong><head></strong>
<title> </title>
<strong></head></strong>
<body>
</body>
</html></pre>
<br clear="all" />
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>What goes in the <code><head></code> and what goes in the <code><body></code>?</h2>
<p>Things that you put in the <code><body></code> of your HTML document will show up on your webpage. Things that you put in the <code><head></code> of your HTML document won't show up. You can think of the <code><head></code> as a place to write secret notes to your browser. For example, our styles go in the head. We don't want our styles to show up on our page, but we do want our browser to apply the styles.</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercise: Open the file "blank.html" in Sublime Text</h2>
<ol>
<li>Change the content within the opening and closing <code><title></code> tags, and observe the change in your browser.</li>
<li>Add an additional paragraph.</li>
<li>Add a few headers to the page, above each paragraph. Hint: you'll need to use some or all of the following tags: <code><h1></code> and <code></h1></code>, <code><h2></code> and <code></h2></code>, and you can even try using h3, h4, h5 and h6, if you like.</li>
<li>Try adding three links. The code for a link looks like this:<br><code><a href="http://link.com">Click here</a></code>
</ol>
<p>Don't worry too much about WHERE you're putting things for now. Just write some code!</p>
<p>Don't forget to save and refresh your browser to see your code in action!</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>A note about attributes</h2>
<p>Attributes are another important part of HTML markup.</p>
<p>An HTML attribute is a modifier of an HTML element. HTML attributes generally appear as name-value pairs, separated by "=", and are written within the start tag of an element, after the element's name:</p>
<pre><code><tag attribute="value">(content to be modified by the tag)</tag></code></pre>
<p>Where "tag" names the HTML element and "attribute" is the name of the attribute.</p>
<p>Here's an example of an attribute that we've already seen today:</p>
<pre><code><a href="link.com">Click here</a></code></pre>
<p>In this case, "a" is the tag, "href" is the attribute and "http://link.com" is the value.</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercise: Let's write the markup for our final project</h2>
<p>The output (what you'll see in your browser) of this exercise is on the next slide. Write the HTML.</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Write the HTML that will output this:</h2>
<img src="assets/step_1_output.jpg">
<p>Hint: You'll want to use <code><h1></code> and <code></h1></code> once, <code><h2></code> and <code></h2></code> three times and <code><h3></code> and <code></h3></code> once.</p>
<p>You can 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> or <a href="http://baconipsum.com/">Bacon Ipsum</a>, for something new.
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Adding images</h2>
<p>Let's learn to add images to our webpages. Note that image tags are unique in that they are "self-closing" - there is no closing tag.</p>
<p>Let's start by adding an image that is hosted online. Here's the code:</p>
<pre><code class="language-markup">
<img src="http://placekitten.com/g/200/200">
</code></pre>
<p>Try copying and pasting that 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 the kitten photo.</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Adding images, Part 2</h2>
<p>You can add images another way - rather than linking to images hosted online, you can link to images in a folder on your computer.</p>
<p>In the Project folder, at the same level as "blank.html", there's an image called "logo.png". To include this image on our website, we'll need the following code:</p>
<pre><code class="language-markup">
<img src="logo.png">
</code></pre>
<p>Try copying and pasting that line of code into your project, right under the opening <code><body></code> tag.</p>
<p>Next, try replacing that image with one of the images in the Project "images" folder. Hint: it will look similar, but with "images/" in front of the image name. (This is because "images" is the name of the folder - we have to tell our browser where to look.)</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercise: Add a logo and profile image to your project</h2>
<p>The output (what you'll see in your browser) of this exercise is on the next slide. Write the HTML.</p>
<p><strong>Hint: the logo image is called "logo.png", and the placeholder profile image is called "profile.jpg". Both can be found inside the "images" folder.</strong></p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Write the HTML that will output this:</h2>
<img src="assets/step_2_output.jpg">
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>A quick note about image types:</h2>
<p>There are three main image types: jpg, png and gif. Here's a general rule of thumb:</p>
<ul>
<li>Using a large image or photograph: choose jpg</li>
<li>For icons, logos, text or anything that requires transparency: choose png</li>
<li>For animations, especially of cats: choose gif (this is a joke)</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>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercise: Add a few more images</h2>
<p>Your output should look like what's on the following slide.</p>
<ul>
<li>Add images of your favourite things (check out <a href="http://tessalt.github.io/LLC-HTML-CSS/Project/final.html">this link</a> and scroll down to see the section we're talking about). Try not to choose huge images right now - we'll show you how to resize images using CSS later.</li>
<li>Add Twitter, Facebook and LinkedIn icons to the links - you'll have to use nested tags for this one, so that the image itself is actually a link! You'll find logos you can use in the Project/images folder.</li>
</ul>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Write the HTML that will output this:</h2>
<img src="assets/step_3_output.jpg">
</article>
<!-- SLIDE: 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: HTML -->
<article class='slide slide-list'>
<h2>A note about organization</h2>
<p>Did you see how the markup in the previous slide was really clean 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 we get into CSS, you'll be grateful!</p>
<p><strong>And now, on to CSS!</strong></p>
</article>
<!-- END OF HTML SECTION -->
<!-- SLIDE: CSS Basics -->
<article class='slide slide-subhead'>
<h1>CSS basics</h1>
</article>
<!-- SLIDE: CSS and HTML -->
<article class="slide slide-subhead">
<h1>CSS is closely paired with HTML</h1>
<h2>CSS doesn't do anything on its own, it's the presentation layer on top of a content base</h2>
<h2>If HTML is the beams of the house, CSS is the layout, paint, and decorations</h2>
</article>
<!-- SLIDE: 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 <strong>selector</strong> and one or more <strong>declarations</strong></p>
<p>A <strong>selector</strong> tells the browser what element(s) we are styling.</p>
<p>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. Our styles will go between the curly brackets.</p>
</article>
<!-- SLIDE: CSS Syntax 2 -->
<article class="slide slide-list">
<h2>CSS Syntax</h2>
<p>A <strong>declaration</strong> tells the browser what style we want to apply to our element</p>
<p>A declaration is always made up of two parts: a <strong>property</strong> and a <strong>value</strong></p>
<p>A <strong>property</strong> tells the browser what we are modifying (ex. font, colour, size)</p>
<p>A <strong>value</strong> tells the browser how 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 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 that you write the syntax correctly, with a colon after the property name and a semi-colon after the value.</p>
</article>
<!-- SLIDE 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</p>
<p>You add the style tags to the <code><head></code> 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: 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: CSS Syntax 4 -->
<article class="slide slide-list">
<h2>CSS Syntax</h2>
<p>We can add multiple declarations (property: value; sets) to one selector to modify multiple properties:</p>
<pre><code class="language-css">
h2 {
background-color: green;
font-size: 50px;
}
</code></pre>
<p>Make sure you always end each declaration with a semi-colon</p>
<p>Try replacing the previous rule for <code><h2></code> with this one and refreshing 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 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 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 specifies a colour.</p>
<p>You don't have to understand how they work, just remember that they start with a <code>#</code> sign. It might help you to know the Hex codes for some of the basic colours:</p>
<ul>
<li>White: <code>#FFFFFF</code></li>
<li>Black: <code>#000000</code></li>
<li>Red: <code>#FF0000</code></li>
<li>Green: <code>#00FF00</code></li>
<li>Blue: <code>#0000FF</code></li>
</ul>
<p>The code for a nice dark grey is <code>#444444</code>. Let's add it.</p>
<pre><code class="language-css">
body {
color: #444444;
}
</code></pre>
<p>Check out<a href="http://www.colorpicker.com/">http://colorpicker.com</a> for more awesome colours!</p>
</article>
<!-- SLIDE 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>
</article>
<!-- SLIDE 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 like Helvetica: </p>
<pre><code class="language-css">
body {
color: #444444;
font-family: Helvetica, Arial, sans-serif;
}
</code></pre>
<p>The font-family property accepts a list of font names: the first font is your first-choice font, the next ones are fallbacks in case that font is not available. Not all fonts are commonly available, 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>
</article>
<!-- SLIDE 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 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 CSS Images 1 -->
<article class="slide slide-list">
<h2>Styling Images</h2>
<p>Let's add a dark border around the profile image. Start by writing a selector to pick out the <code><img></code> tag.</p>
<pre><code class="language-css">
img {}
</code></pre>
<p>The <code>border</code> property has 3 parts: the width, the style, and the colour. So, if we want a 1px wide, solid, grey border, we use:</p>
<pre><code class="language-css">
img {
border: 1px solid grey;
}
</code></pre>
</ul>
</article>
<!-- SLIDE CSS Classes 1 -->
<article class="slide slide-list">
<h2>Being More Specific</h2>
<p>Our border is now applying to <strong>all</strong> images on the page, including our logo. 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. We call these "classes".</p>
<p>Classes are attributes that you add on to tags.</p>
<pre><code class="language-markup">
<p class="classname"></p>
</code></pre>
</article>
<!-- SLIDE CSS Classes 2 -->
<article class="slide slide-list">
<h2>Targeting an Element with a Class</h2>
<p>We can write a selector in our css to target the element we added a class to using a <code> . </code></p>
<pre><code class="language-css">
p.classname {}
</code></pre>
<p>And then apply the styles we want to only the item with the class:</p>
<pre><code class="language-css">
p.classname {
color: red;
}
</code></pre>
</article>
<!-- SLIDE CSS Classes Exercise -->
<article class="slide slide-list">
<h2>Exercise: Style Profile Image</h2>
<ul>
<li>Add some style to your profile image!</li>
<li>Add a class of <code>profile</code> to the tag for your profile image</li>
<li>Target that class in your CSS with the selector <code>img.profile</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">
img {
width: 200px;
height: 200px;
}
</code></pre>
</ul>
</article>
<!-- SLIDE 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" src="images/profile.jpg">
</code></pre>
<p>And your CSS should look something like this:</p>
<pre><code class="language-css">
img.profile {
border: 1px solid grey;
width: 200px;
height:200px;
}
</code></pre>
</article>
<!-- SLIDE CSS Classes on multiple elements -->
<article class="slide slide-list">
<h2>Adding More Classes</h2>
<p>We can do the same thing to style our "favourite things" images.</p>
<p>Since we probably want all four images to have the same styles, we can add the same class to each.</p>
<p>Add a class of "favourite" to each of the four images.</p>
<pre><code class="language-markup">
<img class="favourite" src="images/kitten.jpg" >
</code></pre>
<p>Add some styles to your images, using things like <code>width</code>, <code>height</code>, and <code>border</code>.</p>
</article>
<!-- SLIDE CSS Classes on fav images -->
<article class="slide slide-list">
<h2>More Stuff You Can Do</h2>
<ul>
<li>Try something fun like <code>border-radius: 50%;</code></li>
<li>Or <code>border: 3px dotted pink;</code></li>
<li>Or even <code>box-shadow: 0 0 4px grey;</code></li>
<li>Your CSS might look something like this:</li>
<pre><code class="language-css">
img.favourite {
border: 1px solid grey;
width: 200px;
height: 200px;
border-radius: 50%;
}
</code></pre>
</ul>
</article>
<!-- SLIDE CSS Properties -->
<article class="slide slide-subhead">
<h1>Don't worry if it seems like there are a lot of CSS properties to remember. Keep looking them up on the internet and they'll sink in eventually. Even the pros have to look things up every once in a while :)</h1>
</article>
<!-- SLIDE 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 "Box Model" 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 CSS Box Model 2 -->
<article class="slide slide-list">
<img src="assets/redboxes.png"></li>
</article>
<!-- SLIDE 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>
</article>
<!-- SLIDE CSS Box Model: Margin & Padding -->
<article class="slide slide-list">
<h2>Margin and Padding</h2>
<ul>
<li>Let's say we have 3 elements in our HTML document: a <code><p></code>, an <code><h2></code>, and another <code><p></code></li>
<li>Let's put a red border around the <code><h2></code> and add a pink background:</li>
<pre><code class="language-css">
h2 {
border: 1px solid red;
background: pink;
}
</code></pre>
<li>So far, this looks pretty awfull. All the elements are too close to each other!</li>
<img src="assets/bm1.png">
</ul>
</article>
<!-- SLIDE CSS Box Model: Margin-->
<article class="slide slide-list">
<h2>Margins</h2>
<p>There are two CSS properties for adding space around our elements: <code>margin</code>, and <code>padding</code></p>
<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>This code adds 40px of space on every side of the element.</p>
<img src="assets/bm2.png" alt="">
</ul>
</article>
<!-- SLIDE CSS Box Model: Padding -->
<article class="slide slide-list">
<h2>Padding</h2>
<p>If we want to add some space <em>inside</em> the border, we use the <code>padding</code> property:</li>
<pre><code class="language-css">
h2 {
margin: 40px;
padding: 40px;
}
</code></pre>
<p>This code adds 40px of space to every side of the element, but it does so within the border.</p>
<img src="assets/bm3.png" alt="">
</ul>
</article>
<!-- SLIDE CSS 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.</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.</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>
<!-- TODO: diagram of h2 thing -->
</article>
<!-- SLIDE CSS Box Mdoel: Margin & Padding Sides -->
<article class="slide slide-list">
<h2>More on Margins and Padding</h2>
<p>You can specify which side of an element you want your margins to apply to with the <code>margin-top, margin-right, margin-bottom,</code> and <code>margin-left</code> properties:</p>
<pre><code class="language-css">
h2 {
margin-top: 40px;
margin-bottom: 40px;
}
</code></pre>
<p>The same goes for <code>padding</code> and <code>border</code>:</p>
<pre><code class="language-css">
h2 {
padding-bottom: 40px;
border-left: 1px solid red;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model Exercise -->
<article class="slide slide-list">
<h2>Exercise: Box Model</h2>
<ul>
<li>Add some <code>padding</code> to your profile image. This should create space <em>between</em> the image and the border around it. Try about 5px.</li>
<li>Add both <code>padding</code> and a <code>margin</code> to your 'favourite things' images. Try 5px for the <code>padding</code> and about 10px for the <code>margin.</code></li>
</ul>
</article>
<!-- SLIDE CSS Box Model Answer -->
<article class="slide slide-list">
<h2>Solution: Box Model</h2>
<p>Your code should look something like this:</p>
<pre><code class="language-css">
img.profile {
padding: 5px;
}
img.favourite {
padding: 5px;
margin: 10px;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model: Center logo -->
<article class="slide slide-list">
<h2>Centering the Logo</h2>
<p>We probably want that logo to be in the centre of the page. To centre elements in CSS, we set the margins on the sides to <code>auto</code>, which causes the browser to automatically calculate how much margin to add to each side to centre the element.</p>
<p>Instead of specifying both the <code>margin-left</code> and <code>margin-right</code> properties, we can use a shorthand that looks like this:</p>
<pre><code class="language-css">
img {
margin: 0 auto;
}
</code></pre>
<p>The <code>0</code> sets both the top margin and the bottom margin, and the <code>auto</code> sets both the left and right margins. </p>
</article>
<!-- SLIDE CSS Box Model: Center Logo 2 -->
<article class="slide slide-list">
<h2>Centering the Logo</h2>
<p>We need a way to target our logo element so that we don't end up centering all the images.</p>
<p>Add a class called <code>logo</code> to your logo <code><img></code> tag:</p>
<pre><code class="language-markup">
<img class="logo" src="images/logo.png">
</code></pre>
<p>Then write a selector in your CSS and apply the <code>margin</code> property:</p>
<pre><code class="language-css">
img.logo {
margin: 0 auto;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model: Center logo 3 -->
<article class="slide slide-list">
<h2>Nothing Happened!</h2>
<p>Let's take a few steps back:</p>
<p>Remember the boxes with the red outlines?</p>
<img src="assets/redboxes.png" width="400px;">
<p>Did you notice that the red outlines around the images don't stretch accross the whole screen like the other boxes do?</p>
</article>
<!-- SLIDE CSS Box Model: Block vs. Inline -->
<article class="slide slide-list">
<h2>Nothing Happened, Part 2</h2>
<p>This is because images are <em>inline</em> elements. Inline elements do not take up the full width of the page, they only take up as much space as the content requires.</p>
<p>Most elements, like <code><h2>, <p>,</code> or <code><ul></code> take up the whole width of the page, these are called <em>block</em> elements.</p>
<p>Because our logo element is only as wide as the image, we can't centre it relative to the page. Luckily, this is easy to fix: we just tell the <code><img></code> tag to behave like a block element instead, by setting the <code>display</code> property.</p>
<pre><code class="language-css">
img.logo {
margin: 0 auto;
display: block;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model: Inline -->
<article class="slide slide-list">
<h2>Other Inline Elements</h2>
<p>Other common inline elements include <code><a>, <strong>,</code> and <code><em></code>.</p>
<p>Inline elements don't create line breaks, so they are usually tags that you might find inside a paragraph or in the middle of a sentence.</p>
</article>
<!-- SLIDE CSS Layout Intro -->
<article class="slide slide-list">
<h2>Layout: Section by Section</h2>
<p>Our site looks much better now, but now it's time to style the individual sections.</p>
<p>We'll need a way to target each section independently, grouping elements within the same section together, creating a layout.</p>
<p>Conveniently enough, HTML provides the <code><section></code> tag. We'll wrap each section within a <code><section></code> tag and add a class to each one, so we can style each section using CSS.</li>
</article>