Teach Yourself VISUALLY HTML and CSS: The Fast and Easy Way to Learn (Teach Yourself VISUALLY (Tech))

✍ Scribed by Guy Hart-Davis

• Publisher: Wiley
• Year: 2023
• Tongue: English
• Leaves: 322
• Edition: 2
• Category: Library

✦ Synopsis

Level-up your HTML and CSS web development skills with this dynamic, visual guide

Teach Yourself VISUALLY HTML and CSS is the perfect resource for those of you who prefer to learn visually and would rather be shown how to do something – with crystal-clear screenshots and easy explanations – than suffer through long-winded explanations. You’ll find step-by-step walkthroughs showing you how to tackle over 120 individual tasks involving HTML and CSS. Each task-based spread covers a single technique, ensuring you learn first the basics and then more advanced topics one straightforward piece at a time.

You'll learn to write HTML code in a text editor or an integrated development environment, add and format text, prepare images for the web, insert links to other pages, control layout with style sheets, add JavaScript to a web page, and more. You’ll also discover how to:

• Create websites that look great in 2023 and beyond with classic HTML and skills and the most modern tips and tricks for contemporary web coding
• Optimize your websites for performance and speed, ensuring every visitor gets the best possible experience
• Add modern elements to your code, including , , , and , and make your code accessible to as many people as possible

Teach Yourself VISUALLY HTML and CSS is your personal roadmap to understanding how to get the most out of HTML and CSS to create, format, and troubleshoot websites of all kinds. This book will get you to the next level of web development, quickly and easily.

✦ Table of Contents

Cover
Title Page
Copyright Page
About the Author
How to Use This Book
Table of Contents
Chapter 1 Getting Ready to Create Websites
Grasp How the Web Works
Understanding HTML, CSS, and Responsive Web Design
Understanding Static and Dynamic Web Pages
What Is a Responsive Website?
Understanding Tools for Creating Web Pages
Prepare to Create Your Website
Install Visual Studio Code
Install Visual Studio Code
Meet and Configure Visual Studio Code
Meet and Configure Visual Studio Code (continued)
Install GIMP
Install the Major Browsers
Create a Folder Structure for Your Website
Chapter 2 Creating Your First Web Pages
Study the Anatomy of a Web Page
Tell Visual Studio Code Which Folder to Use
Create a Folder for Your Website
Create Your First Web Page
Create Your First Web Page
Open the Web Page in a Browser
Open the Web Page in a Browser
Add Headings and Text
Add Headings and Text
Nest One Element Within Another Element
Add Comments
Add Comments
Apply Direct Formatting
Apply Direct Formatting
View a Page’s Source Code
Validate a Web Page
Validate a Web Page
Create Another Web Page
Create Another Web Page
Understanding the Essentials of Hyperlinks
Create a Hyperlink Between Your Web Pages
Create a Hyperlink Between Your Web Pages
Interpret HTTP Status Codes
Chapter 3 Structuring a Web Page
Meet the Elements for Structuring Web Pages
Grasp Semantic and Nonsemantic Elements
Select Items with span and div Elements
Select Items with span and div Elements
Select Text with the span Element
Select Text with the div Element
Create header Elements and footer Elements
Create header Elements and footer Elements
Add article Elements to a Page
Add article Elements to a Page
Create Pull Quotes with the aside Element
Create Pull Quotes with the aside Element
Divide a Page Using section Elements
Divide a Page Using section Elements
Create Collapsible Sections
Create Collapsible Sections
Chapter 4 Including Images
Grasp the Essentials of Web Image Formats
Launch GIMP and Perform Essential Moves
Launch GIMP and Perform Essential Moves
Launch GIMP and Open an Image File
Launch GIMP and Perform Essential Moves (continued)
Launch GIMP and Perform Essential Moves (continued)
Zoom In or Out on the Image File
Save Changes to an Image File and Close It
Rotate or Straighten an Image
Rotate or Straighten an Image
Crop an Image
Crop an Image
Resize an Image
Resize an Image
Reduce the Number of Colors in an Image
Reduce the Number of Colors in an Image
Convert an Image to the Format You Need
Convert an Image to the Format You Need
Learn the HTML for Images
Insert an Image
Insert an Image
Create a Figure with a Caption
Create a Figure with a Caption
Chapter 5 Working with Links
Grasp the Essentials of Links
Create a Link to a Web Page
Create a Link to a Web Page
Create a Link to Elsewhere on the Same Web Page
Create a Link to Elsewhere on the Same Web Page
Specify the ScreenTip for a Link
Specify the ScreenTip for a Link
Redirect the Browser to a Different Page
Redirect the Browser to a Different Page
Create a Link for Downloading a File
Create a Link for Downloading a File
Create a Link That Starts an Email Message
Create a Link That Starts an Email Message
Create a Link from an Image
Create a Link from an Image
Create Multiple Links from an Image
Create Multiple Links from an Image
Create Multiple Links from an Image (continued)
Create Multiple Links from an Image (continued)
Include an Audio File in a Web Page
Link an Audio File
Include a Video File in a Web Page
Include a Video File in a Web Page
Embed a YouTube Video in a Web Page
Embed a YouTube Video in a Web Page
Chapter 6 Creating Lists and Tables
Grasp the Different Types of Lists
Create a Numbered List
Create a Numbered List
Create a Bulleted List
Create a Bulleted List
Create a Definition List
Create a Definition List
Nest One List Inside Another List
Nest One List Inside Another List
Learn the HTML for Tables
Create a Table
Create a Table
Add Rows or Columns to a Table
Add Rows or Columns to a Table
Specify Table Width and Column Width
Specify Table Width and Column Width
Format Table Borders
Format Table Borders
Adjust Table Padding and Spacing
Adjust Table Padding and Spacing
Create Groups of Columns
Create Groups of Columns
Align Tables, Rows, and Cells
Align Tables, Rows, and Cells
Create Cells That Span Rows or Columns
Set a Background Color or Image for a Table
Nest One Table Inside Another Table
Nest One Table Inside Another Table
Chapter 7 Getting Started with CSS
Grasp How CSS Works
Format Elements with Inline CSS
Format Elements with Inline CSS
Format a Page Using Internal CSS
Format a Page Using Internal CSS
Create an External CSS File
Create an External CSS File
Link an External CSS File to a Web Page
Link an External CSS File to a Web Page
Distinguish Element, Class, and ID Selectors
Apply Styles Using Element Selectors
Apply Styles Using Element Selectors
Apply Styles Using Class Selectors
Apply Styles Using Class Selectors
Create a Class of Items in the HTML File
Create the Class Selector in the CSS File
Apply Styles Using ID Selectors
Apply Styles Using ID Selectors
Assign an ID to an Element in the HTML File
Create the ID Selector in the CSS File
Chapter 8 Formatting Text with CSS
Understanding Fonts and How to Use Them
Specify the Font Family
Specify the Font Family
Set the Font Size and Font Weight
Set the Font Size and Font Weight
Adjust Line Height and Letter Spacing
Adjust Line Height and Letter Spacing
Create Superscripts and Subscripts
Create Superscripts and Subscripts
Add Superscripts and Subscripts to an HTML File
Configure the Superscript Style and Subscript Style
Understanding Ways to Set Color in CSS
Set Font Color
Set Font Color
Apply Text Shadows
Apply Text Shadows
Display Monospaced Font
Display Monospaced Font
Apply Text Decoration
Apply Text Decoration
Understanding HTML Entities
Insert Special Characters with HTML Entities
Insert Special Characters with HTML Entities
Insert Emojis
Insert Emojis
Using Custom Fonts on Web Pages
Chapter 9 Sizing and Positioning with CSS
Understanding Pseudo-Classes
Apply Contextual Formatting with Pseudo-Classes
Apply Contextual Formatting with Pseudo‐Classes
Understanding CSS Combinators
Target Elements Using CSS Combinators
Target Elements Using CSS Combinators
Open the CSS File and HTML File
Target an Element with a Child Selector
Target an Element with an Adjacent Sibling Selector
Target an Element with a General Sibling Selector
Understanding Pseudo-Elements
Apply CSS to Pseudo-Elements
Apply CSS to Pseudo‐Elements
Add the ::first‐letter Pseudo‐Element
Add the ::first‐line Pseudo‐Element
Override CSS by Using the !important Declaration
Override CSS by Using the !important Declaration
Understanding the CSS Box Model
Understanding Ways of Sizing Elements
Specify the Size for an Element
Specify the Size for an Element
Specify Padding and Borders for an Element
Specify Padding and Borders for an Element
Set Margins to Control Element Spacing
Set Margins to Control Element Spacing
Understanding CSS Positioning Essentials
Create Block Quotes
Create Block Quotes
Fix an Element in Place in the Viewport
Fix an Element in Place in the Viewport
Float an Element Beside Another Element
Float an Element Beside Another Element
Understanding the display Property
Control the Display of an Element
Control the Display of an Element
Create a Flexbox Layout
Chapter 10 Creating Responsive and Appealing Pages
Understanding the Tools for Creating Responsive Pages
Apply Relative Sizing
Add Media Queries to a Page
Set Tap Targets for Touch Screens
Set the Viewport Size
Check Your Pages on Various Devices and Screens
Understanding How CSS Gradients Work
Apply a Linear Gradient to an Element
Apply a Linear Gradient to an Element
Apply a Radial Gradient to an Element
Apply a Radial Gradient to an Element
Using Sprites
Understanding CSS Animations
Apply Transitions to HTML Elements
Create a Keyframe Animation
Create a Keyframe Animation
Chapter 11 Creating Forms
Grasp Web Form Essentials
Create a Form
Create a Form
Add Text Input Controls to a Form
Add Text Input Controls to the Form
Add Radio Buttons to a Form
Add Radio Buttons to a Form
Add Check Boxes to a Form
Add Check Boxes to a Form
Add a Drop-Down List of Options to a Form
Add a Drop‐Down List of Options to a Form
Add Command Buttons to a Form
Add Command Buttons to a Form
Chapter 12 Taking Your Website to the Next Level
Understanding How Search Engines Work
Optimize Your Website for Search Engines
Guide Search Spiders with a robots.txt File
Understanding Accessibility Issues for Websites
Meet Chrome’s Live Development Tools
Troubleshoot CSS with Chrome DevTools
Troubleshoot CSS with Chrome DevTools (continued)
Troubleshoot CSS with Chrome DevTools (continued)
Using a Staging Server
Understanding Front-End Frameworks
Index
EULA