Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

CONTENTS
FOREWORD
PREFACE
PART I: GETTING STARTED
	CHAPTER 1: GETTING STARTED IN WEB DESIGN
		WHERE DO I START?
		IT TAKES A VILLAGE (WEBSITE CREATION ROL
		GEARING UP FOR WEB DESIGN
		WHAT YOU’VE LEARNED
		TEST YOURSELF
	CHAPTER 2: HOW THE WEB WORKS
		THE INTERNET VERSUS THE WEB
		SERVING UP YOUR INFORMATION
		A WORD ABOUT BROWSERS
		WEB PAGE ADDRESSES (URLS)
		THE ANATOMY OF A WEB PAGE
		PUTTING IT ALL TOGETHER
		TEST YOURSELF
	CHAPTER 3: SOME BIG CONCEPTS YOU NEED TO KNOW
		A MULTITUDE OF DEVICES
		STICKING WITH THE STANDARDS
		PROGRESSIVE ENHANCEMENT
		RESPONSIVE WEB DESIGN
		ONE WEB FOR ALL (ACCESSIBILITY)
		THE NEED FOR SPEED (SITE PERFORMANCE)
		TEST YOURSELF
PART II: HTML FOR STRUCTURE
	CHAPTER 4: CREATING A SIMPLE PAGE
		A WEB PAGE, STEP-BY-STEP
		LAUNCH A TEXT EDITOR
		STEP 1: START WITH CONTENT
		STEP 2: GIVE THE HTML DOCUMENT STRUCTURE
		STEP 3: IDENTIFY TEXT ELEMENTS
		STEP 4: ADD AN IMAGE
		STEP 5: CHANGE THE LOOK WITH A STYLE SHE
		WHEN GOOD PAGES GO BAD
		VALIDATING YOUR DOCUMENTS
		TEST YOURSELF
		ELEMENT REVIEW: HTML DOCUMENT SETUP
	CHAPTER 5: MARKING UP TEXT
		PARAGRAPHS
		HEADINGS
		THEMATIC BREAKS (HORIZONTAL RULE)
		LISTS
		MORE CONTENT ELEMENTS
		ORGANIZING PAGE CONTENT
		THE INLINE ELEMENT ROUNDUP
		GENERIC ELEMENTS (DIV AND SPAN)
		IMPROVING ACCESSIBILITY WITH ARIA
		CHARACTER ESCAPES
		PUTTING IT ALL TOGETHER
		TEST YOURSELF
		ELEMENT REVIEW: TEXT ELEMENTS
	CHAPTER 6: ADDING LINKS
		THE HREF ATTRIBUTE
		LINKING TO PAGES ON THE WEB
		LINKING WITHIN YOUR OWN SITE
		TARGETING A NEW BROWSER WINDOW
		MAIL LINKS
		TELEPHONE LINKS
		TEST YOURSELF
		ELEMENT REVIEW: LINKS
	CHAPTER 7: ADDING IMAGES
		FIRST, A WORD ON IMAGE FORMATS
		THE IMG ELEMENT
		ADDING SVG IMAGES
		RESPONSIVE IMAGE MARKUP
		WHEW! WE’RE FINISHED
		TEST YOURSELF
		ELEMENT REVIEW: IMAGES
	CHAPTER 8: TABLE MARKUP
		HOW TO USE TABLES
		MINIMAL TABLE STRUCTURE
		TABLE HEADERS
		SPANNING CELLS
		TABLE ACCESSIBILITY
		ROW AND COLUMN GROUPS
		WRAPPING UP TABLES
		TEST YOURSELF
		ELEMENT REVIEW: TABLES
	CHAPTER 9: FORMS
		HOW FORMS WORK
		THE FORM ELEMENT
		VARIABLES AND CONTENT
		THE GREAT FORM CONTROL ROUNDUP
		FORM ACCESSIBILITY FEATURES
		FORM LAYOUT AND DESIGN
		TEST YOURSELF
		ELEMENT REVIEW: FORMS
	CHAPTER 10: EMBEDDED MEDIA
		WINDOW-IN-A-WINDOW (IFRAME)
		MULTIPURPOSE EMBEDDER (OBJECT)
		VIDEO AND AUDIO
		CANVAS
		TEST YOURSELF
		ELEMENT REVIEW: EMBEDDED MEDIA
PART III: CSS FOR PRESENTATION
	CHAPTER 11: INTRODUCING CASCADING STYLE SHEETS
		THE BENEFITS OF CSS
		HOW STYLE SHEETS WORK
		THE BIG CONCEPTS
		CSS UNITS OF MEASUREMENT
		DEVELOPER TOOLS RIGHT IN YOUR BROWSER
		MOVING FORWARD WITH CSS
		TEST YOURSELF
	CHAPTER 12: FORMATTING TEXT
		BASIC FONT PROPERTIES
		ADVANCED TYPOGRAPHY WITH CSS3
		CHANGING TEXT COLOR
		A FEW MORE SELECTOR TYPES
		TEXT LINE ADJUSTMENTS
		UNDERLINES AND OTHER “DECORATIONS”
		CHANGING CAPITALIZATION
		SPACED OUT
		TEXT SHADOW
		CHANGING LIST BULLETS AND NUMBERS
		TEST YOURSELF
		CSS REVIEW: FONT AND TEXT PROPERTIES
	CHAPTER 13: COLORS AND BACKGROUNDS
		SPECIFYING COLOR VALUES
		FOREGROUND COLOR
		BACKGROUND COLOR
		CLIPPING THE BACKGROUND
		PLAYING WITH OPACITY
		PSEUDO-CLASS SELECTORS
		PSEUDO-ELEMENT SELECTORS
		ATTRIBUTE SELECTORS
		BACKGROUND IMAGES
		THE SHORTHAND BACKGROUND PROPERTY
		LIKE A RAINBOW (GRADIENTS)
		FINALLY, EXTERNAL STYLE SHEETS
		WRAPPING IT UP
		TEST YOURSELF
		CSS REVIEW: COLOR AND BACKGROUND PROPERT
	CHAPTER 14: THINKING INSIDE THE BOX
		THE ELEMENT BOX
		SPECIFYING BOX DIMENSIONS
		PADDING
		BORDERS
		MARGINS
		ASSIGNING DISPLAY TYPES
		BOX DROP SHADOWS
		TEST YOURSELF
		CSS REVIEW: BOX PROPERTIES
	CHAPTER 15: FLOATING AND POSITIONING
		NORMAL FLOW
		FLOATING
		FANCY TEXT WRAP WITH CSS SHAPES
		POSITIONING BASICS
		RELATIVE POSITIONING
		ABSOLUTE POSITIONING
		FIXED POSITIONING
		TEST YOURSELF
		CSS REVIEW: FLOATING AND POSITIONING PRO
	CHAPTER 16: CSS LAYOUT WITH FLEXBOX AND GRID
		FLEXIBLE BOXES WITH CSS FLEXBOX
		CSS GRID LAYOUT
		TEST YOURSELF
		CSS REVIEW: LAYOUT PROPERTIES
	CHAPTER 17: RESPONSIVE WEB DESIGN
		WHY RWD?
		THE RESPONSIVE RECIPE
		CHOOSING BREAKPOINTS
		DESIGNING RESPONSIVELY
		A FEW WORDS ABOUT TESTING
		MORE RWD RESOURCES
		TEST YOURSELF
	CHAPTER 18: TRANSITIONS, TRANSFORMS, AND ANIMATION
		EASE-Y DOES IT (CSS TRANSITIONS)
		CSS TRANSFORMS
		KEYFRAME ANIMATION
		WRAPPING UP
		TEST YOURSELF
		CSS REVIEW: TRANSITIONS, TRANSFORMS, AND
	CHAPTER 19: MORE CSS TECHNIQUES
		STYLING FORMS
		STYLING TABLES
		A CLEAN SLATE (RESET AND NORMALIZE.CSS)
		IMAGE REPLACEMENT TECHNIQUES
		CSS SPRITES
		CSS FEATURE DETECTION
		WRAPPING UP STYLE SHEETS
		TEST YOURSELF
		CSS REVIEW: TABLE PROPERTIES
	CHAPTER 20: MODERN WEB DEVELOPMENT TOOLS
		GETTING COZY WITH THE COMMAND LINE
		CSS POWER TOOLS (PROCESSORS)
		BUILD TOOLS (GRUNT AND GULP)
		VERSION CONTROL WITH GIT AND GITHUB
		CONCLUSION
		TEST YOURSELF
PART IV: JAVASCRIPT FOR BEHAVIOR
	CHAPTER 21: INTRODUCTION TO JAVASCRIPT
		WHAT IS JAVASCRIPT?
		ADDING JAVASCRIPT TO A PAGE
		THE ANATOMY OF A SCRIPT
		THE BROWSER OBJECT
		EVENTS
		PUTTING IT ALL TOGETHER
		LEARNING MORE ABOUT JAVASCRIPT
		TEST YOURSELF
	CHAPTER 22: USING JAVASCRIPT
		MEET THE DOM
		POLYFILLS
		JAVASCRIPT LIBRARIES
		BIG FINISH
		TEST YOURSELF
PART V: WEB IMAGES
	CHAPTER 23: WEB IMAGE BASICS
		IMAGE SOURCES
		MEET THE FORMATS
		IMAGE SIZE AND RESOLUTION
		IMAGE ASSET STRATEGY
		FAVICONS
		SUMMING UP IMAGES
		TEST YOURSELF
	CHAPTER 24: IMAGE ASSET PRODUCTION
		SAVING IMAGES IN WEB FORMATS
		WORKING WITH TRANSPARENCY
		RESPONSIVE IMAGE PRODUCTION TIPS
		IMAGE OPTIMIZATION
		TEST YOURSELF
	CHAPTER 25: SVG
		DRAWING WITH XML
		FEATURES OF SVG AS XML
		SVG TOOLS
		SVG PRODUCTION TIPS
		RESPONSIVE SVGS
		FURTHER SVG EXPLORATION
		TEST YOURSELF
		AND...WE’RE DONE!
PART VI: APPENDICES
	APPENDIX A: ANSWERS
	APPENDIX B: HTML5 GLOBAL ATTRIBUTES
	APPENDIX C: CSS SELECTORS, LEVELS 3 AND 4
	APPENDIX D: FROM HTML+ TO HTML5
INDEX