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

Preface --
Part 1: Getting started in web design: Where do I start? --
It takes a village (website creation roles) --
Gearing up for web design --
What you've learned --
Test yourself --
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 --
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 2: HTML Markup For Structure: --
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 sheet --
When good pages go bad --
Validating your documents --
Test yourself --
Element review: HTML document setup --
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 --
Adding links: --
Href attribute --
Linking to pages on the web --
Linking within you own site --
Targeting a new browser window --
Mail links --
Telephone links --
Test yourself --
Element review: Links --
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 --
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 --
Forms: --
How forms work --
The form element --
Variables and content --
The great form control roundup --
Form accessibility features --
Form layout and design --
Test yourself --
Embedded media: Window-in-a-window (iframe) --
Multipurpose embedder (object) --
Video and audio --
Canvas --
Test yourself --
Element review: embedded media --
Part 3: CSS For Presentation: --
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 --
Formatting text: --
Basic font properties --
Advancing 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 --
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 properties --
Thinking inside the box: --
The element box --
Specifying box dimensions --
Padding --
Borders --
Margins --
Assigning display types --
Box drop shadows --
Test yourself --
CSS Review: Basic box properties --
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 properties --
CSS layout with flexbox and grid: --
Flexible boxes with CSS flexbox --
CSS grid layout --Test yourself --
CSS review: layout properties --
Responsive web design: --
Why RWD? --
The responsive recipe --
Choosing breakpoints --
Designing responsively --A few words about testing --
More RWD resources --
Test yourself --
Transitions, transforms, and animation: Ease-y does it (CSS transitions) --
CSS transforms --
Keyframe animation --
Wrapping up --
Test yourself --
CSS review: transitions, transforms, and animation--
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 --
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 4: JavaScript For Behaviors: --
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 --
Using JavaScript: --
Meet the DOM --
Polyfills --
JavaScript libraries --
Big finish --
Test yourself --
Part 5: Web images: Web image basics --
Image sources --
Meet the formats --
Image size and resolution --
Image asset strategy --
Favicons --
Summing up images --
Test yourself --
Image asset production: --
Saving images in web formats --
Working with transparency --
Responsive image prodcution tips --
Image optimization --
Test yourself --
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 --
Appendices: Answers --
HTML5 global attributes --
CSS selectors, levels 3 and 4 --
From HTML + to HTML5 --
Index.