Learning Web Design : a beginner's guide to HTML, CSS, Javascript, and Web Graphics

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 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 Do you want to build web pages but have no prior experience? This friendly guide is the perfect place to start. You l 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 l 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