HTML, CSS, & Javascript all-in-one for dummies

Book 1: getting started : Getting acquainted with HTML, CSS, and JavaScript ; Getting ready to code ; Finding and setting up a web host ; Testing and validating your code

Book 2: learning HTML basics : Building good bones: structuring the page ; Adding links, lists, and other text tidbits ; Working with images, video, and other media ; Building tables with your bare hands ; Using forms to make a page interactive ; Making you web pages accessible

Book 3: learning CSS basics : Figuring out the CSS box model ; Getting to know the CSS selectors ; Pseudo school: learning pseudo-classes and pseudo-elements ; Making CSS make sense ; Taking the measure of CSS ; Fancifying pages with colors and backgrounds ; Taking your text up a notch with web typography

Book 4: building dynamic pages with JavaScript : JavaScript: the bird's-eye view ; Understanding variables ; Building expressions ; Controlling the flow of JavaScript ; Harnessing the power of functions ; Playing with the document object model ; Working with arrays ; Manipulating strings, dates, and numbers ; Storing user data in the browser ; Debugging your code ; Processing form data

Book 5: looking good with layouts : Exploring some layout basics ; Getting fancy with flexbox ; Laying out a page with CSS grid ; Creating responsive layouts.

Intro

Title Page

Copyright Page

Table of Contents

Introduction

About This Book

Getting started with the book

My "No AI" guarantee

Foolish Assumptions

Icons Used in This Book

Beyond the Book

Book 1 Getting Started

Chapter 1 Getting Acquainted with HTML, CSS, and JavaScript

What Do HTML, CSS, and JavaScript Do, Exactly?

Why Learn HTML, CSS, and JavaScript?

Seeing How It All Works

To get started, launch a new text file

Notes about saving HTML files

This book in four words: Edit. Save. Reload. Repeat.

Adding Structure with HTML

What is HTML?

Getting the hang of HTML elements and tags

Understanding tag attributes

A barebones HTML page

Giving your page a title

Adding some text

Some notes on structure versus style

Adding Style with CSS

Figuring out cascading style sheets

Styles: Bundles of formatting options

Sheets: Collections of styles

Cascading: How styles propagate

Getting the hang of CSS rules and declarations

Adding styles to a page

Inserting inline styles

Embedding an internal style sheet

Linking to an external style sheet

Adding Dynamism with JavaScript

What is JavaScript?

Adding a script to a page

The lt

scriptgt

tag

Where do you put the lt

scriptgt

tag?

Example #1: Displaying a message to the user

Example #2: Writing text to the page

Chapter 2 Getting Ready to Code

Setting Up Your Test Browsers

Creating Your Local Folders

First, create the local root folder

Now create the local subfolders, if any

Choosing Your Text Editor

What Else Do You Need?

Using the WebDev Workbench

Chapter 3 Finding and Setting Up a Web Host

Understanding Web Hosting Providers

Using your existing internet provider

Finding a free hosting provider

Signing up with a commercial hosting provider.

A Buyer's Guide to Web Hosting

Finding a Web Host

Finding Your Way around Your New Web Home

Your directory and your web address

Making your hard disk mirror your web home

Uploading your site files

Making changes to your web files

Chapter 4 Testing and Validating Your Code

Cross-Browser Testing Your Code

Taking a look at browser market share

Your cross-browser testing suite

Cross-browser testing online

Understanding Validation

Don't Skip Validation!

Validating Your HTML Code

Validating HTML online

Validating HTML in your text editor

Validating Your CSS Code

Validating CSS online

Validating CSS in your text editor

Validating Your JavaScript Code

Validating JavaScript online

Validating JavaScript in your text editor

Book 2 Learning HTML Basics

Chapter 1 Building Good Bones: Structuring the Page

Getting to Know HTML's Basic Structure Tags

Creating paragraphs

Dividing your text with headings

Adding line breaks

Separating stuff with a horizontal rule

Carving Up the Page

The <

header>

tag

The <

nav>

tag

The <

main>

tag

The <

article>

tag

The <

section>

tag

The <

aside>

tag

The <

footer>

tag

Handling nonsemantic content with <

div>

Handling words and characters with <

span>

Commenting Your Code

Chapter 2 Adding Links, Lists, and Other Text Tidbits

Applying the Basic Text Tags

Emphasizing text

Marking important text

Nesting tags

Adding quotations

Creating Links

Linking basics

Anchors aweigh: Internal links

Building Bulleted and Numbered Lists

Making your point with bulleted lists

Numbered lists: Easy as one, two, three

Inserting Special Characters

A Few More HTML Text Tags to Know

<

abbr>.

: The abbreviation text tag

<

address>

: The address text tag

<

cite>

: The citation text tag

<

code>

: The code text tag

<

dfn>

: The definition text tag

<

dl>

: The description list text tag

<

kbd>

: The keyboard input text tag

<

mark>

: The mark text tag

<

pre>

: The preformatted text tag

<

s>

: The strikethrough text tag

<

sub>

: The subscript text tag

<

sup>

: The superscript text tag

Chapter 3 Working with Images, Video, and other Media

Inserting Images

First, a mercifully brief look at image formats

Inserting an image

Inserting a figure with a caption

Turning an image into a link

Controlling an image's vertical alignment

Embedding Videos

Embedding a third-party video

Embedding your own videos

Some notes about web media file formats

The bad news: Web video formats

The good news: The <

video>

tag

Embedding Audio Snippets

Embedding third-party audio

Embedding your own audio

Web audio formats

The <

audio>

tag

Chapter 4 Building Tables with Your Bare Hands

What Is a Table?

Web Woodworking: How to Build a Table

The simplest case: a one-row table

Adding more rows

Adding More Table Elements

Creating a header row

Including a caption

Creating a header column

Creating a table footer

Table Refinishing: Styling Your Tables

Aligning text within cells

Aligning cell text horizontally

Aligning cell text vertically

Bring on the borders

Putting your data in a padded cell

Changing the location of the caption

Chapter 5 Using Forms to Make a Page Interactive

What Is a Web Form?

Cruising along Server Street

Taking a walk down Local Lane

Building a Web Form

Setting up the form.

Adding a form button

Working with text fields

Adding checkboxes

Working with radio buttons

Adding selection lists

Bringing in pickers

Chapter 6 Making Your Web Pages Accessible

Why to Make Your Pages Accessible

Accessibility is a right

Accessibility brings other benefits

Understanding Web Accessibility

Understanding who needs accessibility

Learning about assistive technologies for web surfing

Assistive technologies for visual disabilities

Assistive technologies for auditory disabilities

Assistive technologies for motor disabilities

Assistive technologies for cognitive disabilities

Making Your Page Structure Accessible

Using headings hierarchically

Using semantic sectioning elements

Making Text Accessible

Making Media Accessible

Specifying alt text for images

Making other media accessible

Buffing Up Your Page Accessibility Semantics

Adding form field labels

Understanding ARIA roles, states, and properties

Landmark ARIA roles

Section structure ARIA roles

Widget ARIA roles

Differentiating semantic page elements of the same type

Making Your Pages Keyboard-Friendly

Adding an element to the tab order

Removing an element from the tab order

Ensuring Sufficient Color Contrast

Validating the Accessibility of a Page

Book 3 Learning CSS Basics

Chapter 1 Figuring Out the CSS Box Model

Thinking Outside (but Also Inside) the Box Model

Understanding the components of the box model

Understanding block and inline boxes

Changing the display type for a box

Eyeballing an element's box

A Brief Digression on Whitespace

Adding Padding

Putting a Border on It

Applying a border

Rounding your borders

Rounding borders based on the arc of a circle

Rounding borders based on the arc of an ellipse

Manipulating Element Margins.

Taking advantage of negative margins

Collapsing margins ahead!

Dealing with negative margins

Other margin collapsing scenarios

Styling Element Sizes

Setting a minimum or maximum height or width

Making width and height make sense

Magically converting an inline element to a block-level element

Chapter 2 Getting to Know the CSS Selectors

Introducing Yourself to the Web Page Family

What's All This About a Selector?

Seeing some examples of selectors

Working with selector lists

Learning the Standard Selectors

The type selector

The class selector (.)

Combining type and class selectors

Matching multiple classes

The id selector (#)

The universal selector (*)

Selecting Descendants, Children, and Siblings

The descendant combinator ( )

The child combinator (gt

)

The subsequent-sibling combinator (~)

The next-sibling combinator (+)

Selecting Elements by Attribute

Chapter 3 Pseudo School: Learning Pseudo-Classes and Pseudo-Elements

Scratching Your Head Over Pseudo-Classes

Introducing the pseudo-class

Styling elements with pseudo-classes

Matching child elements

:first-child

:last-child

:nth-child()

:nth-last-child()

:only-child

Matching child elements by type

:first-of-type

:last-of-type

:nth-of-type()

:nth-last-of-type()

:only-of-type

Matching form elements by state

Matching elements by user action

:active

:focus

:hover

Matching links

Working with functional pseudo-classes

A quick look at selector lists

:is()

:not()

:where()

:has()

Getting Up to Speed with Pseudo-Elements

Working with pseudo-elements

Generating a last child with ::after

Generating a first child with ::before

Styling the opening letter with ::first-letter

Styling the opening line with ::first-line.