-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathindex.html
More file actions
1137 lines (1018 loc) · 41.6 KB
/
index.html
File metadata and controls
1137 lines (1018 loc) · 41.6 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>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Girl Develop It framework for easily creating beautiful presentations using HTML in GDI theme. Forked from Hakim El Hattab's reveal.js">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- Update with GDI Course Name -->
<title>GDI: Intro to HTML & CSS</title>
<link rel="icon" type="image/x-icon" href="assets/imgs/favicon.ico" />
<!-- RevealJS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/theme/simple.css" id="theme">
<!-- GDI Custom Theme -->
<link rel="stylesheet" href="assets/css/gdi-theme.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/monokai.min.css">
</head>
<body>
<div class="reveal">
<!-- Start of Slides container -- Any section element in this container is displayed as a slide -->
<div class="slides">
<!-- Opening Slide -->
<section>
<img src="assets/imgs/gdi-logos/gdi-circle-logo_peach.png" alt="GDI Logo" width="400px" class="noborder"/>
<br>
<h2 style="font-weight: bolder;">Welcome to Girl Develop It</h2>
</section>
<!-- GDI Mission Statement -->
<section>
<img src="assets/imgs/gdi-logos/gdi-logo_peach.png" alt="GDI Logo" width="300px" class="noborder"/>
<br>
<h3>We create welcoming, supportive and accessible environments for women and non-binary adults to learn software development.</h3>
</section>
<!-- GDI Code of Conduct -->
<section>
<h3>We are dedicated to providing a welcoming and comfortable environment for all to learn coding and every attendee is expected to uphold our <span style="font-weight: bolder;">Code of Conduct</span>:</h3>
<h4><a href="https://girldevelopit.com/code-of-conduct/" target="_blank">girldevelopit.com/codeofconduct/</a></h4>
<h4><a href="bit.ly/gdi-incident-report" target="_blank">bit.ly/gdi-incident-report</a></h4>
</section>
<!-- GDI Promo - Part 1-->
<section>
<h2 style="font-weight: bolder;">What Does<br>Girl Develop It<br>Teach?</h2>
</section>
<section id="fragments">
<h3>Web Development</h3>
<h3 class="fragment">Data Science</h3>
<h3 class="fragment">UX Design & Research</h3>
<h3 class="fragment">Workforce Classes</h3>
<h3 class="fragment">Career-Building Events & Conferences</h3>
</section>
<!-- GDI Promo - Part 2 -->
<section>
<img src="assets/imgs/gdi-logos/gdi-logo_peach.png" alt="GDI Logo" width="300px" class="noborder"/>
<br>
<h3>Find All Our Classes & Events:</h3>
<h3><a href="https://girldevelopit.com/" target="_blank">www.girldevelopit.com</a></h3>
</section>
<!-- HouseKeeping -->
<section>
<h2>Housekeeping</h2>
<ul>
<li>Display your preferred name and pronoun.</li>
<li>We are here for you!</li>
<li>Every question is important.</li>
<li>Participate, Experiment, Have Fun!</li>
</ul>
</section>
<!-- Course Title -->
<section>
<h2>Intro to HTML & CSS</h2>
<p>Images sourced from pixabay.com</p>
</section>
<!-- Instructor Intro -->
<section>
<h2>Instructor Intro</h2>
<p>Faraja Thompson, Educator</p>
</section>
<!-- Teaching Assistant Intro -->
<section>
<h2>TA Intro</h2>
<p>Marki Lyons, Freelance Web Developer and Educator</p>
</section>
<!-- Student Intros / IceBreaker -->
<!-- <section>
<p style="font-size: 16px; font-style: italic;">(Instructor's choice.<br> This is a title slide. Use a new slide for the intros.<br>Comment out this note for class.)</p>
<h2>Student Intros or<br> Ice Breaker</h2>
</section> -->
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p>Tell us about yourself:</p>
<ul style="line-height: 1.75;">
<li>Name?</li>
<li>Location?</li>
<li>What do you hope to get out of this class?</li>
<li>Do you have an interesting YouTube or TikTok habit?</li>
</ul>
</div>
</section>
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p>Rate your experience with HTML & CSS:</p>
<ol style="font-size: 30px; line-height: 1.75;">
<li>- Absolute beginner</li>
<li>- Minimal experience (a few tutorials)</li>
<li>- Some experience (familiar with the basics)</li>
</ol>
</div>
</section>
<!-- Course Agenda/Topics/Course Outline -->
<section>
<h2>Agenda</h2>
<p>HTML</p>
<p>CSS</p>
<p>Q & A</p>
</section>
<!-- Course Goals -->
<section>
<h2>Course Goals</h2>
<div class = "left-align">
<ul style="line-height: 1.75;">
<li>Build a simple site using HTML and CSS.</li>
<li>Work with images, lists, links and basic styling.</li>
<li>Get resources, information about next steps.</li>
</ul>
</div>
</section>
<section>
<h2>Steps</h2>
<div class = "left-align">
<ol style="line-height: 1.75;">
<li>Build a practice HTML web page.</li>
<li>Build a hero image web page styled with CSS.</li>
<li>Optional: Join break-out rooms to collaborate.</li>
</ol>
</div>
</section>
<!-- Course Slides -->
<!-- Create as many new sections as needed -->
<!-- Slide Name -->
<section>
<h2>HTML</h2>
</section>
<!-- ANATOMY OF A WEBSITE -->
<section>
<h3>Anatomy of a website</h3>
<div style="font-size:.875em;">
<p>Content (Text + Media)</p>
<p style="background-color: rgb(236, 201, 201);">+ HTML(Structure + Semantics)</p>
<p>+ CSS (Presentation + Design)</p>
<p>+ JavaScript (Interactivity)</p>
<p>= Website</p>
</div>
</section>
<section>
<h3>A Very, Very Quick History of HTML</h3>
<ul style="font-size: .8em; line-height: 1.75;">
<li>Invented by Tim Berners-Lee</li>
<li>Created "hypertext" to share scientific papers</li>
<li>First web page built: August 6, 1991</li>
<li>Standardized by w3 Consortium</li>
<li>The first web page address was <a target="_blank" href="http://info.cern.ch/hypertext/WWW/TheProject.html">http://info.cern.ch/hypertext/WWW/TheProject.html.</a></li>
</ul>
</section>
<!-- WHAT IS HTML?-->
<section>
<h3>What is HTML?</h3>
<p>HTML stands for <span style="color: red;">H</span>yper <span style="color: red;">T</span>ext <span style="color: red;">M</span>arkup <span style="color: red;">L</span>anguage.</p>
</section>
<section>
<h3>What is HTML?</h3>
<p>HTML is the language that allows us to build the structure of websites.</p>
<img src = "assets/imgs/construction-ga190beeb8_1920.jpg" width="500px" alt="Screenshot of construction house building shell">
</section>
<section>
<h3>What is HTML?</h3>
<p>HTML is composed of HTML elements, which are containers for placing content. Together, HTML elements provide the blueprint for a web page.</p>
<img src = "assets/imgs/blueprint-g6b416464d_1920.jpg"500px" alt="Screenshot of a blueprint">
</section>
<section>
<h3>What is HTML?</h3>
<p>"Under the hood" of a website:</p>
<img src = "assets/imgs/gdi-homepage-html.png" alt="Screenshot of the Girl Develop It page source code">
</section>
<!-- TOOLS -->
<section>
<h3>Basic Tools</h3>
<p>Browsers:</p>
<ul style="font-size: .8em; line-height: 1.75;">
<li>Chrome</li>
<li>FireFox</li>
<li>Safari</li>
</ul>
</section>
<section>
<h3>Basic Tools</h3>
<p>Code or Text Editors:</p>
<ul style="font-size: .8em; line-height: 1.75;">
<li>Visual Studio Code</li>
<li>Atom</li>
<li>Sublime Text</li>
</ul>
</section>
<section>
<h3>Basic Tools</h3>
<p>Online Code Editors:</p>
<ul style="font-size: .8em; line-height: 1.75;">
<li>REPL.it</li>
<li>Codepen.io</li>
<li>Codesandbox.io</li>
</ul>
</section>
<!-- PRACTICE -->
<section>
<h2>Let's Develop It!</h2>
</section>
<!-- ONLINE EDITOR SETUP - WALKTHROUGH -->
<section>
<h3>Get Started: REPL.it</h3>
<ul style="font-size: .8em; line-height: 1.75;">
<li>Create a free account on REPL.it.</li>
<li>Or an online editor of your choice.</li>
</ul>
</section>
<!-- ONLINE EDITOR SETUP - WALKTHROUGH -->
<section>
<h3>REPL.it Demo</h3>
</section>
<!-- HTML ELEMENTS -->
<section>
<h3>Anatomy of an HTML element</h3>
<p>HTML pages are made up of elements.</p>
<p>Element</p>
<ul style="font-size: .8em; line-height: 1.75;">
<li>An individual component of HTML.</li>
<li>Paragraph, heading, table, list, div, link, image, etc.</li>
</ul>
<pre><code class ="html"><p>This is a sample paragraph.</p></code></pre>
</section>
<section>
<h3>Anatomy of an HTML element</h3>
<p>Tag</p>
<ul style="font-size: .8em; line-height: 1.75;">
<li>Marks the beginning & end of an element.</li>
<li>Tags contain characters that indicate the tag's purpose.</li>
</ul>
<pre><code class ="html xml"><tagname>Content</tagname></code></pre>
<pre><code class ="html"><p>This is a sample paragraph.</p></code></pre>
</section>
<!-- HTML TAGS -->
<section>
<h3>Tag Breakdown</h3>
<img src="assets/imgs/html-tag-diagram.png" alt="Tag breakdown"><br>
<hr />
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">List of HTML Elements (MDN)</a></p>
</section>
<!-- SELF CLOSING TAGS -->
<section>
<h3>Self Closing Tags</h3>
These elements don't need a closing tag:<br>
<pre><code class = "html"><br>
<hr>
<img>
<link>
<input>
</code></pre>
</section>
<!-- NESTING -->
<section>
<h3><img style="width:15%; margin: 0;" src="assets/imgs/matryoshka-doll-g469658faf_1920-removebg-preview.png" alt="image of matryoshka dolls"> Nesting & Indentation</h3>
<img src="assets/imgs/nesting-dolls-gae2a50120_1920.png" alt="image of nesting dolls"><br>
</section>
<section>
<h3><img style="width:15%; margin: 0;" src="assets/imgs/flipped nesting dolls.png" alt="image of matryoshka dolls">Nesting & Indentation</h3>
<p style="font-size:.8em;">Elements "nest" inside the tag that contains them.</p>
<p style="font-size:.8em;">What elements are nested here?</p>
<pre><code class="html"><html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>A paragraph inside the body tag</p>
</body>
</html>
</code></pre>
<p style="font-size:.65em;">Notice: Whichever element opens first, closes last.</p>
</section>
<!--PRACTICE: HEADINGS, PARAGRAPHS, LINE BREAKS, HORIZONTAL RULES, ORDERED/UNORDERED LISTS, ATTRIBUTES, FORMATTING, IMAGES -->
<section >
<h3>Let's Develop It!</h3>
<p class="left-align">Develop a basic practice page about a topic of choice. Include the following HTML elements:</p>
<ol style="font-size: .8em; line-height: 1.75;">
<li>a heading</li>
<li>a paragraph</li>
<li> a line break or horizontal rule</li>
<li>an ordered or unordered list</li>
<li>an image<a target= "blank" href="https://pixabay.com/images/search/transparent%20background/"> Pixabay Images</a></li>
<li>Experiment with formatting and adding attributes.</li>
</ol>
<p style="font-size:30px;">*IMPORTANT: A page can contain only ONE h1 tag.</p>
</section>
<!-- ELEMENTS: HEADINGS -->
<section>
<h3>Headings</h3>
<img src="assets/imgs/html-headings.png" alt="Example of headings" />
</section>
<section>
<h3>Element: Heading</h3>
<div>
<div class="flex-container">
<div class="flex-item">
<pre><code class="html"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></code></pre>
</div>
<div class="flex-item">
<h1 style = "font-size: 120%">Heading 1</h1>
<h2 style = "font-size: 110%">Heading 2</h2>
<h3 style = "font-size: 105%">Heading 3</h3>
<h4 style = "font-size: 95%">Heading 4</h4>
<h5 style = "font-size: 85%">Heading 5</h5>
<h6 style = "font-size: 75%">Heading 6</h6>
</div>
</div>
<p style="font-size:30px;">* Heading number indicates hierarchy, not size.<br>Think of outlines from high school papers.</p>
</section>
<section>
<h3>Anatomy of a website</h3>
<ul style="line-height: 1.75;">
<li>A paragraph is your <code>content</code>.</li>
<li>Putting your content into an HTML tag to make it look like a paragraph is <code>structure</code>.
<pre><code class ="html"><p>A paragraph is your content</p>
</code></pre>
</li>
</ul>
</section>
<!-- ELEMENTS: PARAGRAPHS -->
<section>
<h3>Paragraphs</h3>
<p>Paragraphs allow you to format your content in a readable fashion.</p>
<img src="assets/imgs/html-paragraphs.png" width="600px" alt="Example of Paragraphs in the wild" />
<p style="font-size:30px;">* You can edit how paragraphs are displayed with CSS.</p>
</section>
<section>
<h3>Element: Paragraph</h3>
<div class="flex-container">
<div class="flex-item">
<pre><code class="html"><p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</code></pre>
<pre><code class="html"><p>Paragraph 1</p> <p>Paragraph 2</p>
</code></pre>
<pre><code class="html"><p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</code></pre>
</div>
<div class="flex-item">
<p style="font-size:24px;">Paragraph 1</p>
<p style="font-size:24px;">Paragraph 2</p>
<p style="font-size:24px;">Paragraph 3</p>
<br>
<p style="font-size:24px;">* White space in your editor is only for humans. You can write your code with any spacing. But it's better to write code in a formatted structure or use a linter to clean up formatting issues.</p>
</div>
</div>
</section>
<section>
<h3>Element: Paragraph</h3>
<ul>
<li>Making the font of your paragraph green and smaller is <code>presentation</code>.
<p style="font-size:30px; color:green;">This paragraph has been styled with CSS.</p>
</li>
</ul>
</section>
<!-- ELEMENTS: Line Break -->
<section>
<h3>Element: Line Break</h3>
<div class="flex-container">
<div class="flex-item">
<pre><code class="html xml"><p>
Imagine there's no Heaven<br>It's
easy if you try <br>No hell below
us <br>Above us only sky
</p>
</code></pre>
</div>
<div class="flex-item">
<p class="left-align" style="font-size:30px;">Imagine there's no Heaven<br/>It's easy if you try<br/> No hell below us<br/>Above us only sky</p>
</div>
</div>
</section>
<!-- ELEMENTS: LISTS -->
<section>
<h3>Lists</h3>
<p>Lists can be used to organize any list of items.</p>
<img src="assets/imgs/html-lists.png" width="500px"/>
<p style="font-size:30px;">You'd be surprised how often lists are used in web design.</p>
</section>
<section>
<h3>Unordered and ordered lists</h3>
<div class="flex-container">
<div class="flex-item">
<pre><code class="html"><ul>
<li>List Item</li>
<li>Another List Item</li>
</ul>
</code></pre>
</div>
<div class="flex-item">
<ul style="font-size: 26px;">
<li>List Item</li>
<li>Another List Item</li>
</ul>
</div>
</div>
<div class="flex-container">
<div class="flex-item">
<pre><code class="html"><ol>
<li>List Item</li>
<li>Another List Item</li>
</ol>
</code></pre>
</div>
<div class="flex-item">
<ol style="font-size: 26px;">
<li>List Item</li>
<li>Another List Item</li>
</ol>
</div>
</div>
</section>
<!-- ELEMENTS: Em and Strong -->
<section>
<h3>Formatted Text</h3>
<div>
<pre><code class="html xml"><p>This paragraph has <em>emphasized</em> text
and <strong>important</strong> text.</p>
</code></pre>
<p>This paragraph has <em>emphasized</em> text and <strong>important</strong> text.</p>
</div>
<p style="font-size:24px;">* <code>em</code> and <code>strong</code> are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.</p>
</section>
<!-- IMAGES -->
<section>
<h3>Images</h3>
<p>To make an image, you need 3 parts:</p>
<ul style="font-size: .8em; line-height: 1.75;">
<li>An image tag: <code><img></code></li>
<li>A <code>src</code> attribute: the location and name of the image file</li>
<li>An <code>alt</code> attribute: a brief description of the image content</li>
</ul>
</section>
<section>
<h3>Images</h3>
<div class="flex-container">
<div class="flex-item">
<pre><code class="html"><img src="img/example-gdi-logo.png"
alt="Girl Develop It logo">
</code></pre>
</div>
<div class="flex-item">
<img src="assets/imgs/example-gdi-logo.png" width="150px" alt="Girl Develop It logo">
</div>
</div>
<div class="flex-container">
<div class="flex-item">
<pre><code class="html"><img src="img/blinkylights.gif"
alt="">
</code></pre>
</div>
<div class="flex-item">
<img src="assets/imgs/blinkylights.gif" alt="" style="border:0">
</div>
</div>
</section>
<!-- ATTRIBUTES -->
<section>
<h3>Element Details: Attributes</h3>
<ul style="font-size: .8em; line-height: 1.75;">
<li>Attributes describe additional characteristics of an HTML element</li>
<li>An attribute has 2 parts: Name & Value.</li>
</ul>
<br>
<pre><code class ="html"><tagname name="value">content</tagname></code></pre>
<p style="font-size:30px;">*Values should be contained inside quotation marks.</p>
</section>
<!-- The Boiler Plate -->
<section>
<h3>The Boiler Plate</h3>
<p>This is a reusable template for creating websites with cross-browser compatibility. </p>
<pre><code class = "html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the page </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
</code></pre>
<a target="_blank" href="https://www.freecodecamp.org/news/html-starter-template-a-basic-html5-boilerplate-for-index-html/">freeCodeCamp: HTML5 Boilerplate</a>
</section>
<!-- PRACTICE - ADD THE BOILERPLATE -->
<section >
<h3>Let's Develop It!</h3>
<ol style="font-size: .8em; line-height: 1.75;">
<li>Copy the boilerplate from the previous slide and paste it at the top of your web page.</li>
<li>Enter a title to display in the tab.</li>
<li>Find the body tags.</li>
<li>Copy and paste all of your content within the body tags.</li>
</ol>
</section>
<!-- HTML DOCTYPE -->
<section>
<h3>Doctype</h3>
<p style="font-size: .8em;">The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.</p>
<pre><code class = "html"> <!DOCTYPE html> </code></pre>
<p><small>* The doctype is case-insensitive. <br><br>DOCtype, doctype, DocType and DoCtYpe are all valid.</small></p>
</section>
<!-- HTML TAG -->
<section>
<h3>HTML Tag</h3>
<p>After <doctype>, the page content must be contained between <html> tags.</p>
<pre><code class = "html"><!DOCTYPE html>
<html>
</html>
</code></pre>
</section>
<!-- HEAD AND TAGS -->
<section>
<h3>Head Tag</h3>
<p class="left-align"><code>head</code>: Information about the page, such as its title.</p>
<pre><code class = "html"><!DOCTYPE html>
<html>
<head>
<title>The title of the page</title>
</head>
</html>
</code></pre>
</section>
<!-- META TAGS -->
<section>
<h3>Meta Tags</h3>
<p>Search engines, social media platforms, and web services use this metadata to understand the content of your website and to determine how to present it to users.</p>
<pre><code class = "html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Title of the page </title>
</head>
</html>
</code></pre>
</section>
<!-- BODY TAG -->
<section>
<h3>Body Tag</h3>
<p class="left-align"><code>body</code>: The actual content of the page, what shows up in the browser window.</p>
<pre><code class = "html"><!DOCTYPE html>
<html>
<head>
<title>The title of the page</title>
</head>
<body>
The exciting content.
</body>
</html>
</code></pre>
</section>
<!-- HTML Part 2: The Hero Image Web Page -->
<section>
<h3>HTML Part 2: The Hero Image Web Page</h3>
<p style="font-size:.8em;">The purpose of placing a hero image within the header element is to capture the visitor's attention and to call them to action.</p>
<a target="_blank" href="https://uxplanet.org/how-to-design-a-hero-image-website-in-2022-best-practices-and-examples-256b7e8c31fb">UX Planet: Best Practices and Examples</a>
<br>
<a target="_blank" href="https://uxplanet.org/hero-image-website-design-21-best-examples-templates-for-your-inspiration-56cd3d79c688">UX Planet: More examples</a>
</section>
<!-- PRACTICE - ADD COMMENTS AND LINKS-->
<section >
<h3>Let's Develop It!</h3>
<ol style="font-size: .8em; line-height: 1.75;">
<li>Open a new repl. <a target="_blank" href="https://faraja17.github.io/gdi-html-css/intro-html-css/index.html#/49">Boiler Plate | </a>
<a target="_blank" href="https://replit.com/@faraja/GDI-HTML-and-CSS-Hero-Image-HTML-Template#index.html">Optional Template</a> </li>
<li>Develop the following sections for your hero image web page using HTML elements:
<ul>
<li>navigation bar</li>
<li>header</li>
<li>footer</li>
</ul>
</li>
<li>Add comments to organize your sections.</li>
<li>Add links to direct users to other websites.</li>
</ol>
</section>
<!--COMMENTS 1-->
<section>
<h3>Comments</h3>
<p style="font-size: .8em;">You can add comments to your code that will not be displayed by the browser, but only visible when viewing the code.</p>
<pre><code class="html"><!-- Comment goes here -->
</code></pre>
</section>
<section>
<h3>Comments</h3>
<p style="font-size: .8em">Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.</p>
<pre><code class="html"><!-- Beginning of header -->
<div id="header">Header Content</div>
<!-- End of header -->
<!--
<ol>
<li>List Item</li>
<li>Another List Item</li>
</ol>
-->
</code></pre>
</section>
<!-- LINKS-->
<section>
<h3>Links</h3>
<p>To make a link, you need 3 parts:</p>
<ul style="font-size: .8em; line-height: 1.75;">
<li>An anchor tag: <code><a></a></code></li>
<li>An <code>href</code> attribute: the web address to where the link points</li>
<li><strong>content</strong>: text or images between the tags that become the clickable link.</li>
</ul>
<pre><code class="html" style="min-width: 44em;"><a href="http://www.girldevelopit.com">Girl Develop It</a>
</code></pre>
<p style="font-size: 30px;">produces:<br>
<a href="http://www.girldevelopit.com">Girl Develop It</a>
</p>
</section>
<!-- LINK TARGETS-->
<section>
<h3>Link Targets</h3>
<p>An optional <code>target</code> attribute tells the browser to open the link in a new tab.</p>
<pre><code class="html"><a href="http://www.girldevelopit.com" target="_blank">Girl Develop It</a></code></pre>
<p style="font-size: 30px;">Opens the GDI site in a new tab:<br>
<a href="http://www.girldevelopit.com" target="_blank">Girl Develop It</a>
</p>
</section>
<!-- CSS -->
<section>
<h2>CSS</h2>
</section>
<!-- ANATOMY OF A WEBSITE -->
<section>
<h3>Anatomy of a website</h3>
<div style="font-size:.875em;">
<p>Content (Text + Media)</p>
<p>+ HTML(Structure + Semantics)</p>
<p style="background-color: rgb(236, 201, 201);">+ CSS (Presentation + Design)</p>
<p>+ JavaScript (Interactivity)</p>
<p>= Website</p>
</div>
</section>
<section>
<h3>CSS: What is it?</h3>
<p><strong>CSS</strong> = <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>
<p>CSS is a "style sheet language" that lets you style the elements on your page.</p>
<p>CSS is works in conjunction with HTML, but is not HTML itself.</p>
</section>
<section>
<h3>CSS: What can it do?</h3>
<p>Adds all the bells and whistles!</p>
<img src="assets/imgs/kitchen-gdc3113a61_1920.jpg " alt="image of kitchen" height="400" />
</section>
<section>
<h3>CSS: What can it do?</h3>
<p>All colored text, position, and size</p>
<img src="assets/imgs/gdi-homepage-view.png" alt="Screenshot of homepage" height="400" />
</section>
<!-- The CSS Rule-->
<section>
<h3>Anatomy of CSS</h3>
<p>CSS consists of <strong>style rules</strong>.</p>
<p>Each style rule consists of a <strong>selector</strong> and <strong>declarations</strong> of <strong>property-value</strong> pairs:
</p>
<pre><code class="css">selector {
property: value;
property: value;
}</code></pre>
</section>
<section>
<p>Syntax</p>
<pre><code class="css">selector {
property: value;
property: value;
}</code></pre>
<p>Example:</p>
<pre><code class="css">body {
color: yellow;
background-color: black;
}</code></pre>
</section>
<!-- Connecting HTML to CSS-->
<section>
<h3>Connecting CSS to HTML</h3>
<p class="green">3 Ways:</p>
<p>Inline</p>
<p>Embedded</p>
<p style="background-color: rgb(236, 201, 201);">External</p>
</section>
<!-- PRACTICE STYLING THE HERO IMAGE WEB PAGE-->
<section>
<h3>Let's Develop It!</h3>
<ol style="font-size: .8em; line-height: 1.75;">
<li>Open the CSS file of your hero web page. <a target="_blank" href="https://replit.com/@faraja/GDI-HTML-and-CSS-Hero-Image-CSS-Template#style.css">Optional Template</a></li>
<li>Style the following sections for your hero image web page using CSS properties:
<ul>
<li>navigation bar</li>
<li>header</li>
<li>footer</li>
</ul>
</li>
<li>Add a logo image to the nav bar and a hero image to the header. <a target="_blank" href="https://pixabay.com/images/search/transparent%20background/"> Pixabay Images</a></li>
<li>Change justification of text and images.</li>
<li>Experiment with font and background colors.</li>
<li>Experiment with different font families and font sizes.</li>
<li>Add links to direct users to other websites.</li>
</ol>
</section>
<!-- Inline -->
<section>
<h3>Connecting CSS to HTML: Inline</h3><br>
<pre><code class = "html"><p style="color:red">Some text.</p>
</code></pre>
<ul style="font-size: .85em; line-height: 1.75;">
<li>Uses the HTML <code>style</code> attribute.</li>
<li>Only applies to one element at a time.</li>
<li>Not preferred.</li>
</ul>
</section>
<!-- Embedded -->
<section>
<h3>Connecting CSS to HTML: Embedded</h3>
<pre><code class = "html"><head>
<style>
p {
color: blue;
font-size: 12px;
}
</style>
</head>
</code></pre>
<ul style="font-size: .85em; line-height: 1.75;">
<li>Inside <code><head></code> element.</li>
<li>Uses <code><style></code> tag.</li>
<li>Only applies to that page.</li>
</ul>
</section>
<!-- External-->
<section>
<h3>Connecting CSS to HTML: External</h3>
<pre><code class = "html"><head>
<link rel="stylesheet" href="style.css">
</head>
</code></pre><br>
<ul style="font-size: .85em; line-height: 1.75;">
<li>Can be referenced from multiple pages.</li>
<li>Reduced file size & bandwidth.</li>
<li>Easier to maintain in larger projects.</li>
<li> This is the best practice!</li>
</ul>
</section>
<!-- PRACTICE-->
<section>
<h3>Let's Develop It!</h3>
<p>Embedded CSS:</p>
<ol style="font-size: .8em; line-height: 1.75;">
<li>In the <code>head</code> tag of your index.html file, beneath the title tag, add an opening and closing <code>style</code> tag.</li>
<li>Add / nest the CSS rule below in the <code>style</code> tag:</li>
<pre><code class = "css">body {
background-color: turquoise;
}
</code></pre>
<li>Check your page and see what happens.</li>
</ol>
</section>
<!-- CSS SELECTORS -->
<section>
<h3>CSS: The Selector</h3>
<pre><code class="css">selector {
property: value;
property: value;
}</code></pre>
<p>
The selector is used to select which elements in the HTML page will be given the styles inside the curly braces.
</p>
</section>
<section>
<h3>Types of Selectors: Element</h3>
<pre><code class="css">p {
property: value;
}
</code></pre>
<p>Selects all paragraph elements.</p><br>
<pre><code class="css">img {
property: value;
}
</code></pre>
<p>Selects all image elements.</p>
</section>
<!-- CSS PROPERTIES -->
<section>
<h3>CSS Properties</h3>
<ul style="font-size: .8em; line-height: 1.75;">
<li>200? 300? 500?</li>
<li>You're not expected to know them all!</li>
<li>Focus on the commonly used ones</li>
<li>Be okay looking things up!</li>
<li>Note: CSS properties are case-sensitive</li>
</ul>
<hr />
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference" target="_blank">Common CSS properties (MDN)</a></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" target="_blank">All standard CSS properties (MDN)</a></p>
</section>
<!-- FONT FAMILY-->
<section>
<h3>Property: font-family</h3>
<p>The font-family property defines which font is used.</p>
<pre><code class = "css">p {
font-family: "Times New Roman"; /* Specific font name */
/* or */
font-family: serif; /* Generic name */
/* or */
font-family: "Arial", sans-serif; /* Comma-separated list */
}
</code></pre>
<p style="font-size: 28px;">*When listing multiple fonts, always list a generic name last.</p>
<p><a href="https://www.w3schools.com/cssref/css_websafe_fonts.asp" target="_blank">Web Safe Fonts (W3 School)</a></p>
<p><a href="https://fonts.google.com/" target="_blank">Google Fonts</a></p>
</section>
<!-- BACKGROUND COLOR -->
<section>
<h3>Property: background-color</h3>
<p>The <code>background-color</code> property changes the color of the background.</p>
<pre><code class = "css">body {
background-color: hotpink;
}
</code></pre>
</section>
<!-- COLOR VALUES -->
<section>
<h3>CSS Color Values</h3>
<p>Your browser can accept colors in many different ways:</p>
<table style="margin: 0 auto">
<tr>
<td><strong>Color name: </strong></td>
<td><code>red</code></td>
</tr>
<tr>
<td><strong>Hexadecimal value: </strong></td>
<td><code>#FF0000</code></td>
</tr>
<tr>
<td><strong>RGB value: </strong></td>
<td><code>rgb(255, 0, 0)</code></td>
</tr>
</table>
<hr />
<p><a href="http://www.w3schools.com/colors/colors_picker.asp" target="_blank">W3Schools Color Picker</a></p>
<p><a href="http://www.colors.commutercreative.com/grid/" target="_blank">CSS Color Names</a></p>
<h5>Tip: A quick way to pick colors is to start with either white (#FFFFFF) or black (#000000). The code editor will show a small sample square.
<br>Click the square to reveal and select other color choices.</h5>
</section>
<!-- FONT SIZE -->
<section>
<h3>Property: font-size</h3>
<p>The <code>font-size</code> property specifies the size of font.</p>
<pre><code class = "css">body {
font-size: 12px;
font-size: 1.5em;
font-size: 100%;
}
</code></pre>
</section>
<section>
<h3>Font-size units:</h3>
<ul>
<li>Pixels - "px"</li>
<li>"rem" or "em" </li>
<li>Percentage - %</li>
<li>xx-small, medium, large, x-large, etc</li>
</ul>