Teach Yourself VISUALLY HTML and CSS, 2nd Edition

Book description

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

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

Product information

  • Title: Teach Yourself VISUALLY HTML and CSS, 2nd Edition
  • Author(s): Guy Hart-Davis
  • Release date: September 2023
  • Publisher(s): Wiley
  • ISBN: 9781394160686