forked from gdirdu/gdi-rdu-intermediate-htmlcss
-
Notifications
You must be signed in to change notification settings - Fork 102
/
Copy pathindex.html
executable file
·1811 lines (1744 loc) · 71.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intermediate HTML/CSS & Intro to Responsive Design Girl Develop It NYC</title>
<meta name="description" content="">
<meta name="author" content="Cara Jo Miller, adapted by Lisa Smith and Erin Depew">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="reveal/css/reveal.css">
<link rel="stylesheet" href="reveal/css/theme/simple.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor-->
<link rel="stylesheet" href="reveal/lib/css/light.css">
<!-- dark editor<link rel="stylesheet" href="reveal/lib/css/dark.css">-->
<link rel="stylesheet" href="css/slides.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if (window.location.search.match(/print-pdf/gi)) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'reveal/css/print/pdf.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
</script>
<link rel="icon" type="image/x-icon" href="reveal/favicon.ico" />
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides" styles="width: 1500px">
<!-- Opening -->
<section>
<img src="images/gdi_logo_badge.png" style="padding: 10px; width:400px;" alt="gdi" />
<h3>Intermediate HTML/CSS & <br> Intro to Responsive Design</h3>
</section>
<section>
<h2>Welcome!</h2>
<h4 class="blue">Wifi Info</h4>
<p>
<strong>Network: </strong></p>
<p>
<strong>Password: </strong></p>
<br/>
<h3>Download workshop files <a href="./workshop-files.zip" download> <strong>here</strong></a></h3>
</section>
<section>
<h2>Thanks to our host Codesmith</h2>
</section>
<section>
<p>All slides are available at:</p>
<a href="https://erindepew.github.io/gdi-featured-html-css-intermediate/#/">https://erindepew.github.io/gdi-featured-html-css-intermediate/#/</a></p>
</section>
<!-- Welcome-->
<section class="hide-pdf">
<h3>Welcome!</h3>
<div class="left-align">
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
</div>
</section>
<section class="hide-pdf">
<h3>House Rules</h3>
<div class="left-align">
<ul>
<li class="fragment">We are here for you!</li>
<li class="fragment">Every question is important</li>
<li class="fragment">Help each other</li>
<li class="fragment">Have fun</li>
</ul>
</div>
</section>
<section class="hide-pdf">
<h3>Thank you to our Teaching Assistants today</h3>
</section>
<section class="hide-pdf">
<h3>A little about your instructor</h3>
<ul>
<li class="fragment">2 years of design experience</li>
<li class="fragment">4 years of frontend dev experience</li>
<li class="fragment">Currently working at Spotify on R&D</li>
</ul>
</section>
<section class="hide-pdf">
<h3>Now it's all about you!</h3>
<ul>
<li class="fragment">Tell us who you are.</li>
<li class="fragment">What do you hope to get out of this class?</li>
</section>
<section>
<h3>We will be building a profile site from scratch</h3>
<img src="images/gdi-profile-layout.png" alt="today's project" />
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Workshop Files</h1>
</section>
<section>
<h3>Workshop Files</h3>
<ul>
<li>Sample images</li>
<li>Blank index.html file</li>
<li>Completed demo site as reference</li>
</ul>
</section>
<section>
<h3>Folder Structure</h3>
<p>We've set up the folder structure for the site today to reflect common practices used.</p>
<img src="images/folder-structure.png" alt="folder structure" style="width:500px;"/>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">HTML & CSS</h1>
</section>
<section>
<h3>Tools for Web Development </h3>
<img src="images/html-css-javascript.png" alt="html css and js" style="width:800px;"/>
</section>
<section>
<h3>Tools for Web Development </h3>
<ul>
<li>HTML creates the basic structure and content</li>
<li>CSS creates the presentation layer</li>
<li>JavaScript adds responsiveness and interactivity</li>
</ul>
</section>
<section>
<h3> HTML & CSS </h3>
<img src="images/HTML-CSS.jpeg" alt="html and css" style="width:800px;"/>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;"> HTML5 & CSS3 </h1>
</section>
<section>
<h3> What's the Difference?</h3>
<ul>
<li>Refers to latest version of HTML and CSS from the <a href="https://www.w3.org/standards/">W3C</a></li>
<li>Made a lot of languages and hacks obsolete (e.g. Flash) by replacing with native functionality</li>
<li>Unless specified, HTML & CSS refers to latest versions</li>
</ul>
</section>
<section>
<h3> Where's HTML6 & CSS4?</h3>
<ul>
<li>CSS2.1 and HTML4 were monoliths and browsers were fixed versions</li>
<li>W3C now specs out features instead of everything at once
(e.g. <a href="https://www.w3.org/TR/selectors-4/">level 4 selectors</a>)</li>
<li>Browsers have become "evergreen" and will support latest features on a rolling basis</li>
<li><a href="https://caniuse.com/">Check for support on a per feature basis</a></li>
</ul>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">CSS</h1>
</section>
<section>
<h3>Reset CSS</h3>
<p>Different browsers display HTML elements differently</p>
<p>A reset file returns all HTML elements to a baseline style</p>
<p class="fragment">
<strong>Examples include:</strong>
</p>
<ul class="fragment">
<li>Bulleted lists like this one have standard bullets</li>
<li>Paragraphs & headings have default padding</li>
<li>Links are blue and underlined</li>
</ul>
</section>
<section>
<h3>Reset CSS Examples</h3>
<div>
Most elements:
<pre><code class = "html">
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
</code></pre>
</div>
<div>
Lists:
<pre><code class = "html">
list-style: none;
</code></pre>
</div>
</section>
<section>
<h3>Vendor Prefixes</h3>
<ul>
<li>Not usually needed for evergreen browsers (Chrome, Firefox, and Safari)</li>
<li>Flags the property as a work-in-progress, removed once globally supported</li>
<li>Most modern dev shops handle prefixes with preprocessors and polyfills</li>
</ul>
</section>
<section>
<h3>Vendor Prefixes</h3>
<p>Each browser has their own:</p>
<ul>
<li>
<span class="green">Chrome:</span>-webkit-</li>
<li>
<span class="green">Firefox:</span>-moz-</li>
<li>
<span class="green">Safari:</span>-webkit-</li>
<li>
<span class="green">Opera:</span>-o-</li>
</ul>
</section>
<section>
<h3>Using Prefixes</h3>
<pre><code class="css">.hero img {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}</code></pre>
<p>Order matters! The non-prefixed version should always go last.</p>
</section>
<section>
<h3>NOTE:</h3>
<p style="text-align: left">While you should always use the vendor prefixes when writing code, today we're just going to use the non-prefixed property.</p>
<p style="text-align: left">This is to save time during the code exercises</p>
</section>
<section>
<h3>Standardizing User Experience</h3>
<ul>
<li>Screen sizes vary from device to device</li>
<li>Mobile means displaying content on landscape and portrait mode</li>
<li>Different screen sizes mean different resolutions (e.g. fonts appear smaller on retina)</li>
<li>Different devices have different GPU speeds, bandwidth, and "native" capabilities</li>
</ul>
</section>
<section>
<h3>Fixed vs. Fluid Layout: Fixed*</h3>
<ul>
<li>Container has a set width (usually 960px to 1024px)</li>
<li>Elements have a set width or percentage width</li>
<li>Site remains the same layout no matter the screen size</li>
</ul>
<p style="float: left; margin-top: 20px;"><em>* not recommended for professional web development</em></p>
</section>
<section>
<h3>Fixed vs. Fluid Layout: Fluid</h3>
<ul>
<li>Element widths and heights are percentages</li>
<li>Elements also have min and max widths (for sanity)</li>
<li>Adjusts to different screen widths and resolutions</li>
</ul>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">HTML</h1>
</section>
<section>
<h2>HTML5 Doctype</h2>
<pre><code class="xml">
<!DOCTYPE html>
</code></pre>
<p style="text-align: left">
Minimum information required to ensure that a browser renders using standards mode
</p>
</section>
<section>
<h2>Old Doctypes</h2>
<pre><code class="xml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</code></pre>
</section>
<section>
<h2>Semantic Elements</h2>
<ul>
<li>2001: Semantic Web discussion to enable software "web agents" to find, filter, and correlate unrelated websites for the benefit of the user</li>
<li>Today: Aides web crawlers, search engines, and (most importantly) screen readers "read" a web page</li>
<li><a href="http://html5doctor.com/element-index/">Reference for semantic elements available in HTML5</a></li>
</ul>
</section>
<section>
<h2><section></h2>
<ul>
<li class="fragment">Groups together thematically related content</li>
<li class="fragment">Similar to prior use of the div, but div has no semantic meaning</li>
</ul>
</section>
<section>
<h2><header></h2>
<ul>
<li class="fragment">Container for a group of introductory or navigational aids</li>
<li class="fragment">Document can have multiple header elements</li>
</ul>
</section>
<section>
<h2><nav></h2>
<ul>
<li class="fragment">Contains major navigational information</li>
<li class="fragment">Usually a list of links</li>
<li class="fragment">Often lives in the header</li>
</ul>
</section>
<section>
<h2><footer></h2>
<ul>
<li class="fragment">Contains information about its containing element</li>
<li class="fragment">Document can have multiple footer elements</li>
</ul>
</section>
<section>
<h2><aside></h2>
<ul>
<li class="fragment">Tangentially related content</li>
</ul>
</section>
<section>
<h2><article></h2>
<ul>
<li class="fragment">Self-contained related content</li>
</ul>
</section>
<section>
<h2>Unusual Content</h2>
<p style="text-align: left">Technically, you can name an element anything: </p>
<pre style="text-align: center"><code class="html"><mysteryElement></mysteryElement></code></pre>
<p style="text-align: left">But you <em>should</em> use a div with a semantic class name </p>
<pre style="text-align: center"><code class="html"><div class="commentbox"></div></code></pre>
</section>
<section>
<h3>Break Time</h3>
<img style="height: 600px" src="images/gif1.gif"/>
</section>
<section>
<section>
<h3>HTML Structure</h3>
<p>Remember, it's squares all the way down</p>
<img style="height: 600px" src="images/webdesigngrid.png"/>
</section>
<section>
<h3>HTML Structure</h3>
<p>Even when we break the grid</p>
<img style="height: 600px" src="images/breakingthegrid.png"/>
</section>
<section>
<img style="height: 700px" src="images/website-layout.png"/>
</section>
<section>
<h3>Tools for Layouts</h3>
<p><a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US">Developer plugin</a> to view the internet like a web crawler</p>
<p><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grid</a> new spec for complex layouts without flexbox</p>
</section>
</section>
<section>
<h3>Let's Develop It</h3>
<ul>
<li class="fragment">Use semantic HTML elements to layout the site</li>
<li class="fragment">Refer to the completed project for hints</li>
</ul>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Horizontal Fixed Nav</h1>
</section>
<section>
<h3>Fixed Nav (aka "sticky nav")</h3>
<p style="float:left; font-weight: bold">This is a very popular UX for navigation because:</p>
<ul>
<li>Horizontal fixed-to-top nav allows users to have access to navigational elements at all times</li>
<li>Works well on mobile where pages can be much longer and context isn't always readily available</li>
</ul>
<p style="text-align: left">However, can often take up valuable screen real-estate and require complicated loading scripts for different devices</p>
</section>
<section>
<h3>Fixed Nav: HTML</h3>
<pre><code class="xml">
<header>
<nav>
<ul>
<li><a href="#home">My Home</a></li>
<li><a href="#diet">My Diet</a></li>
<li><a href="#pattern">Stripes</a></li>
</ul>
</nav>
</header>
</code></pre>
</section>
<section>
<h3>Fixed Nav: CSS</h3>
<pre><code class="css">
nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}</code></pre>
</section>
<section>
<h3>Fixed vs Absolute vs Relative</h3>
<ul>
<li>Relative: relative to it's normal position</li>
<li>Absolute: relative to it's nearest (non <code>position: static</code>) parent</li>
<li>Fixed: relative to the viewport</li>
</ul>
<a style="width: 100%; display: block;" href="https://css-tricks.com/almanac/properties/p/position/">Examples of <code>position</code> property in action</a>
</section>
<section>
<h3>Sticky</h3>
<ul>
<li>New property for common mobile UX</li>
<li>Not supported on Opera mini and IE</li>
</ul>
<a style="width: 100%; display: block;" href="https://codepen.io/geoffgraham/pen/ybVzeX">Demo</a>
</section>
<section>
<h3>Fixed Nav: CSS</h3>
<p style="text-align: left"><code>position: fixed</code> means we need to move the <code>body</code> content down in order to prevent the navigation from overlapping</p>
<pre><code class="css">
body {
padding-top: 70px;
}
nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}</code></pre>
</section>
<section>
<h3>Fixed Nav: CSS</h3>
<p style="text-align: left">Align navigation elements and increase click area*</p>
<pre><code class="css">nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}
nav li {
float: left;
width: auto;
}
nav li a {
padding: 25px 10px;
display: block;
}
</code></pre>
<p style="text-align: left">* The recommended minimum click area is 44x44px for accessibility, for more standards check out <a href="https://www.w3.org/WAI/intro/people-use-web/principles">Web Accessibility Initiative</a></a> </p>
</section>
<section>
<h3>Box Model</h3>
<img src="images/css-box-model.png" style="height: 500px" />
</section>
<section>
<h3>Fixed Nav: Adding a brand logo</h3>
<p>We can use an
<code>H1</code> with text replacement to display our logo</p>
<pre><code class="xml">
<header>
<nav>
<h1 class="brand">IMA Zebra</h1>
<ul>
<li><a href="#home">My Home</a></li>
<li><a href="#diet">My Diet</a></li>
<li><a href="#pattern">Stripes</a></li>
</ul>
</nav>
</header>
</code></pre>
</section>
<section>
<h3>Fixed Nav: Text replacement & H1s</h3>
<pre><code class="css">.brand {
color: transparent;
background: url(../images/z.png) no-repeat top left;
height: 60px;
width: 60px;
float: left;
margin: 5px;
}
nav ul {
float: right;
width: auto;
} </code></pre>
</section>
<section>
<h3>Why Text Replacement?</h3>
<ul>
<li>If CSS doesn't load - the title will still be visible to the browser.</li>
<li>If a user is using a screen reader - the title of the site will be readable to them</li>
<li>Improves SEO of our site</li>
</ul>
</section>
<section>
<h3>Fixed Nav: Container</h3>
<p style="text-align: left">We also need to account for large monitors, let's control the width of our page with a container</p>
<pre><code class="xml">
<div class="container">
<header>
<nav>
<h1 class="brand">IMA Zebra</h1>
<ul>
<li><a href="#home">My Home</a></li>
<li><a href="#diet">My Diet</a></li>
<li><a href="#pattern">Stripes</a></li>
</ul>
</nav>
</header>
</div>
</code></pre>
</section>
<section>
<h3>Fixed Nav: Container</h3>
<p style="text-align: left">Let's give the container a fixed width and see what happens.</p>
<pre><code class="css">.container {
width: 1024px;
margin: 0 auto;
}</code></pre>
</section>
<section>
<h3>Develop It!</h3>
<p style="text-align: left">Let's make some small tweaks to the navigation
<ul>
<li>Remove the underlines on the links with
<code>text-decoration</code>
</li>
<li>Change the color of the links</li>
<li>Try adding a background color on hover</li>
</ul>
</section>
<section>
<h3>Break Time</h3>
<img style="height: 600px" src="images/gif2.gif"/>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Hero Section</h1>
</section>
<section>
<h3>What is a Hero?</h3>
<ul>
<li>Large banner image</li>
<li>First impression of a site used to display the most important information </li>
<li>Often consists of image and text, can be static or dynamic</li>
</ul>
</section>
<section>
<section>
<h2>Hero Examples</h2>
</section>
<section>
<img src="images/apple.png" />
</section>
<section>
<img src="images/uber.png" />
</section>
<section>
<img src="images/fostr.png" />
</section>
<section>
<img src="images/ndesign.png" />
</section>
<section>
<img src="images/karma.png" />
</section>
</section>
<section>
<h3>Hero: HTML</h3>
<pre><code class="xml"><section class="hero">
<img src="images/zebra.jpg" alt="IMA Zebra" />
<h2>IMA Zebra</h2>
<span class="city">Africa</span>
</section> </code></pre>
</section>
<section>
<h3>Hero: CSS</h3>
<pre><code class="css">.hero {
background: url(../images/zebra.jpg) no-repeat top left;
color: #fafafa;
text-align: center;
height: 350px;
padding: 25px 0;
}
</code></pre>
<p style="text-align: left">Remember our Box Model. Padding adds to the height & width of elements.</p>
<p style="text-align: left">So the height of our hero will be
<code>400px</code>
</p>
</section>
<section>
<h3>Hero: Profile Image</h3>
<pre><code class="css">.hero img {
width: 150px;
}</code></pre>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Border-radius</h1>
</section>
<section>
<h3>Border-radius</h3>
<p style="text-align: left">20px radius on all corners</p>
<pre><code class="css">.hero img {
border-radius: 20px;
}</code></pre>
<img src="images/radius-20.png" />
</section>
<section>
<h3>Border-radius</h3>
<p style="text-align: left">10px radius on top left & bottom right</p>
<p style="text-align: left">40px on top right & bottom left</p>
<pre><code class="css">.hero img {
border-radius: 10px 40px;
}</code></pre>
<img src="images/radius-10-40.png" />
</section>
<section>
<h3>Border-radius</h3>
<p style="text-align: left">10px radius on top left</p>
<p style="text-align: left">20px radius top right</p>
<p style="text-align: left">40px radius bottom right</p>
<p style="text-align: left">80px radius bottom left</p>
<pre><code class="css">.hero img {
border-radius: 10px 20px 40px 80px;
}</code></pre>
<img src="images/radius-10-20-40-80.png" />
</section>
<section>
<h3>Border-radius</h3>
<p style="text-align: left">50% radius on all corners</p>
<pre><code class="css">.hero img {
border-radius: 50%;
}</code></pre>
<img src="images/radius-50.png" />
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Background-size</h1>
</section>
<section>
<h3>Background-size</h3>
<pre><code class="css">.hero {
background: url(../images/zebra.jpg) no-repeat top left;
color: #fafafa;
text-align: center;
height: 350px;
padding: 25px 0;
background-size: cover;
}
</code></pre>
<p style="text-align: left">
<code>cover</code> scales the image to the largest size such that both its width and its height can fit inside the content area.</p>
</section>
<section>
<h3>Develop It!</h3>
<p style="text-align: left">Let's make some small tweaks to the Hero
<ul>
<li>Move the image down from the top</li>
<li>Adjust the font size of the header</li>
<li>Add a border to the span</li>
</ul>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">3-column Layout</h1>
</section>
<section>
<h3>Why 3 Columns?</h3>
<p style="text-align: left">Commonly used layout due to:</p>
<ul>
<li>Flexibility</li>
<li>Readability</li>
<li>Visually pleasing layout with centered content</li>
</ul>
</section>
<section>
<h3>3 Column: HTML</h3>
<pre><code class="xml"><section class="main-content">
<h3>...</h3>
<section class="column">
<img src="images/africa.png" alt="Africa">
<h4>My Home</h4>
<p>Wild zebras live in Africa.</p>
<a href="home.html" class="btn">See my home</a>
</section>
<!-- Repeat .column x3 -->
</section> </code></pre>
</section>
<section>
<h3>3 Column: CSS</h3>
<pre><code class="css">.column {
float: left;
width: 30%;
padding: 15px;
} </code></pre>
<p style="text-align: left; margin-top: 40px; display: block;">100% width / 3 columns = 30% column width</p>
</section>
<section>
<h3>3 Column: Images</h3>
<p style="text-align: left;" >Images won't scale with the columns, because they ignore constraints like
<code>div</code> width, unless you tell them to do so.</p>
<pre><code class="css">.column img {
width: 90%;
max-width: 90%;
border-radius: 50%;
}</code></pre>
</section>
<section>
<h3>3 Column: Container</h3>
<p style="text-align: left;">Make sure the columns are inside of our container div in order to preven them from stretching too far</p>
<p style="text-align: left;">Why not wrap everything in a separate container? <br> Because DRY: Don't Repeat Yourself</p>
</section>
<section>
<h3>Develop It!</h3>
<p style="text-align: left">Let's make some small tweaks to the columns
<ul>
<li>Adjust the font size of the main header of the content area</li>
<li>Adjust the font size of the headers in the columns - try changing their colors too</li>
<li>Add a border to the images to make them stand out a bit more</li>
</ul>
</section>
<section>
<h3>End of Day #1</h3>
<img style="height: 600px;" src="images/gif3.gif" >
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">SVG Graphics</h1>
</section>
<section>
<h2>SVG vs JPEG vs PNG vs GIF?</h2>
<p style="text-align: left;">Every image file format has their advantages and disadvantages, but general rule of thumb:</p>
<ul>
<li>JPEG: Photos and color heavy images, widely supported and light-weight</li>
<li>PNG: Images with sharp lines, editable and transparency</li>
<li>GIF: Lightweight alternative to video format</li>
<li>SVG: Single color images, dynamic rendering, lossless scaling, tiny file size, only supported on web</li>
</ul>
</section>
<section>
<h2>SVG</h2>
<p style="text-align: left;">Use Adobe Illustrator, or another vector program, to create a high quality image.</p>
<p style="text-align: left;">Save it as a .svg file.</p>
<p style="text-align: left;">Compress the svg file for web using <a href="https://jakearchibald.github.io/svgomg/">SVGOptimizer</a></p>
</section>
<section>
<h2>SVG</h2>
<p style="text-align: left;">Image source:</p>
<pre><code class="xml"><img src="logo.svg" alt="logo"></code></pre>
</section>
<section>
<h2>SVG</h2>
<p style="text-align: left;">Embed:</p>
<pre><code class="xml">
<svg ...>
<ellipse class="ground" .../>
<path class="kiwi" .../>
</svg>
</code>
</pre>
</section>
<section>
<h2>SVG</h2>
<p style="text-align: left;">Background image:</p>
<pre><code class="xml"><div class="logo"></div></code></pre>
<pre><code class="css">.logo {
display: block;
color: transparent;
width: 100px;
height: 82px;
background: url(logo.svg);
background-size: 100px 82px;
}</code></pre>
</section>
<section>
<h3>Social Links: HTML</h3>
<pre><code class="html"></section> class="social">
<ul>
<li>
<a href="..">
<img src="images/facebook.svg" alt="Facebook" />
</a>
</li>
<!-- Repeat for all social links you want to include -->
</ul>
</section>
</code></pre>
</section>
<section>
<h3>Social Links: CSS</h3>
<pre><code class="css">.social {
background: #57BEC5;
color: #fafafa;
padding: 25px 0;
overflow: hidden;
}
.social li {
float: left;
width: auto;
padding: 20px;
}</code></pre>
</section>
<section>
<h3>Centering the List</h3>
<p style="text-align: left">First we should put our social links in a container! We'll also add in a headline.</p>
<pre><code class="xml"><section id="social">
<div class="container">
<h3>...</h3>
<ul>
...
</ul>
</div>
</section></code></pre>
<p style="text-align: left">Next we'll center the
<code>ul</code> with a very <a href="http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support" target="_blank">flexible technique</a> that will allow us to have a list of any width</p>
</section>
<section>
<h3>Develop It!</h3>
<ul>
<li>Style the headline using the Descendant Selector</li>
<li>If you have Illustrator or another program to modify .svg graphics, change the colors to match your site</li>
</ul>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">@font-face</h1>
</section>
<section>
<h3>Web Typography</h3>
<p style="text-align: left">Very broad topic with lots of exciting developments:
<a href="http://alistapart.com/event/web-typography-layout-past-present-future">Web Typography & Layout: Past, Present, and Future</a>
</p>
<p style="text-align: left">But for today, we're just going to focus on how to use them</p>
</section>
<section>
<h3>Google Fonts</h3>
<p style="text-align: left">Professional sites will often have custom designed fonts hosted on their own servers</p>
<p style="text-align: left">For the rest of us, Google offers <a href="http://www.google.com/fonts">free, web-optimized, hosted fonts</a></p>
</section>
<section>
<h3>Google Fonts</h3>
<p style="text-align: left">In our example, we've used Lato for the body and Bree Serif for the headlines</p>
<img src="images/lato.png" alt="lato" style="width: 40%; float: left;" />
<img src="images/bree.png" alt="bree" style="width: 40%; float: right;" />
</section>
<section>
<h3>Using Google Fonts</h3>
<ol>
<li>Search the hundreds of font families, then add them to your collection.</li>
<li>Compare and refine the collection - think about what styles you NEED.</li>
<li>Grab the code that Google prepares for you and add it to your site</li>
</ol>
<pre><code class = "html">
@import url(http://fonts.googleapis.com/
css?family=Lato:300,400,700,300italic,400italic|Bree+Serif);
</code></pre>
<a href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|Bree+Serif" target="_blank">What does that do?</a>
</section>
<section>
<h3>Using Google Fonts</h3>
<pre><code class = "html">
body{
font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Bree Serif', serif;
}
</code></pre>
</section>
<section>
<h3>Develop It!</h3>
<ul>
<li>Choose your fonts from Google fonts</li>
<li>Adjust the <code>font-size</code> and <code>line-height</code> </li>
</ul>
</section>
<section data-background="#f05b62">
<h2 style="color: #fafafa;">rgba colors & opacity</h2>
</section>
<section>
<h3>rgba Colors & Opacity</h3>
<ul>
<li>hexadecimal <span style="color: #0000FF">#0000FF</span></li>
<li><span style="color: rgb(0, 0, 255)">rgb(0, 0, 255)</span></li>
</ul>
</section>
<section>
<h3>rgba Colors & Opacity</h3>
<p style="text-align: left">rgba = <strong>R</strong>ed <strong>G</strong>reen <strong>B</strong>lue <strong>A</strong>lpha</p>
<p style="text-align: left">Alpha controls the alpha channel of a color, aka the opacity</p>
<p style="text-align: left"><code>opacity</code> controls the opacity of an element</p>
<p style="text-align: left">Opacity is always a decimal value from 0 (transparent / not visible) - 1 ( fully visible)</p>
</section>
<section>
<h3>rgba colors & opacity</h3>
<article class="fragment">
<div style="background-color: rgb(255, 0, 0); opacity: 1; height: 50px; width: 40%; float: right; margin-bottom: 20px; border: 3px solid black;">
opacity: 1;
</div>
<div style="background-color: rgba(255, 0, 0, 1); height: 50px; width: 40%; float: left; margin-bottom: 20px;border: 3px solid black;">
rgba(255, 0, 0, 1);
</div>
</article>
<article class="fragment">
<div style="background-color: rgb(255, 0, 0); opacity: .8; height: 50px; width: 40%; float: right; margin-bottom: 20px;border: 3px solid black;">
opacity: .8;
</div>
<div style="background-color: rgba(255, 0, 0, .8); height: 50px; width: 40%; float: left; margin-bottom: 20px;border: 3px solid black;">
rgba(255, 0, 0, .8);
</div>
</article>
<article class="fragment">
<div style="background-color: rgb(255, 0, 0); opacity: .6; height: 50px; width: 40%; float: right; margin-bottom: 20px;border: 3px solid black;">
opacity: .6;
</div>
<div style="background-color: rgba(255, 0, 0, .6); height: 50px; width: 40%; float: left; margin-bottom: 20px;border: 3px solid black;">
rgba(255, 0, 0, .6);
</div>
</article>
<article class="fragment">
<div style="background-color: rgb(255, 0, 0); opacity: .4; height: 50px; width: 40%; float: right; margin-bottom: 20px;border: 3px solid black;">
opacity: .4;
</div>
<div style="background-color: rgba(255, 0, 0, .4); height: 50px; width: 40%; float: left; margin-bottom: 20px;border: 3px solid black;">
rgba(255, 0, 0, .4);
</div>
</article>
<article class="fragment">
<div style="background-color: rgb(255, 0, 0); opacity: .2; height: 50px; width: 40%; float: right; margin-bottom: 20px;border: 3px solid black;">
opacity: .2;
</div>
<div style="background-color: rgba(255, 0, 0, .2); height: 50px; width: 40%; float: left; margin-bottom: 20px;border: 3px solid black;">
rgba(255, 0, 0, .2);
</div>
</article>
<article class="fragment">
<div style="background-color: rgb(255, 0, 0); opacity: .1; height: 50px; width: 40%; float: right; margin-bottom: 20px;border: 3px solid black;">
opacity: .1;
</div>
<div style="background-color: rgba(255, 0, 0, .1); height: 50px; width: 40%; float: left; margin-bottom: 20px;border: 3px solid black;">
rgba(255, 0, 0, .1);
</div>
</article>
</section>
<section>
<h3>Develop It!</h3>
<ul>
<li>Change some colors to have alpha transparency or opacity.</li>
<li>Use <a href="http://hex2rgba.devoth.com/" target="_blank">http://hex2rgba.devoth.com/</a> to convert HEX to RGBA.</li>
<li>Try making the navbar 80% opaque.</li>
</ul>
</section>
<section data-background="#f05b62">
<h2 style="color: #fafafa;">Text Shadow</h2>
</section>
<section>
<h2>text-shadow</h2>
<pre><code>#example1 { text-shadow: 2px 2px 10px red; }
#example2 {
text-shadow: 1px 1px 10px red,
10px 10px 10px orange,
15px 15px 10px yellow,
20px 20px 10px green,
25px 25px 10px blue,
30px 30px 10px purple;
}</code></pre>
<article class="text-shadow">
<div class="example1">lorem ipsum</div>
<div class="example2">lorem ipsum</div>
</article>
</section>
<section data-background="#f05b62">
<h2 style="color: #fafafa;">Box Shadow</h2>
</section>
<section class="example1">
<h3>box-shadow</h3>
<p style="text-align: left">box-shadow: offset-x offset-y color</p>
<pre><code>
.example1 { box-shadow: 5px 5px red; }