Learning Web Design by Robbins, Jennifer -- Read -- Imperial Library of Trantor

Index

Foreword Preface Part I. Getting Started

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

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

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

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 Sheet When Good Pages Go Bad Validating Your Documents Test Yourself Element Review: HTML Document Setup

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

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

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

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

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

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

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

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

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 Properties

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

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 Properties

16. CSS Layout with Flexbox and Grid

Flexible Boxes with CSS Flexbox CSS Grid Layout Test Yourself CSS Review: Layout Properties

17. Responsive Web Design

Why RWD? The Responsive Recipe Choosing Breakpoints Designing Responsively A Few Words About Testing More RWD Resources Test Yourself

18. Transitions, Transforms, and Animation

Ease-y Does It (CSS Transitions) CSS Transforms Keyframe Animation Wrapping Up Test Yourself CSS Review: Transitions, Transforms, and Animation

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

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

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

22. Using JavaScript

Meet the DOM Polyfills JavaScript Libraries Big Finish Test Yourself

Part V. Web Images

23. Web Image Basics

Image Sources Meet the Formats Image Size and Resolution Image Asset Strategy Favicons Summing Up Images Test Yourself

24. Image Asset Production

Saving Images in Web Formats Working with Transparency Responsive Image Production Tips Image Optimization Test Yourself

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

A. Answers B. HTML5 Global Attributes C. CSS Selectors, Levels 3 and 4 D. From HTML+ to HTML5

An Abbreviated History of HTML HTML5: More Than Markup Where We Go From Here

← Prev
Back
Next →

← Prev
Back
Next →