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

3. Some Big Concepts You Need to Know

3 Some Big Concepts You Need to Know

In this chapter

The web on mobile devices

The benefits of web standards

Progressive enhancement

Responsive Web Design

Accessibility

Site performance

As the web matures and the number of devices we access it from increases exponentially, our jobs as web designers and developers get significantly more complicated. Frankly, there’s a lot more going on out there than I can fit in this book. In the chapters that follow, I will focus on the basic building blocks of web design—HTML elements, CSS styles, a taste of JavaScript, and web image production—that will give you a solid foundation for the further development of your skills.

Before we get to the nuts and bolts, I want to introduce some Big Concepts that every web designer needs to know. We’ll look at ideas and concerns that inform our decisions and contribute to the contemporary web environment. I’ll be referring back to the terminology introduced here frequently.

The heart of the matter is that as web designers, we never know exactly how the pages we create will be viewed. We don’t know which of the dozens of browsers might be used, whether it is on a desktop computer or something more portable, how large the browser window will be, what fonts are installed, whether functionality such as JavaScript is enabled, how fast the internet connection is, whether the pages are being read by a screen reader, and so on. The Big Concepts in this chapter are ...