/
rwb.html
2247 lines (2221 loc) · 84.4 KB
/
rwb.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 xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=yes"
/>
<title>Responsive Web Design Quick Reference</title>
<link href="styles.css" rel="stylesheet" />
<link
href="https//fonts.googleapis.com/css?family=Roboto+Mono:300,400"
rel="stylesheet"
/>
<link
href="https//fonts.googleapis.com/css?family=Lato:400"
rel="stylesheet"
/>
</head>
<body onload="PR.prettyPrint()">
<header>
<div class="logo">
<img src="fcc_primary_large.jpg"
alt="freecodecamp logo"
class="hero-img"
loading="lazy"
width="200">
</div>
<nav>
<ul>
<li>
<a href="#html">HTML</a>
<ul>
<li><a href="#basic-layout">Basic layout</a></li>
<li>
<a href="#google-fonts-and-fontawesome-icons"
>Google fonts and fontawesome icons</a
>
</li>
<li><a href="#general">General</a></li>
<li>
<a href="#identifying-elements-id-class"
>Identifying elements (id class)</a
>
<ul>
<li><a href="#id">Id</a></li>
<li><a href="#class">Class</a></li>
</ul>
</li>
<li>
<a href="#layout-elements">Layout elements</a>
<ul>
<li><a href="#heading-h1">Heading h1</a></li>
<li><a href="#paragraph-p">Paragraph p</a></li>
<li><a href="#list-ul">List ul</a></li>
<li><a href="#div">Div</a></li>
<li><a href="#span">Span</a></li>
<li><a href="#section">Section</a></li>
<li><a href="#article">Article</a></li>
<li><a href="#divider-hr">Divider hr</a></li>
<li><a href="#line-break-br">Line break br</a></li>
<li><a href="#table">Table</a></li>
</ul>
</li>
<li>
<a href="#inputs">Inputs</a>
<ul>
<li><a href="#form">Form</a></li>
<li><a href="#fieldset">Fieldset</a></li>
<li><a href="#legend">Legend</a></li>
<li><a href="#label">Label</a></li>
<li><a href="#input">Input</a></li>
<li><a href="#select">Select</a></li>
<li><a href="#textarea">Textarea</a></li>
<li><a href="#button">Button</a></li>
</ul>
</li>
<li>
<a href="#images-links-icons">Images, links, icons</a>
<ul>
<li><a href="#image">Image</a></li>
<li><a href="#anchor">Anchor</a></li>
<li><a href="#icon">Icon</a></li>
</ul>
</li>
<li>
<a href="#other-topics">Other topics</a>
<ul>
<li><a href="#html-formatting">HTML formatting</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#css">CSS</a>
<ul>
<li><a href="#general-1">General</a></li>
<li><a href="#selectors">Selectors</a></li>
<li><a href="#psuedo-selectors">Psuedo selectors</a></li>
<li>
<a href="#layout">Layout</a>
<ul>
<li>
<a href="#initial-page-setup">Initial page setup</a>
</li>
<li><a href="#css-box-model">CSS box model</a></li>
<li><a href="#box-sizing">Box sizing</a></li>
<li><a href="#grid">Grid</a></li>
<li><a href="#flexbox">Flexbox</a></li>
<li>
<a href="#columns-with-column-width"
>Columns with column-width</a
>
</li>
<li>
<a href="#position-top-right-left-bottom-z-index"
>Position, top right left bottom, z-index</a
>
</li>
<li><a href="#float">Float</a></li>
<li><a href="#display">Display</a></li>
<li><a href="#divider">Divider</a></li>
<li><a href="#margin">Margin</a></li>
<li><a href="#padding">Padding</a></li>
<li>
<a href="#accessibility-media"
>Accessibility (<span
class="citation"
data-cites="media"
>@media</span
>)</a
>
</li>
<li><a href="#overflow">Overflow</a></li>
</ul>
</li>
<li>
<a href="#element-properties">Element properties</a>
<ul>
<li><a href="#variables">Variables</a></li>
<li>
<a href="#font-text-list">Font, text, list</a>
<ul>
<li><a href="#font">Font</a></li>
<li><a href="#text">Text</a></li>
<li><a href="#letters">Letters</a></li>
<li><a href="#list-styles">List styles</a></li>
</ul>
</li>
<li>
<a href="#dimensions--shapes"
>Dimensions & shapes</a
>
<ul>
<li><a href="#widthheight">Width/height</a></li>
<li><a href="#aspect-ratio">Aspect ratio</a></li>
<li><a href="#gap">Gap</a></li>
<li><a href="#object-fit">Object-fit</a></li>
<li><a href="#shapes">Shapes</a></li>
</ul>
</li>
<li>
<a href="#borders--backgrounds"
>Borders & backgrounds</a
>
<ul>
<li><a href="#borders">Borders</a></li>
<li><a href="#border-radius">Border radius</a></li>
<li><a href="#box-shadow">Box shadow</a></li>
<li>
<a href="#background-image">Background-image</a>
</li>
</ul>
</li>
<li>
<a href="#color">Color</a>
<ul>
<li><a href="#basics">Basics</a></li>
<li>
<a href="#linear-gradient">Linear gradient</a>
</li>
<li>
<a href="#repeating-linear-gradient"
>Repeating linear gradient</a
>
</li>
<li>
<a href="#radial-gradient">Radial gradient</a>
</li>
<li><a href="#opacity">Opacity:</a></li>
</ul>
</li>
<li>
<a href="#other-topics-filter-transform-content"
>Other topics (filter, transform, content)</a
>
<ul>
<li><a href="#filter">Filter</a></li>
<li><a href="#transform">Transform</a></li>
<li><a href="#content">Content</a></li>
</ul>
</li>
<li><a href="#tables">Tables</a></li>
<li>
<a href="#functions-minmax-calc-repeat"
>Functions (minmax, calc, repeat)</a
>
</li>
</ul>
</li>
<li>
<a href="#user-interface">User interface</a>
<ul>
<li><a href="#cursor">Cursor</a></li>
<li><a href="#scroll-behaviour">scroll behaviour</a></li>
</ul>
</li>
<li>
<a href="#animation">Animation</a> -
<a href="#basic-settings-with-keyframes"
>Basic settings with
<span class="citation" data-cites="keyframes"
>@keyframes</span
></a
>
<ul>
<li>
<a href="#motion-based-animations-media-rule"
>Motion based animations
<span class="citation" data-cites="media"
>@media</span
>
rule</a
>
</li>
</ul>
</li>
<li>
<a href="#accessibility">Accessibility</a>
<ul>
<li><a href="#general-notes">General notes</a></li>
<li><a href="#screen-readers">Screen readers</a></li>
<li>
<a href="#navigation-key-shortcuts"
>Navigation key shortcuts</a
>
</li>
<li>
<a href="#html-and-css-to-reverse-heading-order"
>HTML and CSS to reverse heading order</a
>
</li>
</ul>
</li>
<li>
<a href="#useful-formats">Useful formats</a>
<ul>
<li>
<a href="#draw-a-cat-eye-drawing-shapes"
>Draw a cat eye (drawing shapes)</a
>
</li>
<li><a href="#quotation-format">Quotation format</a></li>
</ul>
</li>
<li>
<a href="#design-theory">Design theory</a>
<ul>
<li><a href="#colours">Colours</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<h1 id="respWebDesign"><span class="callout">Unofficial</span> Responsive Web Design Quick Reference</h1>
<h2 id="intro">Introduction</h2>
<p>This quick reference is an organised and tidied up version of my notes from
freeCodeCamp's <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">Responsive Web Design course</a>.
Credit to the original authors on freeCodeCamp.
And further credit to developers.mozilla and w3schools where I found additional information. Please feel free to
contact me on alex@alexroan.com if you spot any errors or have any suggested changes.</p>
<p id="name">- Alexander</p>
<h2 id="html">HTML</h2>
<h3 id="basic-layout">Basic layout</h3>
<p>
The basic layout of an html document includes several key tags which
provide information about the document and provide the structure for the
page. The basic order is:
</p>
<ul>
<li>!DOCTYPE: declares the document as html</li>
<li>html: starts html and specify language</li>
<li>
head <code><head></head></code> - contains the title, meta
information and link information
<ul>
<li>
Title contains the page title
<code><title>page title</title></code>
<ul>
<li>This determines what is shown in the title bar</li>
<li>
Also determines what is shown when hovering on a browser tab
</li>
</ul>
</li>
<li>
Meta declare key characteristics for the page
<ul>
<li>These are self closing <code><meta... ></code></li>
<li>Multiple meta elements can exist for a page</li>
</ul>
</li>
<li>
Link declares external information utilised by the html
<ul>
<li>These are self closing <code><link... ></code></li>
<li>Multiple link elements can exist for a page</li>
<li>Examples include CSS stylesheets and google fonts</li>
</ul>
</li>
</ul>
</li>
<li>
body <code><body></body></code>
<ul>
<li>
header <code><header></header></code>
<ul>
<li>
In general this section is used to Introduce the page &
provide a menu
</li>
<li>
The main navigation menu should be placed inside
<code><nav></nav></code>
</li>
</ul>
</li>
<li>
Main <code><main></main></code>
<ul>
<li>In general contains the core content of the page</li>
</ul>
</li>
<li>
Footer <code><footer></footer></code>
<ul>
<li>May include information such as author and address</li>
<li>
For example may include address with
<code><address></address></code>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre class="prettyprint">
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example page title</title>
<meta name="description" content="example description text" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
</code>
</pre>
<h3 id="google-fonts-and-fontawesome-icons">
Google fonts and fontawesome icons
</h3>
<p>
During the exercises additional links were added to the html head to
access additional fonts from google fonts and icons from fontawesome.
Detailed instructions are available at:
</p>
<ul>
<li>
<a href="https://developers.google.com/fonts/docs/getting_started"
>Get started with google fonts</a
>
</li>
<li><a href="https://fontawesome.com/">fontawesome</a></li>
</ul>
<pre class="prettyprint"><code><head>
<!-- example to get Open Sans font family from google -->
<link href="https//fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet"/>
<!-- register at fontawesome to get a personalised url -->
<link href="url from fontawesome" rel="stylesheet"/>
</head></code></pre>
<h3 id="general">General</h3>
<ul>
<li>In general 2 spaces are used for html code indentation</li>
<li>
Comments are placed using the following syntax:
<code><!-- comment here --></code>
</li>
<li>
All html elements have borders, but the border property is normally
set to none by default
</li>
<li>
Basic styling can be done directly in CSS with the
<style></style>
tags
</li>
</ul>
<h3 id="identifying-elements-id-class">
Identifying elements (id class)
</h3>
<h4 id="id">Id</h4>
<p>
In general id is used to identify specific html elements. In CSS a
hashtag is used to refer to an id e.g. <code>#exampleID</code>
</p>
<pre
class="prettyprint"
><code><input type="radio" id="exampleID"></code></pre>
<h4 id="class">Class</h4>
<p>
In general class is used to identify html elements. One class can be
applied to many elements. In CSS a full stop is used to refer to a class
e.g. <code>.exampleClass</code>
</p>
<pre
class="prettyprint"
><code><div class="exampleClass1"></div>
<!-- More than one class can be used separated by a space -->
<div class="exampleClass1 exampleClass2"></div></code></pre>
<h3 id="layout-elements">Layout elements</h3>
<h4 id="heading-h1">Heading h1</h4>
<ul>
<li>
Headings are defined with the <code><h1></code> to
<code><h6></code> tags
</li>
<li>
In general limit the use of <code><h1></code> to once per page
</li>
<li>
These are block-level by default (use
<code>display: inline-block;</code> to change)
</li>
</ul>
<h4 id="paragraph-p">Paragraph p</h4>
<ul>
<li>Paragraph is the main element to mark text</li>
<li>
These are block-level by default (use
<code>display: inline-block;</code> to change)
</li>
</ul>
<h4 id="list-ul">List ul</h4>
<p>
An unordered list starts with the <code><ul></code> tag. Each list
item starts with the <code><li></code> tag. While an ordered list
starts with
<code><ol></code>
</p>
<ul>
<li>
Tips
<ul>
<li>
List items can have header elements and paragraph elements
embedded within
</li>
</ul>
</li>
</ul>
<pre class="prettyprint"><code><ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul></code></pre>
<h4 id="div">Div</h4>
<p>
Div is an element that is primarily used to provide structure and
formatting to a page where other more specific elements are not
available
</p>
<ul>
<li>This is a block level container</li>
<li>Often used for formatting</li>
<li>
For design it can group elements so that formatting can be applied to
a number together
</li>
<li>
Multiple div elements can be stacked together. To separate them out
use margin-top and margin-bottom values
</li>
<li>CSS height width values can be used to give them size<br /></li>
<li>
CSS properties such as <code>background-color</code> can be used to
add formatting
</li>
<li>
Div can also be used to push or move other elements (see the marker
cap exercise)
</li>
</ul>
<pre
class="prettyprint"
><code><div class="classOne classTwo"> </div> <!-- attaching multiple classes -->
<div id="id"> </div> <!-- using id to connect items to CSS --></code></pre>
<h4 id="span">Span</h4>
<p>
Span is typically used to mark text or part of a document for formatting
</p>
<ul>
<li>This is an inline-element</li>
<li>
Similar usage to div as in terms of a formatting tool, but on an
inline basis
</li>
</ul>
<h4 id="section">Section</h4>
<p>
Section is used to mark generic standalone section of a document, it
should always have a heading. As it can be tricky to know whether to use
a section or more specific CSS element here are some guidelines found on
Mozilla:
</p>
<ul>
<li>Section examples: A list of search results, a map element</li>
<li>
Each section should have a heading <code><h1></code> -
<code><h6></code> as the child of the section (note that
headings are key for screen readers and SEO)
</li>
<li>
Only use when there isn’t a more specific element.
<ul>
<li>A menu should be wrapped in <code><nav></code></li>
<li>
For standalone atomic units of content that make sense e.g. blog
post, comment, newspaper article use <code><article></code>
</li>
<li>
For useful tangential information alongise main content
e.g. related links, author bio use <code><aside></code>
</li>
<li>For main contents use <code><main></code></li>
<li>
If you are using only for styling purposes use a
<code><div></code> instead
</li>
</ul>
</li>
<li>
Sections without a heading may occur:
<ul>
<li>
In web application/UI rather than traditional content structures
</li>
<li>
If global menu already utilises <code><nav></code> you could
use section for an alternate menu e.g. previous / next button bars
for controlling apps
</li>
</ul>
</li>
</ul>
<p>
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"
>Developers Mozilla - section</a
>
</p>
<h4 id="article">Article</h4>
<p>
Article is commonly used to group multiple elements with related
information. For example in the exercises an article with a class
attribute is used to style all nested elements of a particular type:
</p>
<ul>
<li>html: <code><article class=”item”></code></li>
<li>css: <code>CSS .item p* {}</code></li>
</ul>
<h4 id="divider-hr">Divider hr</h4>
<p>
W3 schools defines the purpose of hr to make a thematic break or shift
of topic.
</p>
<ul>
<li>This is a self closing element</li>
<li>Default thickness is 1px</li>
<li>
For design, it’s common to adjust height, border colour, background
colour, thickness
</li>
<li>
Tip: this can be used with CSS to add margin space e.g. <code
>margin-top</code
>
</li>
</ul>
<h4 id="line-break-br">Line break br</h4>
<p>The br element inserts a single line break.</p>
<h4 id="table">Table</h4>
<p>Tables can be created in CSS with a set structure of elements.</p>
<ul>
<li>
<code><thead></thead></code> - is used to identify the
header
</li>
<li>
<code><tr></tr></code> - is used for table rows, initially
for the header row
</li>
<li>
<code><td></td></code> - is used for table data cell:
<ul>
<li>
One is also added to the header to ensure correct layout data
association
</li>
</ul>
</li>
<li>
<code><th></th></code> - is used for header cell i.e
column lables
<ul>
<li>
Add one per column. Use <code><span></span></code> to
add column labels
</li>
</ul>
</li>
<li>
<code><tbody></tbody></code> - is used to identify table
data
</li>
<li>
<code><tr></tr></code> - table row - add one per row of
data (and total if relevant)
</li>
<li>
<code><th></th></code> - row labels - add one per row with
the row title
</li>
<li>
<code><td></td></code> - data - add one per number of
columns
</li>
<li>
Tips:
<ul>
<li>
Add a class to each <code><td></code> in a specific column
to apply a format to that column
</li>
<li>
Grouping several tables into a <code><div></code> and using
CSS can help screen readers understand document flow
</li>
<li>
Use caption <code><caption></caption></code> with
tables to describe the table. Caption should be placed as the
first child of a table
</li>
</ul>
</li>
</ul>
<pre
class="prettyprint"
><code><!-- to illustrate, here is a table from the exercises -->
<table>
<caption>Assets</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only year">2019</span></th>
<th><span class="sr-only year">2020</span></th>
<th class="current"><span class="sr-only year">2021</span></th>
</tr>
</thead>
<tbody>
<!-- repeat following for each row, only 1 row shown -->
<tr class="data">
<th>Cash <span class="description">Current cash on hand.</span></th>
<td>$25</td>
<td>$30</td>
<td class="current">$28</td>
</tr>
</tbody>
</table></code></pre>
<h3 id="inputs">Inputs</h3>
<h4 id="form">Form</h4>
<p>
The form element is used to create an HTML form for user input. It can
contain various input elements. Form attributes:
</p>
<ul>
<li>action: the url for the page that form-data is sent to</li>
<li>method: how to send form-data. =”GET”` or `“POST”`</li>
<ul>
<li>Use `GET` to append form-data into the URL as name/value pairs (data is visible)</li>
<li>Use `POST` to append form-data inside the body of the http request (data is not shown in the url)</li>
</ul>
</ul>
<p>
When a form element contains a button element and the button attribute
type is set to submit the button will trigger sending the nearest parent
form. Form data for a button is based on it’s name and value attributes.
</p>
<pre
class="prettyprint"
><code><form action="https://freecodecamp.org/practice-project/accessibility-quiz" method="POST">
<button type="submit">Submit</Submit>
</form></code></pre>
<h4 id="fieldset">Fieldset</h4>
<p>
Fieldset is used to group various form elements. It draws a box around
them. It is block level by default.
</p>
<pre class="prettyprint"><code><fieldset></fieldset></code></pre>
<h4 id="legend">Legend</h4>
<ul>
<li>
Legend is used inside of a fieldset and defines a caption for the
fieldset
</li>
</ul>
<pre class="prettyprint"><code><legend></legend></code></pre>
<h4 id="label">Label</h4>
<p>
Label associates text with an input element. These are inline by
default. Add display: block to CSS to change
</p>
<ul>
<li>
Attributes:
<ul>
<li>for: use to associate with input element by common id</li>
</ul>
</li>
</ul>
<pre
class="prettyprint"
><code><label for="id"></label></code></pre>
<h4 id="input">Input</h4>
<p>
The input element is used to get user-input. It has a wide range of
types with specific formats and behaviours.
</p>
<ul>
<li>
Input can be nested in label, in this case <code>for="id"</code> is
not required, but it’s good practice to include
</li>
<li>Input is self closing</li>
<li>
Attributes:
<ul>
<li>id: element id</li>
<li>
name: A name is required to make data accessible by submit-url
defined in form action
<ul>
<li>
Make name the same for groups of radiobox to make only one
selectable
</li>
<li>
Use attribute to link radio buttons and make only one
selectable
</li>
<li>
Adding name for checkboxes makes it easier for a server to
process web form, especially with multiple checkboxes
</li>
</ul>
</li>
<li>
types
<ul>
<li>
type =“text”: The default type if not specified is a text box
</li>
<li>
type=“email”: Only allows emails with a @ and a . in the
domain
</li>
<li>
type=“password”: Obscures the input and warns if site does not
use https
</li>
<li>
type=“submit”: Adds a submit button where the first added is
automatically set to submit nearest parent form
</li>
<li>type=“radio”: For radiobox</li>
<li>
type=“checkbox”: For checkbox
<ul>
<li>
Note for checkbox value is optional, but good practice is
to include, can be set to same as id
</li>
<li>Use attribute “checked” to set as default checkbox</li>
</ul>
</li>
<li>type=“file”: Collect an input file</li>
</ul>
</li>
<li>
value: This must be specified to identify value of submitted forms
</li>
<li>
placeholder=“example text”: Not necessarily good practice as may
confuse. Suggested to use labels instead
</li>
<li>required: Used to identify an input as required</li>
<li>
min=“” max=““: Min and max can be used with numbers to specify min
/ max values
</li>
<li>
minlength=”8”: Add a minimum length requirement e.g. for a
password field
</li>
<li>
pattern=”[a-z0-5]{8,}”: Specify allowable format for passwords
e.g. in the example 8 or more lowercase letters or digits 0-5
</li>
</ul>
</li>
</ul>
<pre class="prettyprint"><code><label for="id"></label>
<input id="id" name="name" />
<label><input id="id" name="name"></label></code></pre>
<h4 id="select">Select</h4>
<p>
Select is a container for a group of option elements. Think of a
dropdown list. The option element acts as a label for each possible
dropdown selection
</p>
<ul>
<li>
Attributes:
<ul>
<li>
id: in forms id is used to link input elements to labels (with
label attribute ‘for’)
</li>
<li>
value: specifies the value to be sent to the server. If missing
text will be sent
</li>
<li>required: make the select a required entry</li>
<li>
selected: define the default option to show in the select dropdown
</li>
</ul>
</li>
</ul>
<pre class="prettyprint"><code><select required>
<option value="1">option text</option>
<option value="2" selected>option text 2</option>
</select></code></pre>
<h4 id="textarea">Textarea</h4>
<p>Textarea provides a sinple text entry box</p>
<ul>
<li>
Attributes:
<ul>
<li>rows: define size in rows</li>
<li>cols: define size in cols</li>
<li>placeholder: specify default initial text</li>
</ul>
</li>
</ul>
<pre class="prettyprint"><code><textarea></textarea></code></pre>
<h4 id="button">Button</h4>
<ul>
<li>
In addition to submitting forms buttons can be added and used to
trigger other actions.
</li>
<li>
Attributes
<ul>
<li>
type=“button”: use this to prevent automatic form submission
</li>
</ul>
</li>
</ul>
<pre
class="prettyprint"
><code><button type="button">text</button></code></pre>
<h3 id="images-links-icons">Images, links, icons</h3>
<h4 id="image">Image</h4>
<p>Image is used to insert an image based on a url</p>
<ul>
<li>This is a self closing tag</li>
<li>Width can be specified directly in HTML as well as in CSS</li>
<li>Image acts as an ‘inline’ element</li>
<li>
Attributes:
<ul>
<li>
alt: used to specify accessibility text (description of the
picture)
</li>
<li>
loading=”lazy”: This can be used to tell the browser not to fetch
the image resource until it is needed (when the user scrolls the
image into view). Lazy loaded elements will not load until the
non-lazy elements are loaded
</li>
<li>
path=““: use with scalable vector graphics (SVG) to scale without
affecting resolution
</li>
</ul>
</li>
<li>
Tips
<ul>
<li>
Use margin-top with negative numbers in CSS to pull images closer
to headings
</li>
</ul>
</li>
</ul>
<pre
class="prettyprint"
><code><img src="https://address.jpg" alt="accessibility text">
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
alt="freecodecamp logo"
class="hero-img"
loading="lazy"
width="400">
<a href="https://link.com"><img src="https://address.jpg"></a> // img with link</code></pre>
<h4 id="anchor">Anchor</h4>
<p>Anchor is used for links</p>
<ul>
<li>
Attributes:
<ul>
<li>href=”url-link”</li>
<li>
href=”#id”: An id can be used in place of a url to link to another
element on a page
</li>
<li>target=”blank”: Use to open link in a new tab/page</li>
<li>
rel:“noreferrer”: Use to omit referrer information from the HTTP
request
</li>
</ul>
</li>
</ul>
<pre
class="prettyprint"
><code><a href="https://link.com">link text</a>
<a href=#student-info>INFO</a> <!-- link within a page by id -->
<p class="author-name"><a href="https://freecodecamp.org" target="_blank">By freeCodeCamp</a></p></code></pre>
<h4 id="icon">Icon</h4>
<p>
In the exercises icons are used, these can be sourced from fontawesome
</p>
<ul>
<li>
Get a <code><link></code> reference to include in the html head
from
<a href="https://fontawesome.com/">fontawesome</a>
</li>
<li>
Then search for icons at
<a href="https://fontawesome.com/">fontawesome</a> and
</li>
<li>Insert the provided <code><i></i></code> html code</li>
</ul>
<pre
class="prettyprint"
><code><!-- a few examples from the course exercises -->
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>