HTML5 and CSS3 Responsive Web Design

دوره آموزش html

Chapter 1: Responsive Elements and Media 5
Introduction 5
Resizing an image using percent width 6
Responsive images using the cookie and JavaScript 8
Making your video respond to your screen width 10
Resizing an image using media queries 13
Changing your navigation with media queries 14
Making a responsive padding based on size 19
Making a CSS3 button glow for a loading element 21
Chapter 2: Responsive Typography 27
Introduction 27
Creating fluid, responsive typography 28
Making a text shadow with canvas 29
Making an inner and outer shadow with canvas 31
Rotating your text with canvas 33
Rotating your text with CSS3 34
Making 3D text with CSS3 36
Adding texture to your text with text masking 38
Styling alternating rows with the nth positional pseudo class 39
Adding characters before and after pseudo elements 41
Making a button with a relative font size 42
Adding a shadow to your font 44
Curving a corner with border radius 46Chapter 3: Responsive Layout 49
Introduction 49
Responsive layout with the min-width and max-width properties 49
Controlling your layout with relative padding 52
Adding a media query to your CSS 55
Creating a responsive width layout with media queries 59
Changing image sizes with media queries 64
Hiding an element with media queries 66
Making a smoothly transitioning responsive layout 68
Chapter 4: Using Responsive Frameworks 79
Introduction 79
Using the Fluid 960 grid layout 80
Using the Blueprint grid layout 84
Fluid layout using the rule of thirds 88
Trying Gumby, a responsive 960 grid 93
The Bootstrap framework makes responsive layouts easy 99
Chapter 5: Making Mobile-first Web Applications 105
Introduction 105
Using the Safari Developer Tools' User Agent switcher 106
Masking your user agent in Chrome with a plugin 109
Using browser resizing plugins 112
Learning the viewport and its options 113
Adding tags for jQuery Mobile 116
Adding a second page in jQuery Mobile 119
Making a list element in jQuery Mobile 122
Adding a mobile, native-looking button with jQuery Mobile 129
Adding a mobile stylesheet for mobile browsers only using media queries 135
Adding JavaScript for mobile browsers only 137
Chapter 6: Optimizing Responsive Content 139
Introduction 139
Responsive testing using IE's Developer Tools 140
Browser testing – using plugins 143
Development environments – getting a free IDE 149
Virtualization – downloading VirtualBox 152
Getting a browser resizer for Chrome 156Chapter 7: Unobtrusive JavaScript 161
Introduction 161
Writing "Hello World" unobtrusively 161
Creating a glowing "submit" button with the event listener 165
Making a button stand out when you hover over it 169
Resizing an element with unobtrusive jQuery 173
Masking a password with unobtrusive JavaScript 177
Using an event listener to animate an image shadow 179
Index 185