Web Design Playground: HTML & CSS the Interactive Way

Web Design Playground
	Contents
	Preface
	Acknowledgments
	About This Book
	About the Author
	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
			Choosing a Color Scheme
			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
			16
			More about Links
			Inserting Special Characters
			Using the HTML5 Entity Browser
			More HTML Elements for Web Designers
			Adding Comments
			Summary
			17
		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
		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
		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
			From Here
		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
	Index