forked from canadalearningcode/llc-html-css-multi-page-site
-
Notifications
You must be signed in to change notification settings - Fork 1
/
slides.html
1846 lines (1409 loc) · 86 KB
/
slides.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 lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ladies Learning Code</title>
<!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<!-- Theme-specific styles -->
<link href='http://fonts.googleapis.com/css?family=Quicksand%7CPacifico%7COpen+Sans:400italic,400,300' rel='stylesheet' type='text/css' data-noprefix>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="framework/css/highlightjs-themes/googlecode.css" data-noprefix>
<link rel="stylesheet" href="framework/css/theme-llc.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Workshop-specific styles -->
<link rel="stylesheet" href="framework/css/workshop.css" data-noprefix>
<!-- Takes care of CSS3 prefixes! -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body data-duration="360">
<!-- Welcome slide -->
<header class="slide intro first">
<img class="logo" src="framework/img/logo-llc-white.png" alt="Ladies Learning Code logo">
<div class="info">
<h1 class="heading-bg">
<span class="dark">Welcome to</span><br>
<span>Ladies Learning Code!</span>
</h1>
<!-- <div class="heading-bg connected">
<span class="dark">GET CONNECTED:</span>
<span class="light">NETWORK: network name</span><br>
<span class="light">PASSWORD: thepassword</span>
</div> -->
</div>
<div class="sponsor">
<p>In partnership with:</p>
<img src="framework/img/telus-logo-white.svg" alt="Telus logo">
</div>
</header>
<main>
<!-- Instructor info -->
<section class="slide intro">
<img class="logo" src="framework/img/logo-llc-white.png" alt="Ladies Learning Code logo">
<div class="info">
<h1 class="heading-bg">
<span>Intro to HTML & CSS</span><br>
<span>Building a Multi-page website</span>
</h1>
<!-- <h2><span>with</span> Instructor Name</h2>
<img class="instructor-img" src="http://cl.ly/image/0r3Q3H110G36/profile-generic.jpg" alt="instructor name">
<ul>
<li><i class="fa fa-envelope"></i><a href="mailto:">hello@email.com</a></li>
<li><i class="fa fa-desktop"></i><a href="#">mywebsite.com</a></li>
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/">@twitter</a></li>
</ul> -->
</div>
<div class="presenter-notes">
<p>It's important to note at the beginning that a lot of material will be covered and their site will not be 100% perfect by the end of the day. But the goal of the day is to learn about the concepts and be able to have a project that they can continue to work on. Additional resources are provided at the end to help them add more enhancements their project. It's a lot to cover in one day and today will just be a "guided tour." Also, reinforce throughout the day each concept introduced is to help build the site, bit by bit and to focus on the task at hand.</p>
<p>All code blocks in white are editable and CSS changes will be reflected in the slide. For exercises, all instructions listed under <strong>bonus</strong> are for those who complete the exercises early to make sure learners at all different levels have something to work on.</p>
</div>
</section>
<section class="slide centered project">
<h2>Today’s Project</h2>
<p>Follow this <a href="http://ladieslearningcode.github.io/llc-html-css-multi-page-site/project/final/">link</a> to see the whole project!</p>
<img src="framework/img/workshop/project1.jpg" alt="project home page" title="">
<img src="framework/img/workshop/project2.jpg" alt="project about page" title="">
<img src="framework/img/workshop/project3.jpg" alt="project contact page" title="">
<div class="presenter-notes" style="text-align:left;">
<p>It might be helpful to leave the final project open in an extra tab to be able to refer to it throughout the day to show what each exercise is trying to work towards. Though each exercise also has its own example as well.</p>
</div>
</section>
<section class="slide" data-markdown>
##Course Outline
###Morning
* Intro to HTML
* Write the HTML for your project
* Intro to CSS
###Afternoon
* More CSS & HTML
* Next steps
</section>
<section class="slide" data-markdown>
##Getting Started: Web Browser
**[Google Chrome](https://www.google.com/intl/en-CA/chrome/browser/)** - Choose a modern web browser that supports current web standards and has good development tools. To set Chrome as your default browser, follow [these instructions](https://support.google.com/chrome/answer/95417?hl=en). Another good option is Firefox. Visit [browsehappy.com](http://browsehappy.com) for more info about modern browsers.
You can view the source of any web page by right-clicking (or two-finger tap) on *any* web page! Let's go to http://ladieslearningcode.com and view the source. That's HTML.
**Developer tools** take it a step further and allows us to *inspect* any web page making it easier to test and debug code. The tools can be accessed in 3 ways:
* right-click / two-finger tap on a web page and select **Inspect Element**
* select the menu icon  in the top right hand corner and select **Tools > Developer Tools**
* keyboard shortcut: **Ctrl + Shift + I** (PC) / **Cmnd + Option + I** (Mac)
Extra resource: http://discover-devtools.codeschool.com
</section>
<section class="slide" data-markdown>
##Getting Started: Text editor
You can write code using your computer's default text editor, Notepad (Windows) or TextEdit (Apple), but choosing a text editor with colour highlighting and other helpful features will improve your work flow.
**[Sublime Text](http://www.sublimetext.com/)** is a great option and is the editor we'll be using today.
If you are unable to install Sublime Text, there are many free and paid [options](http://en.wikipedia.org/wiki/List_of_HTML_editors).
Try [Notepad++](http://notepad-plus-plus.org/) (Windows) or [Atom](https://atom.io/) (Mac).
</section>
<section class="slide" data-markdown>
##What exactly *is* a website?
A website is basically a collection of web pages, aka **HTML documents**, that closely match a file folder structure.
| mysite.com (index.html) | mysite.com/about.html | mysite.com/contact.html |
|------------|------------|--------------|
|  |  |  |
</section>
<section class="slide basic-web-page">
<h2>A Basic Web Page</h2>
<p>Web pages are generally built using 3 web languages:</p>
<p><strong>HTML (Hypertext Markup Language)</strong> is a <em>markup</em> language used to define the content.</p>
<div class="example">
<p>I'm just a paragraph.</p>
</div>
<p><strong>CSS (Cascading Style Sheets)</strong> is a <em>style sheet</em> language used to create the presentation and look of a site.</p>
<div class="example css">
<p>I'm a paragraph with <span>style</span>.</p>
</div>
<p><strong>JavaScript</strong> is a <em>programming</em> language used to define the behavior and add functionality to a website.</p>
<div class="example">
<p onclick="alert('clicked!');">I'm a paragraph that can be clicked. Try it!</p>
</div>
</section>
<section class="slide">
<h2>Setting Up Your Work Flow</h2>
<p>Inside of the folder you downloaded today (<strong>llc-html-css-multi-page-site-master</strong>), there are many folders and files that contain different content.</p>
<pre><code>llc-html-css-multi-page-site-master
|-- framework // Contains files needed for slide presentation. Do not edit!
|-- project // Contains files for today's workshop.
|-- css // Only CSS files here.
|-- examples // Example HTML/CSS files for each exercise.
|-- final // Finished example for you to refer to.
|-- images // Images for your project. You can also add your images here.
|-- index.html // The first page / homepage of your site.
|-- slides.html // This is the file you're viewing right now (slides)!</code></pre>
</section>
<section class="slide" data-markdown>
##Setting Up Your Work Flow
Let's open the project files in the browser and text editor.
1. Open Sublime Text and go to **File > Open**.
1. Navigate to the **Project** folder (inside the folder you downloaded with today's slides).
With the entire folder selected, select **Open**.
1. The folder will appear in the side bar. Double click on **index.html** in the sidebar to open it.
1. Right click or two-finger tap in Sublime and select **Open in Browser**. This will open the HTML file in your *default* browser.
* If Chrome is not your default browser, go to your Window/Finder and navigate to the **project** folder, right-click/two-finger tap on **index.html** and choose **Open With > Chrome**
You should see this:
</section>
<section class="slide">
<h2 id="making-changes">Making changes</h2>
<p>Let's make a change. Replace the “your name here” content, save the file, then refresh your browser. This will be your work flow for the day.</p>
<ol>
<li>update the code</li>
<li>save the file in Sublime</li>
<li>refresh the browser</li>
</ol>
<p><strong>Protip!</strong> Use keyboard shortcuts to improve your work flow.<br>
<code>ctrl/cmnd + s</code> to save<br>
<code>ctrl/cmnd + r</code> to refresh the browser</p>
<div class="presenter-notes">
<p>Let the learners know that there is an exercise coming up very soon to update the rest of the page. This is just to introduce them to the update/save/refresh flow and to break up the lecture a bit more.</p>
</div>
</section>
<section class="slide title" data-markdown>
#What is HTML?
##The content layer
</section>
<section class="slide" data-markdown>
##HTML tags
HTML was created for web browsers to read. To display content properly in the browser, use **tags**. Left & right angled brackets (`shift` + comma key and `shift` + period key ) surround the tag name. Tags *usually* come in pairs — an opening tag and a closing tag with a forward slash:
```xml
<tagname></tagname>
```
Just like the different languages that we speak and write, HTML has to follow proper "grammar" rules too. This is referred to as **syntax**. Also, note that tags are used to describe the content, **not** what they look like. That's what CSS is for.
The are many different HTML tags used to create structure and add semantics (meaning) to the content.
```xml
<p>I'm a paragraph because I'm wrapped by paragraph tags.</p>
```
</section>
<section class="slide">
<h2>Nesting HTML tags</h2>
<p>Tags are often nested within other tags and make up the <em>document tree</em>. The relationships are just like a family tree; branches of ancestors, parents, children, siblings, etc. Understanding this relationship will come in handy for writing CSS. Also, whitespace through indentation of nested elements makes HTML easier to read.</p>
<pre><code><!DOCTYPE html>
<html>
<head><!-- child of html tag, parent of title tag -->
<title></title>
</head>
<body><!-- child of html tag -->
</body>
</html></code></pre>
<ul>
<li>
The <code><html></code> tag is always first and <strong>all</strong> other tags are nested within <code><html></code>.
</li>
<li>
What is the relationship of <code><title></code> to the <code><head></code> tag? <span class="delayed"><em>child element</em></span>
</li>
<li class="delayed">
What is the relationship between the <code><head></code> and <code><body></code> tags? <span class="delayed"><em>siblings</em></span>
</li>
</ul>
</section>
<section class="slide" data-markdown>
##Writing HTML
To ensure that your tags are closed properly, write the open tag and close tag **first**, then move the cursor between the tags to add your content.
</section>
<section class="slide" data-markdown>
##Writing HTML
When nesting tags, make sure to indent by pressing the **tab** key once to clearly show which elements are nested.
</section>
<section class="slide" data-markdown>
##Basic HTML document
We've seen these tags in our project file. These are the basic HTML tags required for every web page.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
* `doctype` - Though not an HTML tag, it is always the first line. It tells the browser what version of HTML the document is written in.
* `<html>` - Always first, making it the ancestor of all other elements. It identifies the document as HTML.
* `<head>` - Contains information about the web page but doesn’t display on the web page itself. Examples include the page title (`<title></title>`) and links to external CSS files.
* `<body>` - All content to be displayed in the browser window, also known as the viewport, goes between the `body` tags.
</section>
<section class="slide title" data-markdown>
#Adding content
</section>
<section class="slide" data-markdown>
##Adding text
Heading tags are used for page headings. There are six headings tags ranging from `<h1>` to `<h6>` and follow a hierarchy. `<h1>` is the most significant heading on the page.
```xml
<h1>Name of blog</h1>
<h2>Title of blog post</h2>
<h3>Sub headings within blog post</h3>
```
Paragraphs are represented by the `<p>` tag.
```xml
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```
Links are represented by the `<a>` (anchor) tag. The `href` *attribute* is needed to specify the link location (more on this later).
```xml
Visit <a href="http://ladieslearningcode.com">Ladies Learning Code</a>.
```
</section>
<section class="slide">
<h2>Exercise #1 - Updating your home page (5 mins)</h2>
<ol>
<li>In the Sublime Text editor, update your name in the <code>h1</code> tag if you haven’t already.</li>
<li>Add your tag line under your name using the appropriate heading tag.</li>
<li>Change the content in the <code>title</code> tag. Where do you see this change?</li>
<li>Add a copyright message using a paragraph (<code>p</code>) tag <em>inside</em> of the <code>footer</code> tag.</li>
</ol>
<p><strong>Bonus:</strong> Try using an HTML code for the copyright <em>symbol</em>. Here are some resources: <br>
<a href="http://character-code.com/ascii-table.php">http://character-code.com/ascii-table.php</a> <br>
<a href="http://unicode-table.com/en/#00A9">http://unicode-table.com/en/#00A9</a></p>
<p>Don’t forget to save and refresh your browser after each change!</p>
<p>Your page should now look similar to <a href="project/examples/exercise1.html">exercise1.html</a></p>
<div class="presenter-notes">
<p>Use the exercise time to follow along with the current exercise. Since the exercises switch between code-alongs and independent exercises throughout the day, it will be easier to demonstrate the code-alongs if your version is at the same state as the learners.</p>
</div>
</section>
<section class="slide project" data-markdown>
##Adding more HTML & content
All three pages have the same headings, navigation links and footer information. Though the home page header and navigation *look* different from the other two pages, don't worry about that just yet. Right now we are just concentrating on adding the HTML.
**Protip!** It's best to write as much HTML & content as possible before adding CSS to ensure that the proper tags are being used. This will help keep your code organized and [semantic](http://en.wikipedia.org/wiki/Semantic_HTML).
</section>
<section class="slide" data-markdown>
##Navigation menu & Lists
Navigational elements are commonly created using lists.
There are two kinds of lists in HTML: ordered (`ol`) for numbered lists & unordered (`ul`) for lists with bullets. Content must be included **only within the list item** (`li`).
Since the order of the list items doesn't matter for creating nav items, an unordered list can be used.
```xml
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
```
```xml
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
```
</section>
<section class="slide" data-markdown>
##Links & Attributes
The purpose for creating page navigation is to link to other pages. In addition to creating a list, we'll also need to add links to navigate between the three pages.
Links are represented by the `<a>` (anchor) tag. Unlike the tags we've looked at so far, anchor tags need additional information to specify where to link *to*. An **attribute** can provide additional information and is *added inside the opening tag*.
```xml
Visit <a href="http://ladieslearningcode.com">Ladies Learning Code</a>.
```
In the above example, `href` is the *attribute*, `http://ladieslearningcode.com` is the *value*.
Also, note that the clickable text goes in between the opening and closing a tags.
</section>
<section class="slide" data-markdown>
##Links: Absolute vs Relative
This is an example of an **absolute hyperlink**. Much like typing a URL into the browser, it's "fully resolved" and starts with `http://`.
```xml
Visit <a href="http://ladieslearningcode.com">Ladies Learning Code</a>.
```
Hyperlinks can also link to other pages within your own folder structure. The below is an example of a **relative path**. The path is relative to its place within the folder structure. If your HTML pages are within the same folder, they can be linked by using just the file name.
```xml
<a href="about.html">About Me</a>
```
Remember, a website is basically a collection of pages linking to other HTML pages and files such as images and css files.
</section>
<section class="slide" data-markdown>
##HTML5 Sectioning Tags
Sometimes, multiple HTML elements need to be grouped together for organization and/or for styling. Prior to HTML5, the `<div>` tag was used for grouping elements. While it is still valid, HTML5 introduced a number of semantic tags that better describe blocks of content. You've already seen two of them: `<header>` and `<footer>`. We'll be using a few more later on today.
For the navigation, adding a `<nav>` tag around the list will make it more semantic. It can also be grouped with the headings by adding it *inside* of the `<header>` tag.
```xml
<header>
<h1>Jane Smith</h1>
<h2>Web Developer + City Girl</h2>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
```
**Extra resource:** More about HTML5 here: http://html5doctor.com
</section>
<section class="slide">
<h2>Class exercise: Add a navigation</h2>
<p>Go back to <strong>index.html</strong> and create a navigation list for the three pages: <strong>Home</strong>, <strong>About</strong>, <strong>Contact</strong>.</p>
<p>Eventually we’ll have 3 HTML pages, <strong>index.html</strong>, <strong>about.html</strong> and <strong>contact.html</strong> so make sure to use <em>relative</em> links to these pages in the navigation list.</p>
<pre><code><header>
<h1>Jane Smith</h1>
<h2>Web Developer + City Girl</h2>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header></code></pre>
<p> Your page should now look like this:</p>
<p><img src="framework/img/workshop/nav-list.png" alt="nav list" title=""></p>
<div class="presenter-notes">
<p>Anything titled “class exercise” is meant to be a type along exercise. For type along exercises, try to type out each code block rather than copy and paste from the slides to get learners to think about what they're typing about and get practice actually typing it. The code is there just as reference and for learners to have something to compare to outside of the workshop.</p>
</div>
</section>
<section class="slide" data-markdown>
##Creating HTML pages
To create an HTML page, name your file using an `.html` extension and it will open in your default browser (much like .pdf for PDF files or .doc for Word files). Here are some best practices and good file naming tips.
* Use lowercase letters.
* **about.html** instead of **About.html** or **ABOUT.html**
* Avoid s p a c e s. Use underscores (`_`) or dashes (`-`).
* Note that [dashes are preferred for SEO](http://searchengineland.com/9-seo-quirks-you-should-be-aware-of-146465) (search engine optimization).
* **business-hours.html** instead of **business hours.html**
* The browser will interpret spaces as **business%20hours.html**
* Avoid symbols like `#` `&` `*` in your file name.
* Keep your file names concise, yet meaningful.
* **about.html**, **contact.html** instead of **page1.html**, **page2.html**
**Protip!** These file naming tips can be applied to any files such as images, folders, CSS, etc.
</section>
<section class="slide">
<h2>Exercise #2 - Adding pages and content (10mins)</h2>
<p>We are just adding HTML content so don’t worry about how to style the page just yet. Writing code often requires a lot moving, deleting and adding content. Here are some more shortcuts that will come in handy to speed up your work flow.</p>
<p>
<code>ctrl/cmnd + c</code> to copy <br>
<code>ctrl/cmnd + x</code> to copy and cut <br>
<code>ctrl/cmnd + v</code> to paste <br>
<code>ctrl/cmnd + s</code> to save <br>
<code>ctrl/cmnd + r</code> to refresh browser
</p>
<ol>
<li>Create an new page (cmnd/ctrl + n) and name it <strong>about.html</strong>
<ul>
<li>Save it in the same folder as <strong>index.html</strong> (project folder)</li>
<li>Copy all the contents from <strong>index.html</strong> into your new page. It's is all the same content right now.</li>
<li>Update the <code>title</code> tag to reflect the contents of the page. (e.g. Your Name | About Me )</li>
</ul>
</li>
<li>Create a new page and name it <strong>contact.html</strong>
<ul>
<li>Follow the same instructions as the About page.</li>
</ul>
</li>
<li>Test the navigation. Are all the links going to the proper page?</li>
</ol>
<p>If you get stuck, you can take a peek in the <strong>examples</strong> folder: <a href="project/examples/exercise2-home.html">exercise2-home.html</a>, <a href="project/examples/exercise2-about.html">exercise2-about.html</a>, <a href="project/examples/exercise2-contact.html">exercise2-contact.html</a></p>
<p><strong>Bonus:</strong><br>
Find an image to use as a profile picture for your <strong>About</strong> page. The image should ideally be around 600 x 400px. Here's a link to a free online tool for cropping images: <a href="http://apps.pixlr.com/editor/">http://pixlr.com</a></p>
<div class="presenter-notes">
<p>Check in with learners after 10mins. If majority of people have not finished, give them 5-10 more minutes. If they are still not done after that, let them know they'll have some time in the next exercise to finish up.</p>
</div>
</section>
<section class="slide" data-markdown>
##Leave a Comment
Sometimes you want to leave notes for yourself (or others) but don't want it to display in the browser. That's when comments can be really helpful. Comments can be used for:
* hiding code for later use
* leaving notes
* organizing the document
The syntax for comments start with `<!--` and ends with `-->`.
```
<!-- This is my comment. Comments should always be included between the dashes. -->
```
</section>
<section class="slide" data-markdown>
##Image Types
There are many different file types that can be used for the web. Each type is best suited for specific kinds of images. Use the format that maintains the best quality while reducing the file size.
**jpg** - used for photographs with lots of rich colours or gradients
**png** - used for images with transparent or opaque backgrounds
**gif** - used for images with minimal colour variation and of course, for animated gifs!
**svg** - used for 2D graphics and is very scaleable. Based on XML and can be used as a image file or in the HTML document. When included as HTML, CSS can be used to style the svg!
**More about SVG:** http://css-tricks.com/using-svg
</section>
<section class="slide centered gif-wall" data-markdown>
##Bonus: gif wall
[image source]()
</section>
<section class="slide">
<h2>Adding images</h2>
<p>Images are an example of a void element/self-closing tag. It doesn't need a closing tag because it <em>is</em> the content. Read more about void elements <a href="framework/extras-void-elements.html">here</a>.</p>
<p>Just like links, the image tag also requires an <em>attribute</em> to define the file path of the image file. However, it uses the <code>src</code> attribute (not <code>href</code>). The value can be an absolute or relative path. The below is an example of an absolute path.</p>
<pre><code><img src="http://fillmurray.com/200/300"></code></pre>
<p><img src="http://fillmurray.com/200/300"></p>
<p>If you don’t have a picture to use at the moment and need a placeholder, there are many services available such as:</p>
<ul>
<li><a href="http://placehold.it">http://placehold.it</a></li>
<li><a href="http://placesheen.com/">http://placesheen.com/</a></li>
<li><a href="http://placebear.com">http://placebear.com</a></li>
<li><a href="http://fillmurray.com/">http://fillmurray.com/</a></li>
<li><a href="http://placekitten.com/">http://placekitten.com/</a></li>
<li>and <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx">many more</a>!</li>
</ul>
</section>
<section class="slide" data-markdown>
##The alt attribute
`alt` is an optional image **attribute** and refers to *alternative text*. Alt text is read by screen reading software used by visually impaired users.
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.
HTML tags can contain more than one attribute. Here's how you would use the `alt` attribute with the `src` attribute.
```
<img src="images/profile.jpg" alt="Jane Smith">
```
</section>
<section class="slide" data-markdown>
##Adding your own images
Just like links, you can use a **relative** path to link to your own images. It's common practice to create a folder to organize images separate from HTML files.
In your **project** folder, there is already an **images** folder included in your download. Use the default **profile.jpg** image contained inside or add your own to this folder.
Remember, relative paths are based on the folder structure. Since the HTML pages are *outside* of the **images** folder, the folder name needs to be included in the file path.
```xml
<img src="images/profile.jpg" alt="description of image">
```
</section>
<section class="slide" data-markdown>
##Exercise #3 - Update the About page (15 mins)
Add a profile picture, heading and some information to your About page to make it look like this:
Use the `<section>` tag to create a new sectioning block for the page content. Add it *between* the `<header>` tag and the `<footer>` like this:
```xml
<header>
<h1>Jane Smith</h1>
<h2>Web Developer + City Girl</h2>
<nav>
...
</nav>
</header>
<section>
page content here
</section>
<footer>
...
</footer>
```
1. Inside of the `section` tag, add a profile picture using the `img` tag.
1. *After* your profile picture, add an `h2` for the About page title.
1. *After* the `h2`, add a couple of paragraphs about you, or use placeholder text.
1. We're going to need to work with some additional content in the afternoon so *after* the paragraphs, add a quote using another HTML5 tag. You can use this sample below, or add your own. Just make sure to keep the content within the `<blockquote>` tag.
```xml
<blockquote>
<p>The more that you read, the more things you will know. The more that you learn, the more places you'll go.</p>
<cite>― Dr. Seuss, I Can Read With My Eyes Shut!</cite>
</blockquote>
```
**Bonus:** Try adding a couple links. Ask a mentor how to get a link to open in a new tab/window.
Just like images, there are many services available for placeholder text.
* [Dr. Suess quotes](http://www.goodreads.com/author/quotes/61105.Dr_Seuss)
* http://www.lipsum.com
* http://www.rygo-ipsum.com/
* http://coffeeipsum.com
* http://thewireipsum.com
* http://slipsum.com/
* and [many more](http://meettheipsums.com/)!
For reference, [exercise3-about.html](project/examples/exercise3-about.html) can be found in the **examples** folder but look only if you're stuck!
</section>
<section class="slide title" data-markdown>
#Intro to CSS
##The presentation layer
</section>
<section class="slide" data-markdown>
##CSS & HTML
Though CSS and HTML are closely paired, CSS is a different language and has its own syntax rules.
CSS separates content (i.e. text) from presentation (i.e. text colour) and helps to reduce redundancy.
Older presentational HTML tags like `<center>` and `<font>` should no longer be used because CSS takes care of presentation and styles.
</section>
<section class="slide" data-markdown>
##CSS Terminology & Syntax
**Selectors:** Used to determine which element(s) to apply the styles to.
**Declarations:** Rules to follow & are written using `property:value` pairs.
Each rule must end with a semi-colon (`;`) to indicate the instruction.
All the rules for the selector must be contained within a pair of curly brackets `{}`.
```css
selector {
property: value;
}
```
**Properties** determine the type of style to be applied to the element. **Values** are specific to the property.
```css
h1 {
color: blue;
font-size: 12px;
}
```
</section>
<section class="slide">
<h2>Write some CSS</h2>
<p>Let's try changing the font-size of the paragraphs on this slide using the <code>font-size</code> property.</p>
<textarea class="snippet">p {
}</textarea>
<div class="example">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt sint beatae dolor dolorum aliquid quis explicabo vitae numquam, quas illo dolore molestiae ratione, perferendis, deleniti nemo ea voluptatibus! Quibusdam.</p>
</div>
</section>
<section class="slide" data-markdown>
##Cascading
CSS executes from top to bottom (hence "cascading"), so be careful of the the order of your CSS declarations. The declaration that comes *after* will override the one that came before.
In this example, what colour will the `<h1>` be?
```
h1 {
color: black;
}
h1 {
color: blue;
}
```
</section>
<section class="slide" data-markdown>
##Inheritance and Specificity
One of the strengths of CSS is styles can be inherited from parent to child elements using the family tree relationship between the elements.
```
<body>
<h1>My Website</h1><!-- child of body -->
<p>This is a paragraph.</p><!-- sibling of h1 -->
</body>
```
```
body {
color: blue;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
color: black;
}
```
In the above example, the CSS properties in the body selector is inherited by the children and descendants so all the text would be blue and display the Helvetica font. However, when a more specific selector is used (`h1`), it overrides the inherited values because it's more *specific*.
</section>
<section class="slide" data-markdown>
##Comments
Comments in CSS are written within a slash & asterix (`/* */`) and closes in the opposite order. Comments can be used for the same reasons as HTML comments: leaving notes, hiding code for later and for organization.
```
p {
color: #cc0066; /* magenta */
}
/* HEADER STYLES */
header {
width: 80%;
}
/* Saving this for later
.slider {
width: 100px;
background: red;
}
*/
```
</section>
<section class="slide" data-markdown>
##Referencing CSS
There are three ways to include (otherwise known as *referencing*) CSS in an HTML page. Today we'll be using the **external** method. To read more about **inline** and **internal**, view [this extra resource](framework/extras-referencing-css.html).
The external method links to a separate style sheet file and is recommended because it separates the CSS from the HTML document. Only the CSS file needs to be updated.
The style sheet is referenced in the `<head>` of the document with a `<link>` tag and two **attributes**, `rel` (relationship) and `href`. Just like links, the value of `href` points to the location of the style sheet.
Though it is not required, css files are often saved in a separate css folder for organization, so make sure the file path points to the appropriate directory.
```
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
```
</section>
<section class="slide" data-markdown>
##Class Exercise
In Sublime Text, create a new CSS file by selecting **File > New File** or use shortcut, **CMND/CNTRL + N**. Name the file with a **.css** extension. Some commonly used names are global.css, main.css or style.css. Let's use **style.css** and add it to **about.html**.
**Protip!** Sublime Text has a shortcut. Type "link" with no brackets, then the tab key. Voila!
```
<link rel="stylesheet" href="css/style.css">
```
Let's do a quick check to see if it works and is linked properly by adding a background color on the entire viewport as a test.
```
body {
background: lightblue;
}
```
Notice that the content doesn't quite go to the edge of the page? That's because there's default spacing in the body element.
Remove the test background color and replace it with `padding` and `margin` to reset the value. (more on these later)
```
body {
padding: 0;
margin: 0;
}
```
</section>
<section class="slide" data-markdown>
##CSS colour values
**keywords** - use the actual name for most basic colours (red, green, blue, pink, etc) as well as a few fancy ones like "papayaWhip" and "paleGoldenrod".
**RGB (red-green-blue)** - Uses *three* numerical values from 0-255. 0 represents black, 255 represents white. See below for syntax.
**hex code** - Made up of the number sign (`#`) followed by six hexadecimal characters (0-9, A-F).
```
/* These are all the same colour */
p {
background: firebrick;
background: #B22222;
background: rgb(178,34,34);
}
```
**Colour resources:**
http://colours.neilorangepeel.com
http://www.colorpicker.com
http://www.colourlovers.com
http://flatuicolors.com
http://color.hailpixel.com
</section>
<section class="slide title" data-markdown>
#CSS & TYPOGRAPHY
</section>
<section class="slide" data-markdown>
##Web safe fonts & Web Fonts
Fonts can be changed with the `font-family` property. However, not all fonts are installed on all computers so it's recommended to use fonts that are considered *web safe* — fonts that are commonly included on most computers.
It's best practice to list at least two or three font options to provide a fall-back option in case the user doesn't have the preferred fonts installed.
```
body {
font-family: Helvetica, Arial, sans-serif;
}
```
Here's a handy resource for referencing web safe fonts: [CSS Font Stack](http://cssfontstack.com/).
For more options beyond web safe fonts, services like [Google Fonts](http://www.google.com/fonts/) make it easier to add variety. Google Fonts allows you to link directly to their *hosted* style sheet and fonts and no file downloads are necessary. We'll be using this service in today's project.
</section>
<section class="slide">
<h2>CSS Font Styles</h2>
<p>Let's look at a few CSS properties for styling text together and change some values below and see what happens!</p>
<textarea class="snippet" data-subject="#css-type">color: slateblue;
line-height: 1.25;
font-family: Helvetica, Arial, serif;
font-size: 16px;
font-weight: normal;
text-transform: lowercase;</textarea>
<div id="css-type" class="example">
<p>Just some text to test out the above styles. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni repellat sunt quae fugit illum in aut sed, quis nesciunt totam veritatis, dolores alias modi fuga commodi dicta facilis, consequatur temporibus.</p>
</div>
<p>Resource: <a href="http://reference.sitepoint.com/css/typography">Sitepoint Typographical Properties</a></p>
<div class="presenter-notes">
<p>Explain what each property does while updating each example in the code editor. Talk about the difference between using line-height with and without a measurement unit.</p>
</div>
</section>
<section class="slide" data-markdown>
##Using Google Web fonts
For more options beyond web safe fonts, services like [Google Fonts](http://www.google.com/fonts/) make it easier to add variety. Google Fonts allows you to link directly to their *hosted* stylesheet and fonts and no file downloads are necessary. To use these fonts:
* Select the fonts you want to use and **Add to Collection**.
* You can **Review** them to take a closer look, then choose **Use** when ready.
* Select font weights. The more you choose, the more it will slow down page load time.
* The default character set should contain what you need. Only select an option if you need to add additional language support.
* Grab the `<link>` code snippet and add it the `<head>` part of your page.
* Use the new fonts with the `font-family` property as listed in the example on the Google Fonts page.
That's it!
</section>
<section class="slide">
<h2>Lunchtime! (Optional Exercise)</h2>
<p>Picking fonts is hard. For this project, we'll be using web fonts from Google fonts. Prepare for the post-lunch exercise by picking 2-3 fonts from <a href="https://www.google.com/fonts">Google Fonts</a> for the body text, header and cursive text. Here’s a <a href="project/final/about.html">the final project</a> for reference.</p>
<p><strong>Need some help choosing?</strong><p>
<p>Here’s some inspiration: <a href="http://hellohappy.org/beautiful-web-type/">http://hellohappy.org/beautiful-web-type/</a></p>
<p>Or try Source Sans Pro, Quicksand, Merriweather or Codystar.</p>
<p>If you can't decide which fonts to use, use the example project fonts: Open Sans (light), Nixie One and Pacifico. The font file links are provided in the post-lunch exercise.</p>
<div class="presenter-notes">
<p>Aim to get to lunch around 12:15 - 12:30pm. A 45 min lunch is recommended since the afternoon covers a lot & more advanced concepts. Let the learners know this is optional but most people tend to enjoy continuing on a bit of exercises over the break. This will help speed up the next exercise and give them time to personalize their font choices without cutting into class time. If not, they can just use the suggested fonts.</p>
</div>
</section>
<section class="slide">
<h2>Class Exercise - Typography</h2>
<p>In this exercise, we'll focus on just updating the fonts. Your pages will look similar to this:</p>
<img src="framework/img/workshop/exercise4-fonts.png">
<p>Right now, we've only linked the css file to <strong>about.html</strong>. Continue to check the updates on that page.</p>
<ol>
<li>
Pick 3 fonts from <a href="https://www.google.com/fonts">Google Fonts</a>.
</li>
<li>
Add the Google font style sheet before your CSS file.
<pre><code><title>Jane Smith | About Me</title>
<link href='http://fonts.googleapis.com/css?family=Nixie+One|Open+Sans:300|Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
</code></pre>
</li>
<li>
In the sample project, most of site uses the same font throughout the page. So we can add the main font family to the <code>body</code> declaration block.
<pre><code>body {
font-family: "Open Sans", sans-serif;
}
</code></pre>
Remember the family tree? Since <code>body</code> is the ancestor of all the elements nested within, these styles are inherited by the child & descendant elements.
</li>
<li>
Make the main heading (your name) a different font to set it apart from the rest of the headings. Since this style is going to be applied only to the main heading, use <code>h1</code> as the selector.
<pre><code>h1 {
font-family: "Nixie One", serif;
}
</code></pre>
</li>
</ol>
</section>
<section class="slide" data-markdown>
##Combining selectors
Sometimes you'll have more than one HTML element that share the same styles. Target multiple elements at the same time by *combining* selectors in one declaration block. Note the syntax, combined selectors need to be separated by a comma.
Instead of this:
```
h1 {
/* styles here */
}
h2 {
/* styles here */
}
```
Do this!
```css
h1, h2 {
/* selects both the h1 and h2 */
}
```
This does the same thing as the first example but with less lines of code and makes it easier to make changes to both elements.
</section>
<section class="slide" data-markdown>