Do you want to build web pages but have no prior experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multicolumn pages that adapt for mobile devices.
Each chapter provides exercises to help you learn various techniques and short quizzes to make sure you understand key concepts.
This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels. It is simple and clear enough for beginners, yet thorough enough to be a useful reference for experienced developers keeping their skills up to date.
• Build HTML pages with text, links, images, tables, and forms
• Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects
• Learn how JavaScript works and why the language is so important in web design
• Create and optimize web images so they’ll download as quickly as possible
• New! Use CSS Flexbox and Grid for sophisticated and flexible page layout
• New! Learn the ins and outs of Responsive Web Design to make web pages look great on all devices
• New! Become familiar with the command line, Git, and other tools in the modern web developer’s toolkit
• New! Get to know the super-powers of SVG graphics.
Author(s): Jennifer Robbins
Edition: 5
Publisher: O'Reilly Media
Year: 2018
Language: English
Commentary: Vector PDF
Pages: 808
City: Sebastopol, CA
Tags: JavaScript; DOM; CSS; Web Design; Elementary; HTML
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
