Teach Yourself VISUALLY HTML and CSS: (Teach Yourself VISUALLY (Tech))

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:
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