Symbols

<a> element

reference link 32

<a> tag

reference link 32, 34

<address> element

about 45

reference link 46

<article> element

about 37, 38

reference link 39

<aside> element

about 39

reference link 39

<audio> tag

working

<b> element

about 46, 47

reference link 46

<details> element 44, 45

<em> element 47

<figcaption> element

about 43

reference link 43

<figure> element

about 43

reference link 43

<footer> element

about 39

reference link 40

<header> element

about 39

reference link 39

<i> element 48

<main> element

about 35

reference link 35

<nav> element

about 37

reference link 37

<p> element 42

<section> element

about 36, 37

reference link 37

<span> element 46

<strong> element

about 47

reference link 47

<summary> element 44, 45

<video> tag

working

@font-face CSS rule

about 190, 191

used, for implementing web fonts 191, 192

@supports

used, for code forking in CSS 186

A

Accessible Rich Internet Applications (ARIA)

about 53

reference link 52

align-items property 97

align-self property 97, 98, 99

alternate media sources

providing

Android Studio

installation link 68

animatable properties

reference link 279

animation-fill-mode property 309

about 308

reference link 309

associated datalist element 319, 320

audio

adding, in HTML

autocomplete attribute 318

auto-fill keywords 145, 146, 147

auto-fit keywords 145, 146, 147

autofocus attribute 317

B

background fill effect

creating 341, 342

background gradient patterns 215, 216

background gradients

about 208

linear-gradient notation 208

radial background gradients 211

background gradients, sizing keywords

about 213

closest-corner 213

closest-side 213

contain 213

cover 213

farthest-corner 213

farthest-side 213

beginning with substring matching attribute selector 160, 162

blockquote element 42

blur value

avoiding 204

Bohemian Codings Sketch

reference link 247

Bootstrap

URL 364

box shadows

about 205

spread value 206, 207, 208

used, for creating inset shadow 205

breakpoint 18

browser

image, selecting over another 120

usage 2, 3

browsers

designs, obtaining 360

browser schisms 263, 264

BrowserSync

URL 361

C

caniuse

URL 178

caret-color property

input caret, styling with 315

Character Data marker (CDATA) 267

character encoding 29

child combinator 174, 175

coarse pointer device 75

code samples

reference link 6

color type input 331

combinator selectors

about 174

child combinator 174

next sibling 174, 175

subsequent sibling 175

conditional logic

in CSS 60

conformance level

reference link 51

contains an instance of substring matching attribute selector 162

contrast checker

reference link 315

CSS

animating 305, 306, 307, 308

code forking, by combining conditionals 188

code forking, with feature queries 186, 187

code forking, with @supports 186

conditional logic 60

HTML5 forms, styling with 337, 338

SVG, animating 268, 269

text shadows, using with 202

CSS 2D transforms

about 285, 287

module 286

CSS3 background

reference link 220

CSS 3D transformation 296, 297, 298, 299

CSS3 fonts

reference link 191

CSS3 media queries module

reference link 59

CSS alpha transparency

about

using

CSS Animations Level 1

reference link 307

CSS attribute selectors

about 159, 160

chaining 163, 164

CSS background patterns

URL 215

CSS breakpoints

linking, to JavaScript 356, 357, 359, 360

CSS calc() function

about 179, 181

reference link 179

CSS capabilities 156

CSS clip-path

about 230

animating 236, 237

with url 230

CSS color formats

about

HSL color

RGB color

CSS conditional rules

reference link 186

CSS custom properties

about 181, 183, 184

env() environment variables 185, 186

fallback value, setting 185

CSS Device Adaptation Module

reference link 59

CSS filters

about 221, 222, 223, 224, 225, 226, 228

combining 228

CSS Flexbox layout

need for 83

CSS Fonts 4

reference link 199

CSS frameworks

avoiding, in production 364

CSS Grid

about 122

concepts and terminology 123

setting up 123, 124, 125, 126, 127, 128

syntax 122

CSS Grid Layout Module Level 2

reference link 145

CSS image module level 3

reference link 208

CSS Level 3 selectors

about 158

using 158

CSS Media Queries Level 4

reference link 74

CSSMOJO

reference link 362

CSS performance

reference link 229

warning 229, 230

CSS rule

anatomy 157

CSS Scrollbars Module Level 1

reference link 350

CSS Scroll Snap

about 351

reference link 351

scroll-padding property 353, 355

scroll-snap-align property 352

scroll-snap-type property 351, 352

using, for smooth scrolling 355

CSS selectors

about 156

reference link 157

CSS shapes

about 231

clip-path* circle() 231

clip-path* ellipsis() 232

clip-path* insert() 232

clip-path* polygon() 234, 235

clip-path* url() 236

reference link 231

CSS Spatial Navigation Level 1

reference link 74

CSS specifications

reference link 150

CSS structural pseudo-classes

about 165

empty (*empty) selector 176, 178

last-child selector 165

negation (*not) selector 175, 176

nth-based selection, using in responsive web designs 171, 172, 173

nth-child selectors 167

reference link 176

CSS substring matching attribute selectors 160

CSS Transforms Module Level 1

reference link 295

CSS transitions

about 278, 279, 280

multiple properties 282, 283

properties 281

shorthand property 281, 282

using 278, 279, 280

CSS units 156

CSS variables

reference link 181

D

datalist

reference link 321

data URIs 252, 254

date and time 332

date input type 332, 333

defs tags 246

dense keyword 137

desc tags 246

device landscape

usage 2, 3

devices

designs, testing on 360

div element 42

doctype 29

DRAW SVG

URL 247

dual-tone icons

creating 257, 258

E

elements, HTML5

reference link 160

empty (*empty) selector 176, 178

ends with substring matching attribute selector 162, 163

environment variable

reference links 185

explicit grid section

about 128, 129

reference link 123

Extensible Markup Language (XML) 243

external style sheet, in SVG

reference link 266

F

Figma

URL 247

filter effects module level 1

reference link 221

fine pointer device 75

fixed pixel design

converting, to fluid proportional layout 78, 79, 80, 82, 83

flex

wrapping with 114, 115, 116

Flexbox

about 84

autoprefixing solution, selecting 86

bumpy path to 85

characteristics 86

code, writing 85

column reverse 92

direction, modifying 92

offset items 88, 90

order, reversing of item 91

perfect vertically centered text 87, 88

source order, modifying 107, 109, 110, 112, 113, 114

wrapping up 117

Flexbox, alignment properties

about 95, 96

align-items property 97

alignment values 99

align-self property 97, 98, 99

flex property 101, 103, 105

justify-content property 99, 100

Flexbox layouts

with media queries 93

flex fraction (fr) 135

flex property 101, 103, 105

floats, for layouts

using, issues 84

fluid proportional layout

fixed pixel design, converting to 78, 79, 80, 82, 83

font-display

about 193, 194, 195

used, for optimizing font loading 193

font-display descriptor

reference link 195

form-related features, in HTML5

reference link 336

Foundation

URL 364

fr unit 135

G

gap property 135

g element 246

gradient generators

reference link 213

graphical objects

recoloring, from external sources 260

reusing, from symbols 255, 256

graphical user interface (GUI) 247

GreenSock

SVG, animating example 271, 272

GreenSock Animation Platform

URL 271

grid

items, placing 136

Grid

used, for creating horizontal scrolling panels 350

grid-auto-columns 129, 130, 131

grid-auto-flow 131

grid-auto-rows 129, 130, 131

grid-gap 135

grid items

placing 132, 134, 135

sizing 132, 134, 135

grid shorthand 150

grid shorthand value

option one 150

option three 152

option two 151

Grid techniques

applying 144, 145

grid-template-areas 142, 143, 144

grid-template shorthand 149

grouping elements 35

H

h1-h6 elements 41

horizontal scrolling panels

creating 347, 348, 349, 350

creating, with Grid 350

hover media feature 76

HSL color

reference link

using

HTML

video and audio, adding

HTML5

media, embedding 53

HTML5 Boilerplate

reference link 31

HTML5 elements

<address> element 45

<article> element 37, 38

<aside> element 39

<details> element 44, 45

<figcaption> element 43

<figure> element 43

<footer> element 39

<header> element 39

<main> element 35

<nav> element 37

<p> element 42

<section> element 36, 37

<summary> element 44, 45

about 34

blockquote element 42

div element 42

h1-h6 elements 41

HTML5 outline algorithm 40, 41

reference link 34

HTML5 forms

about 312, 313

component parts 313, 314

styling, with CSS 337, 338

HTML5 iframes

working

HTML5 input types

about 321

email 321, 322

number 323, 324

HTML5 markup 31

HTML5 outline algorithm 40

about 41

reference link 41

HTML5 video

working

HTML elements

using 50, 51

HTML file 8, 10, 11

HTML file, code example

download link 8

HTML markup

approach 31, 32

HTML page

about 28

character encoding 29

doctype 29

HTML tag 29

lang attribute 29

HTML text-level semantics

<b> element 46, 47

<em> element 47

<i> element 48

<span> element 46

<strong> element 47

about 46

reference link 46

I

IcoMoon

URL 255

iconizr

URL 254, 274

image

width/max-width property 16, 17

image formats

facilitating

image sprites

generating 254

img tag

using 250

implicit grid section

about 128, 129

Inkscape

URL 247

Inkscape gallery

reference link 247

inline-block

using, issues 83, 84

inline/combined media queries, in Sass

reference link 74

inline-flex

about 93, 95

inline SVGs

overview 257

input caret

styling, with caret-color property 315

input fields

indicating 339, 340, 341

inset shadow

about 205

creating, with box shadows 205

Inter

URL 191

interaction media queries

hover media feature 76

interaction media queries feature

about 74

hover media feature 76

pointer media feature 75

Intrinsic Ratios, creating

reference link

J

JavaScript

CSS breakpoints, linking 356, 357, 359

SVG, animating 269

JavaScript libraries

reference link 336

justify-content property 99, 100

K

key selector

reference link 72

L

language, list

reference link 29

larger screen

example 19, 20, 21, 22, 23

last-child selector 165

linear-gradient notation

about 208

color stops 209, 210, 211

direction, specifying 209

linting tools 365, 367

list attribute 319, 320

long URLs

breaking up 344, 346

M

mask-image

about

example

reference link

Matrix Construction Set

reference link 294

matrix transform 293, 294

media

embedding, in HTML5 53

media queries

about 17, 63

advanced consideration 68

combining 63, 71, 72, 74

in CSS file 62

inline nesting 71

in link tags 62

list 63

logic, inverting 62

need for, responsive web design 59

on @import at-rule 62

organizing 69, 70

separating 70

syntax 60, 61

testing 64, 65

using, to alter design 65, 66, 67

Media Queries Level 4

about 74

Media Queries Level 4, features

reference link 65

meta viewport tag 57, 58

Method Draw

reference link 248

minmax() function 147, 148

mix-blend-mode

about

month input type 333, 334

multiple background images

dealing with 216, 217

multiple background images, high resolution

dealing with 220, 221

multiple background images, position

dealing with 217, 219

multiple background images, shorthand method

dealing with 220

multiple background images, size

dealing with 217

multiple box shadows

applying 206

multiple text shadows

adding 204

N

named grid lines 138, 140, 141

namespace 246

negation (*not) selector 175, 176

NonVisual Desktop Access (NVDA)

reference link 53

nth-child selectors 167, 168, 169, 170, 171

number ranges

creating, with min and max range 324

O

object tag

using 250

obsolete and non-conforming features

reference link 48

obsolete HTML features 48

P

pattern input attribute 329, 331

performance tools

for responsive web designs 368, 369

picture element

used, for art direction 120

placeholder attribute

about 314

styling 314, 315

pointer media feature 75

prefers-color-scheme media feature

about 76

reference link

progressive enhancement

browser, selecting 363

browser support matrix, defining 362

browser support matrix, functional parity 362

embracing 361

user experience, tiering 363

pseudo classes 157, 158

pseudo elements 157, 158

R

radial background gradients

about 211

splitting 212

range input 335, 336

readable web document 243, 245

regex pattern

reference link 329

regular expressions

reference link 329

render blocking

reference link 70

repeat function 135

repeating gradients

about 214

reference link 214

required attribute 315, 316, 317

resource-prioritization

reference link 193

responsive images

about 117

inherent problem 117, 118

srcset, used for switching resolutions 118, 119

responsive web design

browser support 4, 5

defining 3

example 6

HTML file 8, 10, 11

in nutshell 3

media queries 17

media queries, need for 59

reference link 3

software development tools 6

taming image 13, 14, 16

text editors 5

responsive web designs

nth-based selection, using 171, 172, 173

performance 367

performance tools 368, 369

RGB color

using

root SVG element 245

rotate transform 291, 292

S

Scalable Vector Graphics (SVG)

animating, example with GreenSock 271, 272

animating, with CSS 268, 269

animating, with JavaScript 269

creating, with popular image editing packages 247

creating, with popular image editing services 247

history 241, 243

implemention tips

inserting, as background image 251, 252

inserting, into web pages 250

media queries

optimizing 273

properties, within CSS 267

recoloring, with CSS custom properties 258, 259, 260

reference link 241

styling, with external style sheet 266, 267

styling, with internal styles 267

using, as filters 274

values, with CSS 267

scale 287, 288

scroll-padding property 353, 355

scroll-snap-align property 352

scroll-snap-type property 351, 352

search input type 328

sectioning elements 35

shorthand syntax 63

about 149

shorthand syntax, methods

grid shorthand 150

grid-template shorthand 149

Sim Daltonism

reference link 53

skew 292, 293

SMIL animation

about 264, 265, 266

reference link 264

SMIL animations

reference link 266

Snap.svg

reference link 271

span 137

srcset

used, for switching resolutions 118, 119

srcset and sizes

advanced switching with 119, 120

standards ratification process

reference link 74

statcounter

URL 178

step increments

modifying 325

sticky footer 105, 106

subsequent sibling 175

SVG capabilities 264

SVG coordinate system

reference link 245

svg-edit

reference link 247

SVG icon services 249

SVG inline

inserting 254

SVG insertion method 261, 263

SVG oddities 264

SVGOMG tool

reference link 273

SVGO tool

reference link 273

SVG paths 247

SVG shapes 247

SVG-specific properties

reference link 267

system fonts 189

T

table and table-cell

using, issues 84

taming image 13, 14, 16

tel input type 327

text

truncating 346, 347

text-level semantics 35

text-level semantic tags

reference link 48

text-overflow property

reference link 347

text shadows

using, with CSS 202

time input type 334

timing functions 283, 284

title tags 246

transform-origin property 294, 295, 296

transform-style property

reference link 298

translate 288

using, to center absolutely positioned elements 289, 290, 291

translate3d property 299, 300

enhancement example 301, 303, 304, 305

U

uniform resource identifier (URI) 252

url input type 325, 326

V

validators 365, 367

URL 365

variable fonts

about 195

custom axis 199

features 199

font-face changes 197

registered axis 198, 199

using 197, 198

Velocity.js

reference link 271

video

adding, in HTML

viewport-percentage lengths

about 178, 179

reference link 178

viewports

content, hiding across 364

content, loading across 364

content, showing across 364

W

W3C specifications

reference link 29

W3C validator

reference link 32

WAI-ARIA accessible web applications 51

WCAG 2.1

reference link 52

WCAG accessibility conformance 51

WCAG reference list

reference link 52

Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) 52

Web Content Accessibility Guidelines (WCAG) 51

WEBPAGETEST

URL 368

web typography

about 188

@font-face CSS rule 189, 191

font loading, optimizing with font-display 193

system fonts 189

variable fonts 195

web fonts, implementing with @font-face CSS rule 191, 192

white-space

using, issues 83, 84

white-space* nowrap property/value

reference link 347