Web Design Playground

A wonderful guided tour of modern web design, replete with real-world examples that are relevant. Conor Redmond, Incomm Product Control 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. Part 1: Getting Started with HTML and CSS

1 Getting to Know HTML and CSS

What Is HTML?

What Is CSS?

What Can’t You Do with HTML and CSS?

How HTML and CSS Create the Web

Introducing the Web Design Playground

Adding HTML Tag Attributes

Some Helpful Features of the Playground

2 Building Your First Web Page

Getting Your Web Page off the Ground

Learning the Most Common Text Elements

3 Adding Structure to Your Page

HTML Elements for Structuring Page Text

Organizing Text Into Lists

4 Formatting Your Web Page

Styling Text

Working with Text Styles

Styling Paragraphs

Working with Colors

5 Project: Creating a Personal Home Page

What You’ll Be Building

Sketching the Layout

Choosing Typefaces

Building the Page

From Here

Part 2: Working with Images and Styles

6 Adding Images and Other Media

Understanding Image File Formats

Getting Graphics

Inserting an HTML5 Figure

Setting Up an Image as a Link

Using an Image as a Custom Bullet

Aligning Images and Text

Controlling the Background Repeat

Setting the Background Position

Adding a Hero Image

The Background Shorthand Property

Optimizing Images

Adding Video and Audio to the Page

7 Learning More About Styles

Adding Styles to a Page

Units of Measurement in CSS

8 Floating and Positioning Elements

Understanding the Default Page Flow

9 Styling Sizes, Borders, and Margins

The Anatomy of an Element Box

Watch Out for Collapsing Margins!

10 Project: Creating a Landing Page

What You’ll Be Building

Sketching the Layout

Choosing Typefaces

Choosing a Color Scheme

Building the Page

From Here

Part 3: Laying Out a Web Page

11 Learning Page Layout Basics

The Holy-Grail Layout

Understanding Web Page Layout Methods

Learning the HTML5 Semantic Page Elements

Creating Page Layouts with Floats

Creating Page Layouts with Inline Blocks

12 Creating Page Layouts with Flexbox

Understanding Flexbox

13 Designing Responsive Web Pages

Creating a Responsive Layout

14 Making Your Images and Typography Responsive

Making Images Responsive

Making Typography Responsive

Making Your Images and Typography Responsive

Gallery of Responsive Sites

15 Project: Creating a Photo Gallery

What You’ll Be Building

Getting Your Photos Ready

Sketching the Layout

Choosing Typefaces

Choosing the Colors

Building the Page

Adding a Few Tricks

From Here

Part 4: Making Your Web Pages Shine

16 More HTML Elements for Web Designers

More about Links

Inserting Special Characters

Using the HTML5 Entity Browser

More HTML Elements for Web Designers

Adding Comments

Summary

17 Adding a Splash of Color to Your Web Designs

Understanding Colors

Adding Colors with CSS

Choosing Harmonious Colors

Using the Color Scheme Calculator

Color Scheme Gallery

Applying a Color Gradient

Summary

18 Enhancing Page Text with Typography

Specifying the Typeface

Working with Text Styles

Enhancing Page Text with Typography

Web Typography Gallery

Enhancing Page Text with Typography

Summary

19 Learning Advanced CSS Selectors

Working with ID Selectors

Web Page Genealogy: Parents, Descendants, and Siblings

Working with Contextual Selectors

Taking Things up a Notch by Combining Selectors

Resetting CSS with the Universal Selector

Styles: What a Tangled Web Page They Weave

20 Project: Creating a Portfolio Page

What You’ll Be Building

Sketching the Layout

Choosing Typefaces

Choosing a Color Scheme

Building the Page

Building the Page

From Here

Appendixes

Appendix A: Appendix From Playground to Web: Getting Your Pages Online

From There to Here: Saving Your Playground Work

Setting Up Your Folders

Validating Your Code

Getting a Web Host

Uploading Your Files

Selecting a Text Editor

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.