Chapter 1. Getting Ready to Create Websites
Grasp How the Web Works.......................................... 4
Understanding HTML, CSS, and Responsive
Web Design.............................................................. 6
Understanding Static and Dynamic Web Pages.............. 8
What Is a Responsive Website?................................... 9
Understanding Tools for Creating Web Pages............... 10
Prepare to Create Your Website................................. 12
Install Visual Studio Code......................................... 14
Meet and Configure Visual Studio Code....................... 16
Install GIMP............................................................ 20
Install the Major Browsers........................................ 22
Create a Folder Structure for Your Website.................. 24
Chapter 2. Creating Your First Web Pages
Study the Anatomy of a Web Page............................. 28
Tell Visual Studio Code Which Folder to Use................ 30
Create Your First Web Page....................................... 32
Open the Web Page in a Browser............................... 34
Add Headings and Text............................................ 36
Nest One Element Within Another Element.................. 38
Add Comments....................................................... 39
Apply Direct Formatting........................................... 40
View a Page’s Source Code........................................ 41
Validate a Web Page................................................ 42
Create Another Web Page......................................... 44
Understanding the Essentials of Hyperlinks................. 45
Create a Hyperlink Between Your Web Pages............... 46
Interpret HTTP Status Codes..................................... 48
Chapter 3. Structuring a Web Page
Meet the Elements for Structuring Web Pages.............. 52
Select Items with span and div Elements.................... 54
Create header Elements and footer Elements.............. 56
Add article Elements to a Page.................................. 58
Create Pull Quotes with the aside Element.................. 60
Divide a Page Using section Elements......................... 62
Create Collapsible Sections....................................... 64
Chapter 4. Including Images
Grasp the Essentials of Web Image Formats................. 68
Launch GIMP and Perform Essential Moves.................. 70
Rotate or Straighten an Image.................................. 74
Crop an Image........................................................ 76
Resize an Image..................................................... 78
Reduce the Number of Colors in an Image.................. 80
Convert an Image to the Format You Need.................. 82
Learn the HTML for Images....................................... 84
Insert an Image...................................................... 86
Create a Figure with a Caption.................................. 88
Chapter 5. Working with Links
Grasp the Essentials of Links.................................... 92
Create a Link to a Web Page..................................... 94
Create a Link to Elsewhere on the Same Web Page....... 96
Specify the ScreenTip for a Link................................ 98
Redirect the Browser to a Different Page.................... 99
Create a Link for Downloading a File.........................100
Create a Link That Starts an Email Message................101
Create a Link from an Image....................................102
Create Multiple Links from an Image.........................104
Include an Audio File in a Web Page.........................108
Include a Video File in a Web Page...........................110
Embed a YouTube Video in a Web Page......................112
Chapter 6. Creating Lists and Tables
Grasp the Different Types of Lists.............................116
Create a Numbered List...........................................118
Create a Bulleted List.............................................120
Create a Definition List...........................................122
Nest One List Inside Another List.............................124
Learn the HTML for Tables.......................................126
Create a Table.......................................................128
Add Rows or Columns to a Table...............................130
Specify Table Width and Column Width......................132
Format Table Borders..............................................134
Adjust Table Padding and Spacing............................136
Create Groups of Columns........................................138
Align Tables, Rows, and Cells...................................140
Create Cells That Span Rows or Columns....................142
Set a Background Color or Image for a Table..............143
Nest One Table Inside Another Table.........................144
Chapter 7. Getting Started with CSS
Grasp How CSS Works..............................................148
Format Elements with Inline CSS..............................150
Format a Page Using Internal CSS.............................152
Create an External CSS File......................................154
Link an External CSS File to a Web Page....................156
Distinguish Element, Class, and ID Selectors..............158
Apply Styles Using Element Selectors........................159
Apply Styles Using Class Selectors............................160
Apply Styles Using ID Selectors................................162
Chapter 8. Formatting Text with CSS
Understanding Fonts and How to Use Them...............166
Specify the Font Family..........................................168
Set the Font Size and Font Weight............................170
Adjust Line Height and Letter Spacing......................172
Create Superscripts and Subscripts............................174
Understanding Ways to Set Color in CSS....................176
Set Font Color.......................................................177
Apply Text Shadows...............................................178
Display Monospaced Font........................................179
Apply Text Decoration............................................180
Understanding HTML Entities...................................182
Insert Special Characters with HTML Entities..............184
Insert Emojis........................................................185
Using Custom Fonts on Web Pages............................186
Chapter 9. Sizing and Positioning with CSS
Understanding Pseudo-Classes.................................190
Apply Contextual Formatting with Pseudo-Classes.......192
Understanding CSS Combinators...............................194
Target Elements Using CSS Combinators....................196
Understanding Pseudo-Elements..............................198
Apply CSS to Pseudo-Elements.................................200
Override CSS by Using the !important
Declaration............................................................202
Understanding the CSS Box Model............................204
Understanding Ways of Sizing Elements....................206
Specify the Size for an Element................................208
Specify Padding and Borders for an Element..............210
Set Margins to Control Element Spacing....................212
Understanding CSS Positioning Essentials..................214
Create Block Quotes...............................................216
Fix an Element in Place in the Viewport....................218
Float an Element Beside Another Element..................220
Understanding the display Property...........................222
Control the Display of an Element............................223
Create a Flexbox Layout..........................................224
Chapter 10. Creating Responsive and Appealing Pages
Understanding the Tools for Creating
Responsive Pages...................................................228
Apply Relative Sizing..............................................230
Add Media Queries to a Page...................................232
Set Tap Targets for Touch Screens............................234
Set the Viewport Size.............................................236
Check Your Pages on Various Devices and Screens.......238
Understanding How CSS Gradients Work....................240
Apply a Linear Gradient to an Element......................242
Apply a Radial Gradient to an Element......................244
Using Sprites........................................................246
Understanding CSS Animations................................248
Apply Transitions to HTML Elements.........................250
Create a Keyframe Animation...................................252
Chapter 11. Creating Forms
Grasp Web Form Essentials......................................256
Create a Form........................................................258
Add Text Input Controls to a Form............................260
Add Radio Buttons to a Form...................................262
Add Check Boxes to a Form.....................................264
Add a Drop-Down List of Options to a Form...............266
Add Command Buttons to a Form.............................268
Chapter 12. Taking Your Website to the Next Level
Understanding How Search Engines Work..................272
Optimize Your Website for Search Engines.................274
Guide Search Spiders with a robots.txt File................276
Understanding Accessibility Issues for Websites.........278
Meet Chrome’s Live Development Tools......................280
Troubleshoot CSS with Chrome DevTools....................282
Using a Staging Server............................................288
Understanding Front-End Frameworks.......................290
Index.................................................................. 292

 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.