-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathslides.html
More file actions
executable file
·1597 lines (1312 loc) · 87.3 KB
/
slides.html
File metadata and controls
executable file
·1597 lines (1312 loc) · 87.3 KB
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>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- 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 class="en" data-duration="360">
<main>
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/llc-logo-stacked-white.png" alt="Ladies Learning Code logo">欢迎!</h1>
<div class="instructions">
<!-- ADD WIFI INFO HERE -->
<!-- <h2>Get <br>Connected</h2>
<p><strong>wifi</strong> wifi network</p>
<p><strong>Password:</strong> wifi password</p>
<hr> -->
<h2>Download<br> & Install</h2>
<ol class="downloads">
<li>Learner files (zip file): <a href="https://github.com/ladieslearningcode/llc-html-css-one-page/archive/master.zip">http://bit.ly/llc-onepage</a>
<ul>
<li>unzip the learner file (<em>extract all</em> if you’re on a PC)</li>
<li>open <em>slides.html</em> in the browser to view the slides</li>
</ul>
</li>
<li>Atom Editor: <a href="http://atom.io">http://atom.io</a></li>
<li>Chrome Browser: <a href="https://www.google.ca/chrome/browser/desktop/">https://www.google.ca/chrome</a></li>
</li>
</ol>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content created by <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide intro">
<img class="logo" src="framework/img/llc-logo-white.png" alt="Ladies Learning Code logo">
<h1 class="heading-bg">
<span>Intro to HTML & CSS:<br>Building a one-page website</span>
</h1>
<!-- FILL IN INSTRUCTOR DETAILS -->
<!-- <img class="instructor" src="http://placehold.it/225x225" alt="Instructor Name">
<h2><span class="cursive">with</span> Instructor name</h2>
<ul>
<li><a href="mailto:">hello@email.com</a></li>
<li><a href="http://website.com">website.com</a></li>
<li><a href="http://twitter.com/">@twitter</a></li>
</ul> -->
<div class="sponsor">
<p>In partnership with<br> <img src="framework/img/telus-logo-white.svg" alt="Telus"></p>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content created by <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
# Today’s project See the whole project [here](project/reference/final.html). 
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Course Outline
<div class="table-of-contents"></div>
</script>
</section>
<section class="slide title dark" data-markdown data-toc>
<script type="text/template">
#Getting Started ##The Web Browser & Writing HTML
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Web Browsers The main functionality of the [browser](http://browsehappy.com) is to present a *web resource* in the browser window. Choose a modern web browser that supports current web standards and dev tools for a better experience. In [Google Chrome](https://www.google.com/intl/en-CA/chrome/browser/)
(and in other browsers), you can view the source of *any* web page. Right-click / two-finger tap anywhere on the browser and select **View Web Source**. That’s HTML! --- ###Resource http://browsehappy.com
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Developer Tools **Chrome Developer tools** take it a step further and allows you to *inspect* any web page, making it easier to test & debug code. The tools can be accessed in a couple ways: * Option 1: right-click / two-finger tap on a web page and
select **Inspect Element** * Option 2: **Ctrl + Shift + I** (PC) / **Cmnd + Option + I** (Mac) --- ###Resources * To set Chrome as your default browser, follow [these instructions](https://support.google.com/chrome/answer/95417?hl=en).
* More about dev tools: http://discover-devtools.codeschool.com
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Text Editor * used to write and edit code * preinstalled editors (Notepad / TextEdit) don't include many features * paid and free options include features such as colour highlighting and plugins for improving workflow * some great options: [Notepad++](http://notepad-plus-plus.org/),
[Sublime Text](http://www.sublimetext.com/) (untimed free trial), [Brackets](http://brackets.io) and [TextWrangler](http://www.barebones.com/products/textwrangler/). **[Atom](https://atom.io/)** is totally free and is the editor we'll
be using today.
<span class="note">(If you have another editor installed, it will work as well but some features may be different.)</span> --- ###Pro tip! Improve your work flow with [keyboard shortcuts](http://ladieslearningcode.com/downloads/keyboard-shortcuts.pdf).
</script>
</section>
<section class="slide side-by-side" data-markdown>
<script type="text/template">
#HTML & CSS This is how the Ladies Learning Code site looks like with & without CSS!  
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Intro to HTML ##HyperText Markup Language
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML Syntax Tags are written with angled brackets `
<>` and a forward slash `/` for the closing tag. Get to know these keys! 
<!-- .element: width="70%" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML: The content layer Tags usually come in pairs — an opening tag and a closing tag — to *wrap* the content. Note the closing tag has a forward slash (`/`). ```
<tag> opening tag --- closing tag </tag>
``` HTML *tags* describe the content inside of them to the web browser. ```
<h1>This tag describes a heading</h1>
<p>This tag is for paragraphs.</p>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Nested tags Tags can be *nested* within other tags like this: ```
<outertag>outer content
<innertag>inner content</innertag> outer content</outertag>
``` Nested tags create a family tree-like relationship, often referred to as *parent* and *child* nodes. The inner tag is the child of the outer tag. ```
<parent>
<child></child>
</parent>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Organizing your code HTML was created for web browsers to read (not humans) so this makes perfect sense to a web browser: ```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>
``` But for us, using whitespace through indentation (tabs) will makes HTML easier to read. When nesting a tag, add one tab space. ```
<outertag>
<innertag>
</innertag>
</outertag>
```
</script>
</section>
<section id="basic-tags" class="slide" data-markdown>
<script type="text/template">
#Base HTML Tags The tags below should be included in ** *all* ** HTML documents. ```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- page content here (this is an HTML comment by the way) -->
</body>
</html>
``` (We'll be going through what these tags mean very soon.)
<!-- .element: class="note" -->
To create an HTML page, just save it with the file extension `.html`.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Setting up your project Inside of the folder you downloaded today, open the **project** folder in your text editor to edit your project. ```html llc-html-css-one-page-master |-- framework // Contains files needed for slide presentation. Do not edit!
|-- project // Contains the exercise files for this workshop. (images, CSS & HTML files) |-- slides.html // This is the file you are viewing right now! ``` Go to **File** > ** Add Project Folder**. A popup will appear. 
Then: * navigate to the **llc-html-css-one-page-master** folder * select **project** * click **Open** The files will now appear in the sidebar.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Setting up your project Your project folder structure will look like this: ```html project |-- images |-- reference ``` The **images** folder contains a selection of images to use in your project (or add your own to this folder during the exercises).
The **reference** folder contains the solutions for each exercise. Try not to peek unless you're *really* stuck.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Getting to know Atom Having a good text editor and learning how to use it to its full potential will help your work flow. Today, let's update the text wrapping option to make it easier to read long blocks of code and text. Go to **Preferences** to open
the customization options. 
<!-- .element: width="70%" -->
The **Settings** tab will show by default. Scroll down to **Soft Wrap** option. 
<!-- .element: width="70%" -->
Make sure the **Soft Wrap** option is checked. 
<!-- .element: width="70%" -->
--- ###Resources * [Atom documentation](https://atom.io/docs) * [Atom Shortcuts cheat sheet](https://bugsnag.com/blog/atom-editor-cheat-sheet) * [Customizing Atom](https://atom.io/docs/v0.61.0/customizing-atom) * [Themes](https://atom.io/themes) for Atom
* [Snippets](https://github.com/atom/snippets) - create your own code snippet shortcuts
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise #1: Create your project's HTML page 1. In the text editor, create a new file (**File** > **New File**) 1. Save it as `index.html` (**File** > **Save**) 1. Add all of the basic HTML tags. Refer to [this slide](slides.html#basic-tags) for
reference. 1. In *between* the `
<title></title>` tags, add a *page title* that reflects the content of your webpage. Example: ```
<title>Laura Ipsum | Digital Designer & Developer</title>
``` 1. Open `index.html` in the browser. * go to Windows Explorer or Finder * navigate to the **llc-html-css-one-page-master > project** folder * double click on **index.html** to open it in your default browser
<br><span class="note">(If Chrome is not your default, right-click/two-finger tap on **index.html** and choose **Open With > Chrome**)</span> There is no page *content* yet so the browser will show a blank page. The page *title* however,
will show in the browser toolbar. 
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#The Doctype * not an HTML tag & must be the first item * tells the browser what HTML version the page is written in * the below example is the HTML5 doctype
<pre><code><strong><!DOCTYPE html></strong>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- page content here -->
</body>
</html>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#THE HTML ELEMENT * always the first HTML tag & identifies the document as HTML * it is the root element & ancestor of all other elements because everything is *nested* inside * the `lang` *attribute* classifies the language (more on attributes soon)
<pre><code><!DOCTYPE html>
<strong><html lang="en"></strong>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- page content here -->
</body>
<strong></html></strong>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#The HEAD ELEMENT * includes information about the page but *does not display content* * the `
<title></title>` element is the only required element * defines the title of the web page/document * displayed in the browser tab, bookmarks and search engine results * CSS, JavaScript & [metadata](searchenginewatch.com/sew/how-to/2067564/how-to-use-html-meta-tags)
can also be included here * page content *never* goes here
<pre><code><!DOCTYPE html>
<html lang="en">
<strong><head></strong>
<meta charset="UTF-8">
<title>My page title</title>
<strong></head></strong>
<body>
<!-- page content here -->
</body>
</html>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#THE BODY ELEMENT All content to be displayed in the browser window goes between the `
<body></body>` tags. Also known as the *viewport*.
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page title</title>
</head>
<strong><body></strong>
<!-- page content here -->
<strong></body></strong>
</html>
</code></pre>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Attributes * provides additional information or instruction for the element * included *inside the opening HTML tag* * follows the syntax of `attribute="value"` (note the quotes) * many different attributes ```
<tag attribute="value">content</tag>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Attributes We just saw two attributes in our basic HTML page example. The `lang` attribute is used to classify the language. ```
<html lang="en">
``` The `charset` attribute sets the character encoding. ```
<meta charset="UTF-8"> ``` We will be using more attributes throughout today's exercises.
</script>
</section>
<section class="slide page-layout" data-markdown>
<script type="text/template">
# PLANNING THE PAGE LAYOUT An important part of creating a web page is planning the page structure. Though you will likely make changes as you go along, creating a basic layout with [semantic](http://html5doctor.com/lets-talk-about-semantics/) markup
is a good way to start. If you don't have a design to work from, many developers and designers like to start planning with a simple sketch. For today, let's take a look at the final design to see how to group related elements and create
a page structure. 
<!-- .element: class="screenshot" -->
<div class="labels">
header
<!-- .element: class="header" -->
about
<!-- .element: class="about" -->
loves
<!-- .element: class="loves" -->
footer
<!-- .element: class="footer" -->
</div>
</header>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML5 Structural Elements HTML5 introduced new tags to better describe blocks of content such as `
<header>`, `
<footer>` and `
<section>`. (There are many more.) Prior to HTML5, the `
<div>` tag was often used to group related content. But the `
<div>` doesn't have any semantic meaning. The `div` tag can still be used when needed for purely grouping elements together for styling or when no other HTML5 tag properly describes the element. When in doubt, it's ok to
continue to use
<!-- .element: class="note" -->`
<div>`. --- ###Resources * [html5doctor.com](http://html5doctor.com) * [HTML5 Element Flowchart](http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML5 Structural Elements The `class` attribute is often used to differentiate blocks using the same HTML tag, to style. (More on adding styles with class later). Using HTML5 tags, the page could be structured like this: ```xml
<header>
header content here
</header>
<section class="about">
about content here
</section>
<section class="loves">
stuff I love goes here
</section>
<footer>
footer / contact info here
</footer>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise #2: Page structure Back in the text editor, let's add the HTML5 structural tags to setup the page layout. Only add the structural HTML blocks in this step, no content just yet. We will need these tags: `
<header>`, two `
<section>`'s and a `
<footer>` Also, you can use HTML comments to help organize the code like so: ```
<!-- page header -->
<header>
</header>
``` View
<!-- .element: class="note" -->`exercise-2.html` in your **reference** folder or the previous slide to check your code.
</script>
</section>
<section class="slide title" data-markdown data-toc>
#Adding content ##Headings, paragraphs, images and links
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Paragraphs **Paragraphs**: whether it's one sentence or more, each paragraph needs its own pair of `
<p></p>` tags. ```xml
<p>This is a paragraph.</p>
<p>This is a longer paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vero dolor expedita quasi reiciendis minus unde sapiente id eveniet saepe officia quibusdam aspernatur, sint voluptate ipsam ex magni. Aliquam,
ex!</p>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Headings There are six headings tags ranging from `
<h1>` to `
<h6>` used to describe the *hierarchy* of the page structure. To decide which heading to use, think about how you would arrange an essay outline.
<div class="example essay-headings">
<p><strong>文章标题</strong></p>
<ol>
<li>介绍</li>
<li>First supporting idea
<ul>
<li>point 1</li>
<li>point 2</li>
</ul>
</li>
<li>Second supporting idea
<ul>
<li>point 1</li>
<li>point 2</li>
</ul>
</li>
<li>Conclusion</li>
</ol>
</div>
Let's look at how we could describe this hierarchy using heading tags.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Pre-HTML5 Heading outline Prior to HTML5, before sectioning tags were introduced, usually only one `
<h1>` was used per page. The heading outline would look like this: **Pre-HTML5 Heading Outline** ```xml
<h1>Essay Title</h1>
<div>
<h2>Introduction</h2>
<p>stuff here</p>
</div>
<div>
<h2>First supporting idea</h2>
<h3>point 1</h3>
<h3>point 2</h3>
</div>
...etc ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Headings & HTML5 Sectioning tags With the introduction of HTML5 sectioning tags, each part of the document that uses a sectioning tag now gets its *own* outline. **HTML5 Heading Outline** ```xml
<h1>Essay Title</h1>
<section>
<h1>Introduction</h1>
<p>stuff here</p>
</section>
<section>
<h1>First supporting idea</h1>
<h2>point 1</h2>
<h2>point 2</h2>
</section>
``` --- ###Resource Read more about headings and HTML5
<!-- .element: class="footnote" -->[here](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document) and [here](http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercise #3: Add Content (15mins) Add some text based content. Images & links will also be covered next. See
<!-- .element: class="note" -->`exercise-3.html` for reference or view the next slide but only if you're stuck! Add the content below to make your page content look similar to [this](framework/img/workshop/exercise-3.png). 1. Add your name & tagline in the `
<header>` section using the appropriate heading tags.
<span class="note">(**Reminder!** `<head>` and `<header>` are two different tags.)</span> 1. In the **About** section, add a heading and 2 paragraphs.
<span class="note">Don't have content to add? Use placeholder text! See resources below.</span> 1. In the **Loves** section, add a heading and a paragraph. 1. In the **Footer**, add a heading. --- ###Resources * http://meettheipsums.com
* http://thewireipsum.com * http://www.quotes.net
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Review your code (Also found in
<!-- .element: class="note" -->`exercise-3.html`) ```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laura Ipsum | Designer & Developer</title>
</head>
<body>
<!-- page header -->
<header>
<h1>Hi! I'm Laura Ipsum.</h1>
<h2>I'm a digital designer and developer with a penchant for gourmet doughnuts.</h2>
</header>
<!-- about me section -->
<section class="about">
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<!-- My favorite things section -->
<section class="loves">
<h1>Love, Love, Love</h1>
<p>Here are a few things that I really love.</p>
</section>
<!-- footer & contact info -->
<footer>
<h1>Contact Me</h1>
</footer>
</body>
</html>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Self-closing tags and images Self-closing tags don't format content or require a closing tag. They are used to embed objects onto the page; they *are* the content. Images use a self-closing tag. It also requires a `src` *attribute* to tell the browser
the location of the image file. ```
<img src="path/to/image/file-name"> ``` `alt` is another attribute that is added to images to provide *alternative text* to visually impaired web visitors using screen readers. ```
<img src="http://placekitten.com/200/300" alt="kitten!"> ``` ##Example of `alt` when image does not load:
<img src="" alt="kitten!">
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Image file types **gif** - smaller file size when used for line art, charts, and images with minimal colour variation. <span class="note">(That's why animated gifs tend to look grainy but oh so fun!)</span> **jpg** - smaller file
size when used for photographs with lots of rich colours or gradients **png** - larger file size but has the best quality and is great for images with transparent backgrounds **svg** - XML-based vector image format for 2D graphics
with support for interactivity and animation --- ###Resource [Here's a big list of image placeholder sites](http://www.wpfreeware.com/tutorial/placeholder-images-generator-service-web-designers/).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Image file paths It's best practice (but not required) to put image files into its own folder to keep the project files organized. Today's **project** directory already includes an **images** folder. Since the images are not in the same folder as **index.html**,
use a *relative* path to link to the file. ```
<img src="images/image-file.jpg"> ``` The starting point (**index.html**), is outside of the **images** folder. The above example directs the browser to a folder named **images**, then the filename, *including the file extension*.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Image file paths If you have a folder in a folder, then add the subfolder into the path. ```
<img src="folder/sub-folder/filename"> ``` If your file extensions do not show by default, here are instructions for [Mac](https://support.apple.com/kb/PH19072?locale=en_US) and for [Windows](http://windows.microsoft.com/en-ca/windows/show-hide-file-name-extensions#show-hide-file-name-extensions=windows-7).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Hyperlinks A hyperlink references data, such as a web document, that the reader can directly follow, usually by clicking or hovering. Use the anchor tag, `<a>` to create the link. It also needs an `href` attribute to provide information for the location of the resource.
```xml
<a href="http://ladieslearningcode.com">Ladies Learning Code</a> ``` To set the link to open in a new window, add a second attribute, `target`. ```xml
<a href="http://ladieslearningcode.com" target="_blank">Ladies Learning Code</a> ``` Here's the syntax for an email link. ```xml
<a href="mailto:hello@myemail.com">hello@myemail.com</a> ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercise #4: Add links and images (15mins) 1. Add a profile image. 1. Add three or four images to your "Loves" section. 1. Add an email link in the footer. 1. Add the social links to the Footer/Contact section. * use the sample images in the **project
> images ** folder * use your own images * make the images into links * use text links if you don't want to use an image Your page should look something like this:
<!-- .element: class="note" -->[exercise-4.html](project/reference/exercise-4.html)
<!-- .element: class="note" -->**Bonus exercise** Square images are better for the Part 2 exercises. You can crop and resize them using this free tool, [Pixlr](http://apps.pixlr.com/editor/). Between 200px - 400px is best. That's it! That's all the HTML you'll
need for today's project!
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Intro to CSS ##Cascading Style Sheets
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#CSS: The presentation layer * different language from HTML * stylesheet language with its own syntax rules * used to separate content (HTML) from presentation (CSS) * stylesheet contains a list of rules CSS requires these symbols: curly brackets `{ }`,
colon `:`, semi-colon `;` 
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#CSS Syntax & Terminology **Selectors:** determines which HTML element(s) to apply the styles to. **Declarations:** style rules written in `property:value` pairs, are wrapped by curly brackets `{ }` and must end with a semi-colon `;` ``` selector { property:
value; } ``` **Properties** determine the *type* of style to be applied (e.g. color). **Values** are specific to the property (red). ``` p { color: red; } ``` >In the above example, what is the selector? Property? Value?
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Multiple CSS Declarations Multiple declarations can be added to one selector. Just be sure to end each declaration with a semi-colon and write them on a separate line for readability. ``` h2 { background-color: green; font-size: 50px; } ``` There are
many, many CSS properties. New ones are added as old ones being retired (deprecated). It's good to have a few resources on hand. --- ###Resources * http://caniuse.com * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
* http://htmldog.com/reference/cssproperties/
</script>
</section>
<section class="slide">
<h1>Practice Selecting an element</h1>
<p>Using the HTML example below, change the “selector” to apply the instructions in the comments.</p>
<pre><code><p>This is a paragraph.</p>
<h2>This is an h2.</h2>
</code></pre>
<textarea class="snippet" data-subject="#css-selectors">selector { /* select the paragraph */
color: red;
}
selector { /* select the link */
color: blue;
}</textarea>
<div id="css-selectors" class="example">
<p>This is a paragraph</p>
<h2 style="margin-top:0;">This is an h2</h2>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Referencing CSS Today, we'll be creating a separate style sheet file for the CSS. To create a stylesheet, just name the file with a `.css` file extension. The style sheet is then referenced within the `
<head>` of the HTML document (different tag from `
<header>`). Use `
<link>` tag and two *attributes*, `rel` and `href`. ```
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
``` Though not required, css files are often saved in a separate folder for organization, just like images.
<!-- .element: class="note" -->
--- ###Resource There are several ways to add CSS. Read more about the difference ways to reference CSS
<!-- .element: class="footnote" -->[here](http://reference.sitepoint.com/css/linkingcss).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise: Create your project's CSS File 1. In the text editor, create a new CSS file by selecting **File > New File**. 1. Name it **styles.css** and save it to the **css** folder (already included in your **project** folder).
<span class="note">You can name the file anything but it's best to choose a name that describes the file content.<br> (i.e. styles.css, global.css, custom.css, project-name.css, etc)</span> 1. Then, reference it in **index.html**.
<span class="note">**Pro tip!** Type `link` and press tab!</span> ```
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
``` 1. Run a test by adding a background color to the viewport (`body`). ``` body { background: lightblue; } ```
</script>
</section>
<section class="slide first-website" data-markdown>
<script type="text/template">
<div class="text">
<h1>Ta-da!</h1>
<p>
You just created your first website. HTML + CSS = website
</p>
</div>
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#CSS colours <br> & typography
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#CSS colours * **keywords** - use the actual name (e.g. `red`, `green`, `blue`, `pink`, `papayaWhip`, `paleGoldenrod`, etc) * **RGB** - uses 3 numerical values between `0` (black) and `255` (white) * **hex code** - number sign (`#`) followed by six characters
(0-9, A-F) ``` /* These are all the same colour - this is also a CSS comment by the way! */ p { background: firebrick; background: rgb(178,34,34); background: #B22222; } ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#CSS colours Let's take a look at some of these colour resources. * http://colours.neilorangepeel.com * http://coolors.co * http://wesandersonpalettes.tumblr.com * http://www.colorpicker.com * http://www.colourlovers.com * http://flatuicolors.com * http://color.hailpixel.com
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#CSS Font Styles The are quite a few CSS properties for styling text. Here's a few to discuss today. Change some values below to see what happens!
<textarea class="snippet" data-subject="#css-type">color: slateblue;
font-family: Helvetica, Arial, serif;
font-weight: normal;
font-size: 16px;
line-height: 1.25;
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>
<p> 键入一些文本测试上述风格。orem 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>
###更多字体系列，请参考 [Typographical Properties](http://reference.sitepoint.com/css/typography)
<div class="presenter-notes">
<p>在代码编辑器中更新每个例子时，解释每个属性的作用。讨论使用行高度与没有度量单元之间的区别。</p>
</div>
</script>
</section>
<section class="slide nested-list" data-markdown>
<script type="text/template">
#网络安全字体是指预先安装的字体。操作系统没有相同的默认值，所以使用字体“堆栈”来提供后备选项。 ``` 字体类型: Helvetica, Arial, serif; ``` * 一些常见的“安全字体”有: *
<span
style="font-family:Arial;">Arial</span>
* <span style="font-family:Verdana;">Verdana</span> * <span style="font-family:Times New Roman;">Times New Roman</span> * <span style="font-family:Georgia;">Georgia</span> * <span style="font-family:Courier;">Courier</span> 查看完整列表，请前往
<http://www.cssfontstack.com>.
</script>
</section>
<section class="slide nested-list" data-markdown>
<script type="text/template">
#CSS3引入了一些网络字体，你可以使用其他非预先安装的网络安全字体，有一些免费的选项，如[Google字体](https://www.google.com/fonts) 和 [Squirrel字体](http://www.fontsquirrel.com/fonts/list/hot_web).
Google字体提供了一个更直接的选择，因为它可以直接连接到Google的css文件，让我们来看看它是如何工作的。
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#课程练习：使用Google字体1。 打开[Google字体](http://www.google.com/fonts). 1. **点击加入收藏** 选择一个字体。  1. **检查**对比. <span class="note">(LLC示例使用Open Sans and Bad Script.)</span>  1. 点击 **使用** 获得code。 <span class="note">(下一个练习中可以改变选择。)</span> 1. 选择字型粗细. <span class="note">字体越粗，网页加载时间越长</span> * LLC 项目使用Open Sans Light 300, regular 400 以及 Bad Script normal 400. *默认字符设置应该包含你所需要的 1. 复制网页上`
<link>` code snippet and add it the `
<head>`到**styles.css**前面， 用于参考Google Font CSS. ```
<head>
<meta charset="UTF-8">
<title>Laura Ipsum | Designer & Developer</title>
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
</head>
``` 现在，你可以使用新的字体了。使用Google字体页的字体系列。``` 字体系列: 'Open Sans', sans-serif; ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#继承和具体性
CSS的一个优势就是样式可以从父端到子端在元素上的继承。让我们回顾一下各元素间的家族树结构 ```
<body>
<!-- parent of h1 and p -->
<h1>我的网站</h1>
<!-- child of body, sibling of p -->
<p>这是一段话</p>
<!-- child of body, sibling of h1 -->
</body>
``` CSS properties in the `body` selector is inherited by the descendant elements. A more specific selector will override the inherited values. ``` body {颜色: #222222; } h1 {颜色 blue; /* 覆盖继承的样式 */ } ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#课程练习5: 排版 (使用字体前，确认Google Font stylesheet已经被加入你的HTML页面)
<!-- .element: class="note" -->
让我们把基础字体加入到`body`元素中，以便所有的下级元素可以继承这一样式。修改 `font-weight` 选择一个更粗或者更细的字体 (可选项). ``` body { 字符系列: 'Open Sans', sans-serif; font-weight: 300; } ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#课程练习5: 排版 (继续)
为标题设置一个不同的字体。为了一次可以选中多个，可以按住comma键*多选*。
``` h1, h2 { font-family: 'Bad Script', cursive; } ```
你的页面现在应该是像这样的 [exercise 5](project/reference/exercise-5.html)。
</script>
</section>
<section class="slide small-type" data-markdown>
<script type="text/template">
#休息时间！ 可选练习: * 将你的code和参考文件夹中的[exercise-5.html](project/reference/exercise-5.html)进行比较。 * 选择两个新的字体，如果你不想使用LLC选择的字体。
* 选择一个调色板 - LLC project使用颜色从[调色板](http://coolors.co/app/fdecef-cecccc-9d6381-612940-0f110c). 以下有更多颜色资源。
* 从 **project > images** 文件夹中选择一个背景图片， 或者从[这儿](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b)挑选。
* 如果你使用自己的图片，这是一些建议的图片尺寸:
* profile image or the Loves section - 400px width x 400px height
* background images - 1000-1400px width
可尝试[Pixlr](https://pixlr.com/web), 免费的图片编辑软件 --- ###更多资源 * http://coolors.co * http://colours.neilorangepeel.com * http://wesandersonpalettes.tumblr.com * http://www.colorpicker.com * http://www.colourlovers.com * http://flatuicolors.com * http://color.hailpixel.com
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#第二部分 ##CSS, CSS and more CSS!
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#类别属性 记得给the About & Loves section加个类别属性? 每一个部分都被赋予*不同*的样式. ```xml
<section class="about">
...
</section>
<section class="loves">
...
</section>
``` --- ###资源注释： `id` 属性也可以用于CSS，但一个页面只能使用一次。 由于这个规则，一些人更倾向于使用类别属性，但这只是个人偏好而已。点击[此处](http://oli.jp/2011/ids/)
和[此处](https://css-tricks.com/the-difference-between-id-and-class/)，阅读更多
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#类别属性 除了使用“章节Section”作为选择器，我们还可以使用类别名称。 类选择器由领先期限定义. ``` /* 在任意元素上使用about类别 */ .about { background: red; } ``` ``` /* 定位所有章节元素
*/ section { background: blue; } ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#组织CSS注释 使用CSS注释来组织样式，必须以 `/*` and end with `*/` 开始，中间可以插入任何字符. 使用任何你习惯的注释样式，以下是一些公约： ``` /* CSS Comments
*/ ``` ``` /* CSS Comments */ ``` ``` /* CSS Comments ----------------*/ ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#背景颜色 在页面的章节加入背景颜色不仅仅是一个设计约定，它能更好的视觉化HTML各个模块的内容。在最后的范例项目中，
<header>``使用一个浅色的背景 > 哪个选择器能够应用这个样式?
<pre class="delayed"><code>header {
}</code></pre>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#课程练习6 - 背景颜色 让我们更新我们的项目，添加注释并组织CSS文件。使用下面的范例做参考``` /* PAGE HEADER -----------------------------------------*/ header { background: #CECCCC; /* or
use your own colour palette */ } ``` Color reference:
<!-- .element: class="note" --><span style="background:#CECCCC;padding:0 5px;">#CECCCC</span>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#课程练习6 - 背景颜色 下一步, 选择一个背景颜色，仅用于"Loves"章节.
<span class="note">(在稍后的练习中，我们会对"About"做不同的处理。)</span> ``` /* LOVES - things I love -----------------------------------------*/ .loves { background: #9D6381; } ``` 颜色参考:
<!-- .element: class="note" --><span style="background:#9D6381;padding:0 5px;">#9D6381</span> 既然只有一个`
<footer>`, 我们可以使用那个做为选择器. 同样，改变文本的颜色，如果使用了一个深色的背景。 ``` /* FOOTER - contact info -----------------------------------------*/ footer { background: #0F110C; color: #CECCCC; }
``` Color reference:
<!-- .element: class="note" --><span style="background:#0F110C;padding:0 5px;color:#CECCCC;">background: #0F110C; color: #CECCCC;</span>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#课程练习6 - 背景颜色 注意到链接的颜色没有从默认的蓝色改变？ 要改变链接的颜色， 选择anchor tag覆盖默认的蓝色。 ``` a { color: #9D6381; } ``` Color reference:
<!-- .element: class="note" --><span style="background:#9D6381;padding:0 5px;">#9D6381</span> 没有过分完美，但也达到目的了. 你的页面应该像**参考**文件夹中 [exercise-6.html](project/reference/exercise-6.html)中显示的一样了.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#CSS 框模型
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#CSS 框模型 **CSS 框模型**规定了CSS如何决定HTML元素的尺寸和边距。对于浏览器而言，每一个HTML元素都是一个矩形/方块盒. 在这个项目的HTML文件中，下面例子里面的红线标明了
所有元素的轮廓。  注意页面中每个元素的间距，例如标题和段落。这是元素默认的`外边距 margin`和`内边距padding`。
</script>
</section>
<section class="slide nested-list" data-markdown>
<script type="text/template">
#CSS 框模型 有5种CSS属性用于确定大小和间距. 
<!-- .element: class="left" -->
* **宽度width** - 可以设定一个特殊的宽度 * **高度height** - 可以设定一个特定的高度 * **外边距margin** - 增加／删减元素周围的空间 * **内边距padding** - 增加／删减元素内部的空间 * **边框border** - 在一个图片元素外部加一个边框
资料来源:
<!-- .element: class="note" -->[W3C](http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding)
</script>
</section>
<section id="margin-padding" class="slide" data-markdown>
<script type="text/template">
#外边距和内边距 `外边距margin`和`内边距padding`的值可以使用1到4个值来声明，来定位元素的不同侧面。 可以使用各种测量单位(px, %, ems, rems, etc)。 设置值为"0"会*删减*所有的默认边距，任一的正值都将*增加*边距
外边距可以是负的，但是内边距则不行。```css padding: 2px 10px 2px 10px; /* top, right, bottom, left */ padding: 2px 10px 2px; /* top, right & left, bottom */
padding: 2px 10px; /* top & bottom, right and left */ padding: 2px /* all sides have the same value */ ``` ```css margin: 2px 10px 2px 10px; /* top, right, bottom, left */ margin: 2px 10px 2px; /* top, right & left, bottom */ margin:
2px 10px; /* top & bottom, right and left */ margin: 2px /* all sides have the same value */ ```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#外边距和内边距 外边距和内边距也可以使用longhand属性来定位特定方面。```css margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; ``` ```css padding-top: 2px; padding-right: 2px; padding-bottom:
2px; padding-left: 2px; ```
</script>
</section>
<section class="slide">
<h1>练习!</h1>
<p>用下面的示例练习外边距和内边距，使用1到4个值。</p>
<textarea class="snippet" data-subject="#example">background: lightblue;
padding: 0px;
margin: 0px;</textarea>
<div id="example" 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>
<p>注意背景颜色没有覆盖到<code>外边距margin</code>产生的间距中，虽然外边距增加了元素<strong>周围</strong>和<strong>外端</strong>的空间。</p>
</section>
<section class="slide">
<h1>CSS 框模型: 宽度width, 内边距padding & 边框border</h1>
<p> <code>宽度width</code>, <code>内边框padding</code>和<code>边框border</code>之间的关系容易混淆. </p>
<p>我们一起尝试添加一个属性，并观察框的大小如何改变：（1）将宽度设置为450px，（2）添加35px的填充，（3）将边框增加到15px.</p>
<textarea class="snippet" data-subject="#example">background: lightblue;
width: ;
padding: ;
border: 1px solid green;</textarea>
<div id="example" class="example" style="box-sizing: content-box;">
<p style="box-sizing: content-box;">Border box example.</p>
</div>
<p>注意盒子的尺寸如何变宽？让我们来看看这道算式：
<p>
<p style="font-size: 28px;">width + padding left + padding right + border left + border right = total size<br> 450 + 35 + 35 + 15 + 15 = 550px</p>
<pre class="delayed"><code style="background:transparent;border:none;font-weight:bold;font-size:40px;">¯\_(ツ)_/¯</code></pre>
</section>
<section class="slide">
<h1>边框固定</h1>
<p>幸运的是，边框尺寸是可以固定的。但首先，让我们来比较一下有边框固定和没边框固定的区别。注意在下面的两个例子里面，所有的值都是相同的，但是一个看上去为什么比另一个大一些呢？</p>
<div class="col-2">
<textarea class="snippet" data-subject="#example">background: lightblue;
width: 450px;