Index
Numbers
3D transformations, 235
404 errors, 272
Symbols
/* and */, commenting CSS code, 128
+ (plus sign), adjacent sibling element selector, 138
* (asterisk), attribute values, 141
* (universal/wildcard selector), 144
< (less than sign, or left angle bracket), using with HTML tags, 18
> (greater than sign, or right angle bracket), using with HTML tags, 18
child element selector, 137
{} (curly braces), using with CSS style declaration blocks, 122
$ (dollar sign), attribute selector, 141
= (equals sign), attribute values, 141
/ (forward slash), using with tags, 18
# (hash symbol), using with links, 52
./ parent folder, using in relative links, 40
% (percentage), font-size, 154, 177
~ (tilde), general sibling selector, 138
A
<a> tag, 43
<abbr> tag, 31
absolute vs. relative linking, 39–41, 268
action attribute, forms, 91
:active state, 142
<address> tag, 83
adjacent sibling selector (+), 138
Adobe Fonts, 148
alert elements, creating, 133
alignment and justification, 158–159
anchor tag, 43
<and>, using in <code> element, 32
Angular JavaScript technology, 316
animations, CSS (Cascading Style Sheets), 236–239
Apache web server, 14
APIs (application programming interfaces), 116
Arabic, RTL (right-to-left) script, 33
ARIA (Accessible Rich Internet Applications), 305–307
aria-describedby attribute, 306
Article page section, 50
<article> tag, 52, 83. See also blog article layout
Aside page section, 50
asterisk (*), attribute values, 141
asterisk (*), universal/wildcard selector, 144
at-rules, CSS, 150
attributes
action, 91
aria-describedby, 306
border, 77
itemscope, 84
looking up, 111
max, 102
method, 90
min, 102
placeholder, 93
role (ARIA), 305
searching values, 141
step, 104
style, 125
targeting elements with, 140–141
title, 61
using, 19
value, 93
author value, name attribute, 23
autocompletion, 11
B
<b> tag, 30
background colors, 143, 167, 170, 217–219. See also colors
background images, 172. See also images
background transition, adding, 231–232
background-image property, 172
<bdi> and <bdo> elements, 33
blank value, target attribute, 43
block and inline elements, outlining, 49
<blockquote> element, 29
blog article layout, building, 54–56. See also <article> tag
boilerplate file, creating, 23. See also files
bold
font-weight, 156
text, 30
border attribute/property, 77, 172–173
<br> tag, 31
browsers
comparison, 8
CSS (Cascading Style Sheets) support, 212–214
Flexbox, 197
Grid, 197
support, 110
testing sites in, 272
using, 13
bulleted lists, 28
buttons, styling, 180
byline class, styling, 157–158
byte conversion chart, 291
C
caching files, 295
calculations with variables, 248–249
CanIUse.com, 111–112, 116, 212
Canva graphics, 68. See also graphics
<canvas> element, 113
capitalization of text, changing, 160
cascade in CSS
explained, 121
and family relationships, 134
specificity and precedence, 139–140
CDN (content delivery network), 295
centering elements, 183
child
family tree, 134
indenting, 82
relative link, 40
selecting, 137
Chrome
DevTools, 281–284, 290, 308–309
circle
converting square to, 237
element, 67
cite attribute, <blockquote> element, 29
classes. See also pseudo-selectors and -classes
attribute, 53
vs. IDs, 140
naming, 133
targeting elements by, 131–134
clear property, floats, 187
code
indenting, 82
marking up, 32
tag, 32
CodeKit build tool, 323
CodePen
using for tests, 15
using with tables, 78
color contrast, 166
color picker, Google Chrome, 103
color stops, 169
color wheel, 168
Colorblindly testing tool, 308, 311
colors. See also background colors
representing on computer monitors, 164
RGB and RGBA, 167
setting for styles, 165
color-scheme value, name attribute, 23
columns and rows
floats, 186
comma-separated list, 133
compiling, 11
computer monitors, representing colors, 164
conic-gradient(), 169
content generators, 53
critical CSS, loading first, 296–300
CSS (Cascading Style Sheets). See also style sheets; styles
commenting code, 128
display property, 177
file sizes, 245
inline styles, 125
turning off in Chrome, 304
CSS Zen Garden website, 4–5, 123
CSS3, 5
curly braces ({}), using with CSS style declaration blocks, 122
D
<dd> tag, 81
declaration block, CSS, 122–123
default files, 14
<del> tag, 31
descendent, targeting, 136
description value, name attribute, 23
desktop vs. mobile layout, 222
directories, structure, 12
display property, CSS, 177
div, skewing on hover, 235
<div> tag, 53
<dl> tag, 81
dollar sign ($), attribute selector, 141
domain name in URL, 37
domains, choosing and hosting, 13, 264–268
<dt> tag, 81
E
elements. See tags
email and domains, 267
email links, specifying, 43
embedding content, 43, 58, 70–71
entities, 32
equals sign (=), attribute values, 141
error checking, 11
events list, creating, 82
@extend, alerts in Sass, 260
extensions in URL, 37
external style sheets, 124, 127
external vs. internal linking, 38
F
fallbacks and polyfills, 111
fields in forms, 90, 96–97, 102, 104
<fieldset> element, 104
<figure> tag, 62
file containers, 68
file extensions, 12
file format, forms, 95
“file not found” errors, 272
file system, reviewing, 128
file types, 68
files. See also boilerplate file
caching, 295
default, 14
FileZilla FTP program, 269–271
Firefox browser, 276
:focus state, 142
fold, explained, 298
folders
creating, 12
relative links, 40
font sizes, Sass CSS preprocessor, 259
Font Squirrel, 151
<footer> tag, 56
formatting text, 30–31, 158–160
forms
building and processing, 89
checkboxes, 100
components, 90
email, 101
hidden fields, 96
input types, 94
interacting with, 88
labeling fields, 97
processing, 91
process.php file, 91
radio buttons, 99
<select> element, 96
setting up, 97
<textarea> field, 96
forward slash (/), using with tags, 18
framename link target, 43
G
GB (gigabyte), 291
general sibling selector (~), 138
GIF (Graphics Interchange Format) images, 59
Git, version control, 320
GitFlow, 319
Github repo, process.php file, 91
Google Chrome DevTools, 281–284 308–309
Google’s PageSpeed Insights, 288–289, 296
grandparent, relative link, 40
graphics, pixel vs. vector, 59. See also Canva graphics
great-grandchild, family tree, 134
H
<h1> tag, 19
H.264 video codec, 69
hash (#) symbol, using with links, 52
<head> tags, 22
<header> tag, opening, 54
headings, 2–3, 19, 26–27, 147, 155
hex values, representing colors, 164–165
hidden fields, forms, 96
hidden format, forms, 95
hiding
elements, 226
text, 160
hosting
techniques, 295
:hover state, 142
href attribute, 43
HSL (hue, saturation, lightness), 164, 168
HTML (HyperText Markup Language)
without CSS, 5
without elements, 27
overview, 2
shapes, 67
HTML elements. See tags
<html> and </html> tags, 22
HTTP vs. HTTPS, 37
I
<i> tag, 30
id attribute, 41–42, 53, 140. See also role vs. id
<iframe> link target, 43
image format, forms, 95
image gallery, creating, 235
images. See also background images; responsive images
finding and making, 68
resizing, 63
!important value, CSS, 139
inline and block elements, outlining, 49
inline styles, CSS, 125
input types, forms, 94
<input> tag, forms, 90
<ins> tag, 31
Internet of Things, 277
iPhone, emulation with Xcode for macOS, 280
italic, font-style, 156
itemscope attribute, 84
J
JPG/JPEG (Joint Photographic Experts Group) images, 59
jQuery library, 315
K
KB (kilobyte), 291
@keyframes, animations, 236
L
left angle bracket (<), 18
<legend> element, 104
less than sign (<), 18
letter-spacing property, 159
<li> tag, 28
line breaks, inserting, 160
line element, 67
line height, figuring out, 159
lines, text-decorating properties, 157
line-through, text-decoration, 156
:link state, 142
<link> tag, 127
links
# (hash) symbol, 52
absolute vs. relative, 268
creating, 36
displaying as block-level elements, 177
internal vs. external, 38
locations on pages, 42
markup, 43
URIs (Uniform Resource Identifiers), 43
localStorage, 115
M
mailto: links, specifying, 43
main article section, creating, 54
Main page section, 50
MAMP (Mac, Apache, MySQL, PHP), setting up, 14
markup, 2, 5, 274–276. See also semantic markup
matrix(), transform, 233
max attribute, forms, 102
max-width and max-height properties, 178
MB (megabyte), 291
media queries, 64, 196, 216–217, 246–247
<meta> tag, 23
<meter> element, 105
method attribute, forms, 90
Microsoft Word document, 3
min attribute, forms, 102
min-width and min-height properties, 178
mobile vs. desktop layout, 222
monitors, representing colors, 164
month input type, 103
-moz- browser prefix, 214
MP3 format, 71
-ms- browser prefix, 214
multimedia files, storing, 72–73
multiselect boxes, creating, 98–99
MySQL web server, 14
N
name in URL, 37
naming
classes, 133
directories, 12
nav menu, making responsive, 225
New York Times home page, 46, 48, 176
Node.js library, 317
O
-o- browser prefix, 214
order-based selectors, 143
ordered lists, 28
outlining
block and inline elements, 49
elements with Wed Developer extension, 48
overflow property, 179
overflow-wrap property, 160
overlay, creating using z-index, 192–193
overline, text-decoration, 156
P
<p> tag, 18
page header, creating, 54
pages. See webpages
PageSpeed Insights, Google, 288–289, 296
paragraph text, 18
paragraphs
enlarging, 132
internal spacing, 160
quoting with citations, 29
parameter value, adjusting, 104
password field, aria-describedby attribute, 306
password format, forms, 94
paths, determining for files, 13, 67
percentage (%), font-size, 154, 177
perspective(), transform, 233
PHP web server, 14
p.intro class, 143
pixel density, 63
pixel vs. vector graphics, 59
pixels (px), font-size, 154
pixels, computer monitors, 164
placeholder attribute, forms, 93
plus sign (+), adjacent sibling element selector, 138
PNG (Portable Network Graphic) images, 59
polyfills and fallbacks, 111–112
polygon element, 67
polyline element, 67
position property, 187
<pre> tag, 32
prefixing tools, using, 213
print style sheet, creating, 225
printer styles, adding to websites, 225–226
process.php file, downloading, 91
property, CSS, 122. See also shorthand properties
protocol in URL, 37
pseudo-selectors and -classes, 141–142. See also classes; selectors
public_html folder, 14
R
radio buttons, creating, 99
radio format, forms, 94
range input type, 104
React.js technology, 316
readability, formatting for, 158–160
rect element, 67
regex (regular expressions), 107
relationships, selecting elements by, 136–138
relative vs. absolute linking, 39–41, 268
rem (root em), font-size, 155, 177
render-blocking resources, 296–297
required attribute, forms, 106–107
resizing images, 63
responsive images, 63–64, 70, 217–224. See also background images; images
RGB (red, green, blue), 164, 167
right angle bracket (>), 18
robots value, name attribute, 23
role vs. id, 54. See also id attribute
root em (rem), font-size, 155
root folder, 14
rows and columns
Flexbox, 201
RTL (right-to-left) script languages, 33
S
<s> tag, 30
Sass CSS preprocessor, 253–262
saturation, 168
scale(x,y), transform, 233
Schema.org vocabulary, 84–85
screen reader, 24
<script> tag, JavaScript, 314
SCSS, 253
search form, 93
<section> tag, 52
<select> element, forms, 96, 98–99
selectors, 122, 143. See also pseudo-selectors and -classes
_self link target, 43
semantic markup, 2, 24. See also markup
SEO (search engine optimization), 84, 266
server-side script, validating forms, 106
sessionStorage, 115
shapes, elements for, 67
shorthand properties, 181. See also property
siblings, selecting, 138
sidebar
creating, 56
site footer, creating, 56
SiteGround, 264–265, 268–269, 287
sites. See websites
skew(x,y), transform, 233, 235
<small> tag, 31
space.jpg image, 60
spam, defending against, 96
square, converting to circle, 237
src property, font-family, 151
stacking order, 196
Statcounter tool, 278
step attribute, 104
<strike> tag, 30
<strong> tag, 30
style attribute, 125
style sheets, 5, 124–127, 300. See also CSS (Cascading Style Sheets); print style sheet
styles. See also CSS (Cascading Style Sheets)
heading and body elements, 147
and markup, 5
setting colors for, 165
setting on elements, 131
simplifying with variables, 246–247
<sub> tag, 31
subdomain in URL, 37
subfolders, 13
submit format, forms, 95
<sup> tag, 31
SVG (Scalable Vector Graphic) images, 59, 65–67, 293
switch animation, states, 236
syntax
errors, 274
highlighting, 11
T
tags
<a>, 43
<abbr>, 31
<address>, 83
<b>, 30
<blockquote>, 29
<body>, 22
<br>, 31
<canvas>, 113
centering with margin: auto, 183
changing, 19
creating, 18
<code>, 32
<dd>, 81
<del>, 31
<div>, 53
<dl>, 81
<dt>, 81
<em>, 30
<fieldset>, 104
<figure>, 62
<footer>, 56
<h1>, 19
<head>, 22
<header>, 54
<html> and </html>, 22
<i>, 30
<input>, 90
<ins>, 31
<legend>, 104
<li>, 28
<link>, 127
looking up, 111
<mark>, 31
<meta>, 23
<meter>, 105
<p>, 18
<pre>, 32
vs. rulesets, 4
<s>, 30
<script> in JavaScript, 314
<section>, 52
<select>, 96
selecting by relationships, 136–138
and semantics, 2
setting styles, 131
<small>, 31
<strike>, 30
<strong>, 30
<sub>, 31
<sup>, 31
<time>, 31
<title>, 22
<u>, 30
<ul>, 28
viewing in browser, 19
Tallwind CS framework, 323
targeting
elements, 122, 130–134, 140–141
media features, 227
targets, 43
tel: links, specifying, 43
templates, Grid, 210
testing
CodePen, 15
critical CSS, 300
webpages, 107
text
hiding, 160
spacing, 159
styles, 161
transparency, 167
text formatting
forms, 94
<textarea> field, forms, 96
text-decoration property, 156–157, 173
TextEdit, 10
text-shadow property, 160
text-transform property, 160
tilde (~), general sibling selector, 138
time input type, 103
<time> tag, 31
title attribute, 61
<title> element, 22
TLD (top-level domain) in URL, 37, 266
TLS (Transport Layer Security), 266
_top link target, 43
transform property, animations, 238
transformations, CSS (Cascading Style Sheets), 233–235
transitions, CSS (Cascading Style Sheets), 230–232
translate(), transform, 233, 238
TTF (True Type Font), 152
Twitter, offline storage, 115
two-column layout, at breakpoint, 223
typefaces. See fonts
U
<u> tag, 30
<ul> tag, 28
underline, text-decoration, 156
universal/wildcard selector (*), 144
unordered lists, 28
V
validating
value, CSS, 122
value attribute, forms, 93
variables
in Sass, 259
vector vs. pixel graphics, 59
vertical-align property, 159
videos. See also multimedia files
alert elements, 133
align-items property, 207
Android devices, 280
ARIA states and properties, 306
attributes, 19
background images, 172
blog article layout, 56
boilerplate file, 23
borders, 173
bouncing ball, 239
box model, 46
breakpoints, 217
browser comparison, 8
browsers, 110
Canva graphics, 68
<canvas> element, 113
cascade in CSS, 121
checkboxes and radio buttons, 100
child and sibling selectors, 138
Chrome accessibility test, 309
Chrome responsive testing, 284
VS Code, 11
CodePen demo, 15
colspan and rowspan, 80
converting and embedding audio, 71
converting fonts with Transfonter, 152
converting Word docs to HTML, 31
CSS Zen Garden, 5
dates on forms, 103
default files, 14
description lists, 82
directory structure, 12
errors in external links, 38
figures for code samples, 62
file system, 128
FileZilla FTP program, 271
flex-basis property, 205
flex-flow property, 205
flex-item properties, 202
flow of pages, 176
font sizes, 155
forms, 88
GET and POST form submission, 91
GitHub, 320
gradients, 171
GTmetrix performance testing tool, 289
headers with navigation, 52
heading and body styles, 147
heading hierarchy with font sizes, 155
headings, 27
heights and widths in layout, 178
HSL values, 168
HTML with no elements, 27
HTTP vs. HTTPS, 37
image download test, 63
Image Gallery with Mouseover Effects, 235
images, 61
input fields, 232
internal CSS to external file, 127
internal style sheets, 124
justify-content property, 205
Libsyn for hosting audio, 72–73
link markup, 43
links to page locations, 42
lists, 28
mailto links, 43
MAMP (Mac, Apache, MySQL, PHP), 14
media queries, 228
nesting items, 258
offline storage, 115
opening links, 43
ordered lists, 28
outlining block and inline elements, 49
overriding IDs in CSS, 140
paragraphs, 27
p.intro class and selectors, 143
position property, 187
prefixing tools, 213
pricing table, 193
rainbow animation, 237
range input type, 104
registering domains, 267
relative links, 41
rental application, 102
resizing images, 63
responsive nav menu, 225
responsive three-column layout, 223
Sass CSS preprocessor, 257
schemas, 85
screen reader, 24
select and multiselect boxes, 98
setting styles on elements, 131
srcset attribute, 64
stacking order, 196
styles and markup, 5
styles and precedence, 139
styles vs. no styles, 5
SVG (Scalable Vector Graphic) images, 60, 67
tables, 78
tags, 19
targeting classes, 132
text transparency, 167
text-indent to hide text, 160
transformations, 233
transition functions, 230
two-column layout with floats, 186
typographic parameters, 161
unordered lists, 28
URLs (Uniform Resource Locators), 37
validating forms, 107
visual hierarchy, 4
W3C markup validator, 276
WAVE testing tool, 310
Web Developer extension, 48
Xcode Simulator, 280
viewport value, name attribute, 23
:visited state, 142
VS Code, 11
Vue.js technology, 317
W
w3.org website, direction of text, 33
WAI-ARIA (Web Accessibility Initiative—Accessible Rich Internet Applications), 305–307
WCAG (Web Content Accessibility Guidelines), 307, 311–312
Web Developer extension, 46–48
web forms. See forms
Web Hosting for Students, 264–265
web server, mimicking, 14
-webkit- browser prefix, 214
WebM vs. Ogg, 69
WebP image format, 293
webpages
basic areas, 50
creating, 10
embedding content, 43
structuring, 22
testing, 107
URL (Uniform Resource Locator), 13
websites
pre-launch check, 268
reaching, 38
week input type, 103
white-space property, 160
wildcard/universal selector (*), 144
Word document
converting to HTML, 31
example, 3
word-break property, 160
word-spacing property, 159
wrapper
converting to grid layout, 224
X
Xcode for macOS, iPhone emulation, 280
Y
Yoast SEO (search engine optimization), 84
yourbrowser.is tool, 279
YYYY-MM-DD type, forms, 102