Web Development with HTML5 and CSS
Edition: 5
Copyright: 2024
Pages: 754
Edition: 5
Copyright: 2024
Pages: 754
Choose Your Format
Choose Your Platform | Help Me Choose
$142.00
Ebook
$79.00
Web Development with HTML5 and CSS assumes no previous coding experience and walks readers through the workflow of coding responsive and accessible web sites using current coding standards and best practices. The book is separated into three units, each culminating in a unit project. A preface and addendum are also included to get readers up and running with a development environment and explore JavaScript. The book is both Mac and Windows friendly.
Introduction Setting Up Your Computer
Recommended Prerequisite Computer Skills
Recommended Computer Settings and Software
Enable File Extensions
Windows 11
Windows 10
Windows 8
Windows 7
macOS
Browsers
Install Google Chrome
Configure Google Chrome
Install Mozilla Firefox
Configure Mozilla Firefox
Install and Configure Visual Studio Code
Install Visual Studio Code
VS Code Settings
Indents
Word Wrap
HTML Formatting
Use HTML Formatter
Extensions
Prettier – Code Formatter
Install Prettier – Code Formatter
Configure Prettier
Use Prettier – Code Formatter
Why Two Formatters?
Changing the Default Formatter
Spell Checker
Install Code Spell Checker
Use Code Spell Checker
Live Server
Install Live Server
Configure Live Server
Edit Code and Preview Changes
Use Live Server
Display the Go Live Icon
Themes
Keyboard Shortcuts
Summary
Unit 1 HTML Basics
Chapter 1 How Web Sites Work
Introduction
Web Site Files
Root Folder
File Organization
File Naming
Naming a Home Page
Recommendations
Programming Case
kebab-case
snake_case
camelCase
PascalCase
Mix and Match
Web Servers
Web Hosts
Features
Domain Names
TLD Upsells
Privacy
Nameservers
Step by Step
Languages of the Web
Client-Sided Languages
HTML
CSS
JavaScript
Separation of Concerns
Progressive Enhancement
Server-Sided Languages
Developer-Friendly Code
A Solid Foundation
Chapter 2 Basic Page Structure
Code Editors
WYSIWYG Editors
Planning a Web Site
Create a Wish List
Site Plan
Collect Existing Materials
Design and Code
Organizing a Web Site
HTML Elements
Tags
Container Tags
Content
Void Tags
HTML Structure
DOCTYPE Declaration
<html> Element
<head> Element
<body> Element
Blank Lines
Attributes and Values
Other HTML Requirements
Character Set Encoding
Document Title
A Complete <head>
Indents
Element Relationships
How To Determine Element Relationships
Previewing Your Page
Suggested Workflow
Editing Code
Structuring a Document
Headings
Tiny Headings
Heading Hierarchy
Proper Closing
Block and Inline Elements
White Space
Paragraphs
Line Breaks
Line Break Formatting Guidelines
Improper Use
Nesting Elements
HTML Comments
Comment Syntax
Comment Dangers
Validating Code
Validation Resources
Errors and Warnings
Validate, Validate, and Validate
Refactoring Code
Current Code Formatting Practices
Chapter 3 Phrase Elements and Special Characters
Element Categories
Phrase Elements
Text Semantics
Four Common Phrase Elements
Abbreviation Citation
Quotation
Small
Time
Limitation
Var
Word Break
Computer Code
Annotations and Edit Demarcations
Phrase Element Usage
Special Characters
HTML Character Codes
Hyphens
Ampersands
HTML Number Codes
Combining Diacritics
UTF-8
Non-breaking Spaces
What It Does
Proper Usage
Chapter 4 Images
Computer Graphics
Image File Formats
Source Files
Web-friendly File Formats
WebP
When to Use Each
Acquiring and Generating Images
Copyright
Royalty-free
Public Domain
Creative Commons
Organizing Images
Documenting Sources
Adding Images
Essential vs Non-Essential Images
<img> Element
Source
Alternate Text
Width and Height
The <picture> Element
<source>, srcset, and type
Adding SVG
Deprecated Code
Figures
Figure Captions
Misuse of Figures
Favicons
Adding Favicons to a Site
Acquiring Favicons
Chapter 5 Hyperlinks and Lists
Hyperlinks
Hyperlinking from Text
The Anchor Element
href Attribute
Local Links
Web Pages
Internal Locations
Internal Location on Other Pages
title Attribute
Image Links
Other Local Resources
The download Attribute
Protocols
Email Links
Communication Links
External Links
target Attribute
Hot Linking
Lists
Unordered Lists
List Style Type
Coding Unordered Lists
Ordered Lists
List Item Type
start Attribute
Code Bloat
Reversed Numbers
Description Lists
List Components Summary
Nesting Lists
Nested Styles
Chapter 6 Audio and Video
Audio and Video
Plugins
Online Video Providers
Native Technology
Browser Support
Adding HTML Video
Codecs
Container Formats
The <video> Element
The src and controls Attributes
Fallback Content
The <source> Element
Common Attributes
The type Attribute
width and height Attributes
Adding HTML Audio
Browser Support
The <audio> Element
Supporting Old Browsers
Playlists
Acquiring Media
Unit 1 Project
Henderson Avian Watcher’s Collective (HAWC)
Research Domains and Hosting
Get Organized
Every Page
The Home Page
The Gallery Page
The Resources Page
Coding Practices
Tips
Unit 2 Structuring and Organizing Content
Chapter 7 Structuring Content
Web Page Anatomy
Content Order
Semantic Structure
Complete Content Blocks
Content Blocks in HTML
Creating Sections and Groups
Coding Headings
Header
Navigation Bar
Main Content
Headers Revisited
Sidebar
Footer
Subsections
Article
Section
Address
Blockquote
Horizontal Rules
Non-semantic Wrappers
<div> for Blocks
<span> for Phrases
Sectioning and Outlining Resources
Advanced Sectioning
Use Only as Needed
Code Formatting
Interactive Elements
Reverse Engineering a Design
Visualizing Boxes
Prioritizing Headings
Chapter 8 Tables
Data Tables versus Layout Tables
Basic Table Structure
Table, Rows, and Cells
Temporary Borders
Header Cells
Additional Structure
Caption
Merging Cells
Merging Cells across Columns
Merging Cells across Rows
Row Organization
Grouping Headings
Identifying Main Table Content
Grouping Footers
Table Accessibility
Header Scope
Identifying Headers Manually
Define a Header
Associate a Cell with a Header
Fixing Old Sites
Deprecated Attributes
Layout Tables
Chapter 9 Forms
Web Forms
Form Workflow
Planning a Form
Coding a Form
Testing a Form
Adding a Form
Action
Method
Form Fields
Text Fields
Labels
Submitting a Form
Code Readability
Other Single Line <input> Uses
Guided Choices
Datalist
Multi-Line Text
Hidden Fields
Buttons
<button> Element
Image Submit
Uncommon <input> Types
Color
Month and Week
Time
Datetime-local
Search
Range
Usability and Accessibility
Fieldset
Legend
Nested Fieldsets
Autofocus
Placeholder
Validating Data
Client-side and Server-side Validation
Setting the Type
Requiring Fields
Notifying Users of Required Fields
Requiring Select Fields
Chapter 10 Accessibility and Legacy Support
Accessibility
Categories of Disabilities
Accessibility Laws and Standards
Americans with Disabilities Act
Rehabilitation Act
Web Content Accessibility Guidelines (WCAG)
Principles of Accessibility
Accessibility Guidelines
Perceivable Guidelines
Perceivable Guideline 1: Text Alternatives
Perceivable Guideline 2: Time-based Media
Perceivable Guideline 3: Adaptable
Perceivable Guideline 4: Distinguishable
Operable Guidelines
Operable Guideline 1: Keyboard Accessible
Operable Guideline 2: Enough Time
Operable Guideline 3: Seizures
Operable Guideline 4: Navigable
Bypass Link Bug
Understandable Guidelines
Understandable Guideline 1: Readable
Understandable Guideline 2: Predictable
Understandable Guideline 3: Input Assistance
Robust Guidelines
Robust Guideline 1: Compatible
Testing for Accessibility
Tool Limitations
Success Criteria
Working toward Accessibility
Support for Legacy Browsers
Progressive Enhancement
Graceful Degradation
Coding Resources
Caniuse
Polyfills
Testing Legacy Support
Hypervisors
Web Services
Accessibility and Usability
Unit 2 Project
Southridge Park
Required Components/Concepts
Get Started
The Home Page Main Content
The Facilities Page Main Content
The Rentals Page Main Content
Every Page
Tips
Unit 3 Cascading Stylesheets
11 Introduction to CSS and Styling Text
Cascading Style Sheets
Style
Cascade and Inheritance
CSS Anatomy
Rule
Selector
Declaration
Declaration Block
Adding CSS
Inline Styles
Inline CSS Pros and Cons
Embedded Styles
Embedded Styles Pros and Cons
External Styles
Linking External Stylesheets
External Styles Pros and Cons
Styling Text
Font Properties
Typeface
Font
font-family
font-size
Sandboxing
font-weight
font-style
font-variant
font Shorthand
Other Font Properties
Text Properties
text-align
text-indent
text-transform
text-decoration
text-shadow
Other Typographical Properties
line-height
letter-spacing
word-spacing
Other Text Properties
Text Color
Web Fonts
Using Web Fonts Site-Wide
Local Font Kits
Validating CSS
Chapter 12 CSS Color and The Box Model
Color
Color Properties
Named Colors
rgb()
rgba()
Hexadecimal
Hex Characters
Hex-6
Hex-3
Hex-8 and Hex-4
Other Methods
VS Code Color Tips
CSS Comments
Single or Multiple Line
Color Accessibility
Analyzing Color Contrast with the Browser
Analyze Color Anywhere on a Page
Color Blindness
The Box Model
Border
Border Width
Border Style
Border Color
Border Shorthand
Removing Borders
border-radius
Border Radius on Images
Padding
Margin
Centering Elements with Auto Margins
Width
Height
Overflow
Minimum and Maximum Dimensions
Backgrounds
Color
Image
Background Shorthand
Multiple Backgrounds
Styling Standards
Other Background Properties
opacity
Shadows
Inset Shadows
Chapter 13 Advanced Selectors and Specificity
Advanced Selectors
Targeting Multiple Elements with class
class Syntax
CSS Hooks and <span>
Targeting a Unique Element with id
id Rules
class or id?
class and id Names
Grouping Selectors
Universal Selector
Descendant Selectors
The display Property
Child Selector
Adjacent Sibling Selector
General Sibling Selector
Attribute Selector
Pseudo-classes
Targeting the First or Last Child
Targeting the First or Last Occurrence
Targeting Any Child or Occurrence
Choosing Child Pseudo Selectors
Pseudo-elements
Others
Organizing Rules
Specificity
Same Selector, Conflicting Declarations
Different Selector Targeting the Same Element
Calculating Specificity
Solving Specificity Conflicts
Determining the Cause
Fixing Specificity Conflicts
Chapter 14 Styling Lists, Tables, and Forms
Styling Lists
White Space
Ordered List Markers
Unordered List Markers
Image Markers
Positioning Markers
List Shorthand
Styling Tables
Borders
Cell Spacing
width and height
White Space Wrapping
Text Alignment
Captions
Color Striping
Styling Forms
Aligning Labels and Fields
Targeting Form Elements
Form Pseudo-Classes
The :not() Pseudo-Class
Styling Form Elements
::after and ::before
Chapter 15 Positioning, Floating, and Flexbox
Layout
Positioning
Relative
Stacking Order
Absolute
Combining Absolute and Fixed
Other Positioning Options
Styling Bypass Links
Floating
Clearing
Overflow Fix
Other Float Fixes
Columns
Flexbox
More Flex
Grid
Chapter 16 Responsive Design
Layout Strategies
Fixed Width Layout
Fluid Width Layout
Responsive Layout
Responsive Design
Adaptive Design
Breakpoints
Mobile- or Desktop-First?
Finding Breakpoints
Screens, Windows, and Viewports
Flexible versus Responsive Images
Flexible Images
Flexible Video
HTML
CSS
Dynamic Text
Fluid Text
Media Queries
Media Query Logic
Breakpoints and Media Queries
Default Mobile Browser Behavior
Controlling the Mobile Viewport
Responsive Navigation
Pure CSS Responsive Navigation
Step 1
Step 2
Step 3
Step 4
Step 5
Fluid Text Revisited
Setting Fluid Text Thresholds
Step 1 – Determine and Code the Upper Bounds
Step 2 – Determine and Code the Lower Bounds
Step 3 – Code the Fluid Text
Fluid Text Cheat Sheets
Desktop-first Fluid Text
Mobile-first Fluid Text
Summary
Unit 3 Project
Brand Salon
Required Components/Concepts
Assets
Get Started
Tips
Addendum JavaScript
Adding JavaScript
Summary