Web Design Playground

Web Design Playground

by Paul McFedries
Released May 2019
Publisher(s): Manning Publications
ISBN: 9781617294402

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Web Design Playground takes you step by step from writing your first line of HTML to creating interesting and attractive web pages. In this project-based book, you’ll use a custom online workspace, the book’s companion Playground, to design websites, product pages, photo galleries, and more.



About the Technology

How do top designers learn to create beautiful web pages and intuitive user experiences? Great examples, expert mentoring, and lots of practice! Written by web designer and master teacher Paul McFedries, this unique book shapes and sharpens your skills in HTML, CSS, and web page design.



About the Book

Web Design Playground takes you step by step from writing your first line of HTML to creating interesting, attractive web pages. In this project-based book, you’ll use a custom online workspace to design websites, product pages, photo galleries, and more. Don’t worry about setting up your own servers and domain names—the book comes with a free “playground” which lets you experiment without any of that! You can concentrate on core skills like adding images and video and laying out the page, plus learning typography, responsive design, and the other tools of the web trade.



What's Inside

  • Getting started with HTML, CSS, and web design
  • A free, fully interactive web design workspace
  • Working with images, color, and fonts
  • Full-color illustrations throughout


About the Reader

If you can use a browser, you’re ready to create web pages!



About the Author

Paul McFedries has written nearly 100 books, which have sold over four million copies world-wide.

We interviewed Paul as a part of our Six Questions series. Check it out here.



Quotes
A wonderful guided tour of modern web design, replete with real-world examples that are relevant.
- Conor Redmond, Incomm Product Control

An outstanding resource, not only for learning HTML and CSS, but also for setting you on the path to becoming a true web designer.
- Shawn Eion Smith, Penn State University

My frustration with CSS is now gone after I found some answers in this book that I couldn’t find anywhere else.
- Jose San Leandro, Osoco

A great resource. Covers all the aspects of a web page from design to development to publishing.
- Prabhuti Prakash, Atos India

A rare book at the juncture of web design and development. It keeps in mind the interests of novice designers and developers.
- Sachin Kumar, Capgemini America

Table of contents

  1. Web Design Playground
    1. HTML + CSS the Interactive Way
  2. Contents
    1. Guide
    2. Pages
  3. Preface
  4. Acknowledgments
  5. About This Book
    1. Road Map
    2. Code
  6. About the Author
  7. Part 1. Getting Started with HTML and CSS
  8. Chapter 1 Getting to Know HTML and CSS
    1. What Is HTML?
      1. What Can You Do with HTML?
      2. From Plain Text to HTML: An Example
    2. What Is CSS?
      1. A Note about the Separation of Structure and Presentation
      2. What Can You Do with CSS?
      3. From Structure to Presentation: A CSS Example
    3. What Can’t You Do with HTML and CSS?
    4. How HTML and CSS Create the Web
    5. Introducing the Web Design Playground
      1. Playing with HTML and CSS
      2. Loading the Lesson Files
      3. Preserving Your Work
    6. Lesson 1.1: Introducing HTML Tags
    7. Adding HTML Tag Attributes
    8. Lesson 1.2: Introducing CSS Properties
    9. Some Helpful Features of the Playground
    10. Summary
  9. Chapter 2 Building Your First Web Page
    1. Getting Your Web Page off the Ground
    2. Lesson 2.1: Laying Down the Basic Page Structure
    3. Lesson 2.2: Adding a Title
    4. Lesson 2.3: Adding Some Text
    5. Learning the Most Common Text Elements
    6. Lesson 2.4: Marking Important Text
    7. Lesson 2.5: Formatting Keywords
    8. Lesson 2.6: Emphasizing Text
    9. Lesson 2.7: Formatting Alternative Text
    10. Lesson 2.8: Quoting Text
    11. Lesson 2.9: Working with Headings
    12. Lesson 2.10: Crafting Links
    13. Summary
  10. Chapter 3 Adding Structure to Your Page
    1. HTML Elements for Structuring Page Text
    2. Lesson 3.1: Working with Paragraphs
    3. Lesson 3.2: Inserting Line Breaks
    4. Lesson 3.3: Dividing Web Page Text
    5. Lesson 3.4: Creating Inline Containers
    6. Lesson 3.5: Adding a Visual Break between Blocks
    7. Organizing Text Into Lists
    8. Lesson 3.6: Adding a Numbered List
    9. Lesson 3.7: Adding a Bulleted List
    10. Summary
  11. Chapter 4 Formatting Your Web Page
    1. Styling Text
      1. Styling the Typeface
    2. Lesson 4.1: Specifying a Generic Font
    3. Lesson 4.2: Specifying a System Font
    4. Lesson 4.3: Setting the Type Size
    5. Working with Text Styles
    6. Lesson 4.4: Making Text Bold
    7. Lesson 4.5: Making Text Italic
    8. Styling Paragraphs
    9. Lesson 4.6: Aligning Paragraphs Horizontally
    10. Lesson 4.7: Indenting Paragraph Text
    11. Working with Colors
    12. Lesson 4.8: Applying Color to Text
    13. Lesson 4.9: Applying Color to a Background
    14. Summary
  12. Chapter 5 Project: Creating a Personal Home Page
    1. What You’ll Be Building
    2. Sketching the Layout
    3. Choosing Typefaces
    4. Choosing a Color Scheme
    5. Building the Page
      1. The Initial Structure
      2. The Page Title
      3. The Page Introduction
      4. The Social Media Links
      5. The Body Text
      6. The Page Footer
    6. From Here
    7. Summary
  13. Part 2. Working with Images and Styles
  14. Chapter 6 Adding Images and Other Media
    1. Lesson 6.1: Adding an Image to the Page
    2. Understanding Image File Formats
    3. Getting Graphics
    4. Inserting an HTML5 Figure
    5. Setting Up an Image as a Link
    6. Using an Image as a Custom Bullet
    7. Aligning Images and Text
    8. Lesson 6.2: Working with Background Images
    9. Controlling the Background Repeat
    10. Setting the Background Position
    11. Adding a Hero Image
    12. The Background Shorthand Property
    13. Optimizing Images
    14. Adding Video and Audio to the Page
      1. Web Video Formats
      2. Web Audio Formats
    15. Lesson 6.3: Embedding Video in a Web Page
    16. Lesson 6.4: Embedding Audio in a Web Page
    17. Summary
  15. Chapter 7 Learning More About Styles
    1. Adding Styles to a Page
    2. Lesson 7.1: Inserting Inline Styles
    3. Lesson 7.2: Adding an Internal Style Sheet
    4. Lesson 7.3: Referencing an External Style Sheet
    5. Lesson 7.4: Using Class Selectors
    6. Units of Measurement in CSS
    7. Summary
  16. Chapter 8 Floating and Positioning Elements
    1. Understanding the Default Page Flow
    2. Lesson 8.1: Floating Elements
      1. Clearing Floated Elements
      2. Preventing Container Collapse
      3. Floating a Drop Cap
      4. Floating a Pull Quote
    3. Lesson 8.2: Positioning Elements
      1. Relative Positioning
      2. Absolute Positioning
      3. Fixed Positioning
    4. Summary
  17. Chapter 9 Styling Sizes, Borders, and Margins
    1. The Anatomy of an Element Box
    2. Lesson 9.1: Setting the Width and Height
    3. Lesson 9.2: Adding Padding
    4. Lesson 9.3: Applying a Border
    5. Lesson 9.4: Controlling the Margins
    6. Watch Out for Collapsing Margins!
    7. Summary
  18. Chapter 10 Project: Creating a Landing Page
    1. What You’ll Be Building
    2. Sketching the Layout
    3. Choosing Typefaces
    4. Choosing a Color Scheme
    5. Building the Page
      1. The Initial Structure
      2. The Header
      3. The Hero Background Image
      4. The Product Image
      5. The Product Info
      6. The Call-to-Action Button
      7. The Product Description
      8. Setting Up the Content Bands
      9. The Product Testimonials
      10. The Pricing Table
      11. The Social Media Links
      12. The Page Footer
    6. From Here
    7. Summary
  19. Part 3. Laying Out a Web Page
  20. Chapter 11 Learning Page Layout Basics
    1. The Holy-Grail Layout
    2. Understanding Web Page Layout Methods
    3. Learning the HTML5 Semantic Page Elements
      1. <header>
      2. <nav>
      3. <main>
      4. <article>
      5. <section>
      6. <aside>
      7. <footer>
      8. The Holy-Grail Layout, Revisited
    4. Creating Page Layouts with Floats
    5. Lesson 11.1: Creating the Holy Grail Layout with Floats
    6. Creating Page Layouts with Inline Blocks
    7. Lesson 11.2: Creating the Holy-Grail Layout with Inline Blocks
    8. Summary
  21. Chapter 12 Creating Page Layouts with Flexbox
    1. Understanding Flexbox
      1. Working with Flexbox Containers
    2. Lesson 12.1: Dead-Centering an Element with Flexbox
      1. Working with Flexbox Items
      2. Flexbox Browser Support
    3. Lesson 12.2: Creating a Thumbnail List
    4. Lesson 12.3: Creating the Holy-Grail Layout with Flexbox
    5. Summary
  22. Chapter 13 Designing Responsive Web Pages
    1. Lesson 13.1: Why Fixed-Width Layouts Are the Enemy
    2. Creating a Responsive Layout
    3. Lesson 13.2: Creating a Liquid Layout
      1. Liquid Layouts with Viewport Units
    4. Lesson 13.3: Creating a Flexible Layout
    5. Lesson 13.4: Creating an Adaptive Layout
      1. A Note about Media Query Breakpoints
    6. Lesson 13.5: Creating a Mobile-First Layout
      1. Which Layout Is the Responsive One?
    7. Summary
  23. Chapter 14 Making Your Images and Typography Responsive
    1. Making Images Responsive
    2. Lesson 14.1: Creating Fluid Images
    3. Lesson 14.2: Delivering Images Responsively
    4. Making Typography Responsive
    5. Lesson 14.3: Using Responsive Font Sizes
    6. Lesson 14.4: Using Responsive Measurements
    7. Gallery of Responsive Sites
    8. Summary
  24. Chapter 15 Project: Creating a Photo Gallery
    1. What You’ll Be Building
    2. Getting Your Photos Ready
    3. Sketching the Layout
    4. Choosing Typefaces
    5. Choosing the Colors
    6. Building the Page
      1. The Initial Structure
      2. The Overall Layout
      3. The Header Section
      4. The Navigation Section
      5. The Main Section
      6. The Footer Section
    7. Adding a Few Tricks
      1. Making the Footer Fixed
      2. Making the Nav Bar Sticky
      3. Adding Dynamic Captions
    8. From Here
    9. Summary
  25. Part 4. Making Your Web Pages Shine
  26. Chapter 16 More HTML Elements for Web Designers
    1. Lesson 16.1: Other Text-Level Elements You Should Know
      1. <abbr>
      2. <cite>
      3. <code>
      4. <dfn>
      5. <kbd>
      6. <mark>
      7. <pre>
      8. <s>
      9. <samp>
      10. <small>
      11. <sub>
      12. <sup>
      13. <time>
      14. <u>
      15. <var>
    2. More about Links
      1. Linking to Local Files
    3. Lesson 16.2: Linking to the Same Page
    4. Inserting Special Characters
    5. Using the HTML5 Entity Browser
    6. Adding Comments
    7. Summary
  27. Chapter 17 Adding a Splash of Color to Your Web Designs
    1. Understanding Colors
    2. Adding Colors with CSS
    3. Lesson 17.1: Specifying Red, Green, and Blue with the rgb() Function
    4. Lesson 17.2: Specifying Hue, Saturation, and Luminance with the hsl() Function
      1. A Quick Note about Transparency
      2. A Brief Detour into Hexadecimal Numbers
    5. Lesson 17.3: Using RGB Hex Codes
      1. Working with the Color Chooser
    6. Choosing Harmonious Colors
    7. Using the Color Scheme Calculator
    8. Color Scheme Gallery
    9. Applying a Color Gradient
    10. Lesson 17.4: Creating a Linear Gradient
    11. Lesson 17.5: Creating a Radial Gradient
    12. Lesson 17.6: Gradients and Older Browsers
      1. Using the Gradient Construction Kit
    13. Summary
  28. Chapter 18 Enhancing Page Text with Typography
    1. Specifying the Typeface
    2. Lesson 18.1: Working with Font Stacks
      1. Specifying Web Fonts
    3. Lesson 18.2: Using Third-Party Hosted Fonts
    4. Lesson 18.3: Hosting Your Own Fonts
    5. Working with Text Styles
    6. Lesson 18.4: Styling Small Caps
    7. Lesson 18.5: Setting the Line Height
    8. Lesson 18.6: Using the Shorthand Font Property
    9. Web Typography Gallery
    10. Summary
  29. Chapter 19 Learning Advanced CSS Selectors
    1. Working with ID Selectors
    2. Lesson 19.1: Using ID Selectors
      1. Best Practices: Classes Versus IDs
    3. Web Page Genealogy: Parents, Descendants, and Siblings
    4. Working with Contextual Selectors
    5. Lesson 19.2: The Descendant Selector
    6. Lesson 19.3: The Child Selector
    7. Lesson 19.4: The Sibling Selector
    8. Taking Things up a Notch by Combining Selectors
    9. Lesson 19.5: The ::before and ::after Pseudo-elements
    10. Resetting CSS with the Universal Selector
    11. Styles: What a Tangled Web Page They Weave
    12. Lesson 19.6: Understanding Inheritance
    13. Lesson 19.7: Learning About the Cascade
    14. Lesson 19.8: Introducing Specificity
    15. Summary
  30. Chapter 20 Project: Creating a Portfolio Page
    1. What You’ll Be Building
    2. Sketching the Layout
    3. Choosing Typefaces
    4. Choosing a Color Scheme
    5. Building the Page
      1. The Initial Structure
      2. The Overall Layout
      3. The Header Section
      4. The Portfolio Introduction
      5. The Portfolio
      6. The About Section
      7. The Contact Section
      8. The Page Footer
    6. From Here
    7. Summary
  31. Chapter From Playground to Web: Getting Your Pages Online
    1. From There to Here: Saving Your Playground Work
      1. Copying Playground Code
      2. Downloading Playground Code
    2. Setting Up Your Folders
    3. Validating Your Code
      1. Validating HTML
      2. Validating CSS
    4. Getting a Web Host
    5. Uploading Your Files
    6. Selecting a Text Editor
    7. Summary
  32. Index
    1. A
    2. B
    3. C
    4. D
    5. E
    6. F
    7. G
    8. H
    9. I
    10. J
    11. K
    12. L
    13. M
    14. N
    15. O
    16. P
    17. Q
    18. R
    19. S
    20. T
    21. U
    22. V
    23. W
    24. Z
  33. Lists of Figures, Tables and Listings
    1. List of Figures
    2. List of Tables
    3. List of Listings

Product information

  • Title: Web Design Playground
  • Author(s): Paul McFedries
  • Release date: May 2019
  • Publisher(s): Manning Publications
  • ISBN: 9781617294402