book

Learning Web Design, 5th Edition

by Jennifer Robbins

May 2018

Beginner

808 pages

25h 3m

English

O'Reilly Media, Inc.

Read now

Unlock full access

1. Getting Started in Web DesignWhere Do I Start?It Takes a Village (Website Creation Roles)Gearing Up for Web DesignWhat You’ve LearnedTest Yourself
The Internet Versus the WebServing Up Your InformationA Word About BrowsersWeb Page Addresses (URLs)The Anatomy of a Web PagePutting It All TogetherTest Yourself
A Multitude of Devices Sticking with the StandardsProgressive EnhancementResponsive Web DesignOne Web for All (Accessibility)The Need for Speed (Site Performance)Test Yourself
4. Creating a Simple PageA Web Page, Step-By-StepLaunch a Text EditorStep 1: Start with ContentStep 2: Give the HTML Document StructureStep 3: Identify Text ElementsStep 4: Add an ImageStep 5: Change the Look with a Style SheetWhen Good Pages Go BadValidating Your DocumentsTest YourselfElement Review: HTML Document Setup
ParagraphsHeadingsThematic Breaks (Horizontal Rule)ListsMore Content ElementsOrganizing Page ContentThe Inline Element RoundupGeneric Elements (div and span)Improving Accessibility with ARIACharacter EscapesPutting It All TogetherTest YourselfElement Review: Text Elements
The href AttributeLinking to Pages on the WebLinking Within Your Own Site Targeting a New Browser WindowMail LinksTelephone LinksTest YourselfElement Review: Links
First, a Word on Image FormatsThe img ElementAdding SVG ImagesResponsive Image MarkupWhew! We’re FinishedTest YourselfElement Review: Images
How to Use TablesMinimal Table StructureTable HeadersSpanning CellsTable Accessibility Row and Column GroupsWrapping Up TablesTest YourselfElement Review: Tables

How Forms WorkThe form ElementVariables and ContentThe Great Form Control RoundupForm Accessibility FeaturesForm Layout and DesignTest YourselfElement Review: Forms
Window-In-A-Window (iframe)Multipurpose Embedder (object)Video and AudioCanvasTest YourselfElement Review: Embedded Media
11. Introducing Cascading Style SheetsThe Benefits of CSSHow Style Sheets WorkThe Big ConceptsCSS Units of MeasurementDeveloper Tools Right in Your BrowserMoving Forward with CSSTest Yourself
Basic Font PropertiesAdvanced Typography with CSS3Changing Text ColorA Few More Selector TypesText Line AdjustmentsUnderlines and Other “Decorations”Changing CapitalizationSpaced OutText ShadowChanging List Bullets and NumbersTest YourselfCSS Review: Font and Text Properties
Specifying Color ValuesForeground ColorBackground ColorClipping the BackgroundPlaying with OpacityPseudo-Class SelectorsPseudo-Element SelectorsAttribute SelectorsBackground ImagesThe Shorthand background PropertyLike a Rainbow (Gradients)Finally, External Style SheetsWrapping It UpTest YourselfCSS Review: Color and Background Properties
The Element BoxSpecifying Box DimensionsPadding BordersMarginsAssigning Display TypesBox Drop ShadowsTest YourselfCSS Review: Box Properties
Normal FlowFloating Fancy Text Wrap with CSS Shapes Positioning BasicsRelative PositioningAbsolute PositioningFixed PositioningTest YourselfCSS Review: Floating and Positioning Properties
Flexible Boxes with CSS FlexboxCSS Grid LayoutTest YourselfCSS Review: Layout Properties
Why RWD?The Responsive RecipeChoosing BreakpointsDesigning ResponsivelyA Few Words About TestingMore RWD ResourcesTest Yourself
Ease-y Does It (CSS Transitions)CSS TransformsKeyframe AnimationWrapping UpTest YourselfCSS Review: Transitions, Transforms, and Animation
Styling FormsStyling TablesA Clean Slate (Reset and Normalize.css)Image Replacement TechniquesCSS SpritesCSS Feature DetectionWrapping Up Style SheetsTest YourselfCSS Review: Table Properties
Getting Cozy with the Command LineCSS Power Tools (Processors)Build Tools (Grunt and Gulp)Version Control with Git and GitHubConclusionTest Yourself
21. Introduction to JavaScriptWhat Is JavaScript?Adding JavaScript to a PageThe Anatomy of a ScriptThe Browser ObjectEventsPutting It All TogetherLearning More About JavaScriptTest Yourself
Meet the DOMPolyfillsJavaScript LibrariesBig FinishTest Yourself
23. Web Image BasicsImage SourcesMeet the FormatsImage Size and ResolutionImage Asset StrategyFaviconsSumming Up ImagesTest Yourself
Saving Images in Web FormatsWorking with TransparencyResponsive Image Production TipsImage OptimizationTest Yourself
Drawing with XMLFeatures of SVG as XMLSVG ToolsSVG Production TipsResponsive SVGsFurther SVG ExplorationTest Yourself And...We’re Done!
A. Answers
An Abbreviated History of HTMLHTML5: More Than MarkupWhere We Go From Here

Content preview from Learning Web Design, 5th Edition

Preface

Hello and welcome to the fifth edition of Learning Web Design!

I’ve been documenting web design and development in books like this one for decades, and it continues to fascinate me how the web landscape changes from edition to edition. This fifth edition is no exception! Not only is this version nearly 200 pages longer than the last one, but there are also some significant updates and additions worth noting.

First, some technologies and techniques that were brand new or even experimental in the last edition have become nicely settled in. HTML5 is the new normal, and CSS is moving ahead with its modular approach, allowing new technologies to emerge and be adopted one at a time. We’ve largely gotten our heads around designing for a seemingly infinite range of devices. Responsive Web Design is now the de facto approach to building sites. As a result, RWD has earned its own chapter in this edition (Chapter 17, Responsive Web Design). Where in the last edition we pondered and argued how to handle responsive image markup, in this edition, the new responsive image elements are standardized and well supported (Chapter 7, Adding Images). I think we’re getting the hang of this mobile thing!

I’ve seen a lot of seismic shifts in web design ...