Creating Responsive Websites Using HTML5 and CSS3: A Perfect Reference for Web Designers

Learn to implement web designs using HTML5 and CSS3. This book focuses on the need for responsive web design and how you can leverage HTML5 and CSS3 to create interactive websites that work in the real world. You do not need be a technology expert or have a prior coding background to benefit from this book. All you need is a want to learn and a curious mind to explore the full spectrum of features HTML5 and CSS3 have to offer. Table of Contents 5 About the Author 14 About the Technical Reviewer 15 Acknowledgments 16 Chapter 1: Introduction to Web Development 17 Need for Web Development 17 Technologies Used in Web Development 19 How HTML Works in a Web Browser 21 HTML Elements 24 Structural Elements 24 Text Elements 25 Multimedia Elements 26 Form Elements 27 Scripting Elements 28 HTML Page Structure 28 The Basic Structure of an HTML Page 29 How CSS Works 31 The Problem CSS Solves 34 CSS Selectors 36 Summary 38 Chapter 2: HTML5 and Responsive Web Design 39 What HTML5 Features Are Supported by Browsers? 39 How to Write HTML5 Pages 42 Writing HTML5 Code Is Easy 43 Semantic Elements in HTML5 45 New Semantic Elements 47 Text-Level Semantics in HTML5 68 Why Are Text-Level Semantics Important? 71 How to Use Text-Level Semantics 72 Audio and Video Capabilities of HTML5 72 Summary 76 Chapter 3: Cascading Style Sheets and Layouts 77 CSS and Responsive Design 77 Using Floats 79 Building a Float Layout 87 Box-Sizing or Border-Box 90 Introduction to Flexboxes 95 Flexbox Overview 97 Arranging the Flex Items 100 Properties of Flex 104 Building a Flexbox Layout 106 Introduction to CSS Grid 109 CSS Grid: Revolutionizing Web Layout Design 110 What Is a CSS Grid? 111 Defining a Grid 111 Placing Grid Items 111 Grid Lines and Areas 111 Alignment and Spacing 112 Responsive Design with CSS Grid 112 Browser Support 112 Sizing Grid Columns and Rows 113 Placing and Aligning Grid Items 115 Building a CSS Grid Layout 118 Summary 120 Chapter 4: Media Queries 121 What Are Media Queries? 121 Common Media Features 122 Significance of Media Queries 124 How Does a Media Query Work? 124 Building a Simple Media Query Project 130 Summary 135 Chapter 5: CSS Selectors, Color Modes, and More 136 Exploring the Power of CSS3 136 Understanding the Building Blocks of Styling 139 The Power of Vendor Prefixes 141 Multiple Columns and Responsive Design in CSS3 144 Beautifying the Column Layout 147 Word Wrapping 148 New CSS3 Selectors 149 The Universal Selector 149 Attribute Selectors 150 Negation Selector 150 Adjacent Sibling Selector 150 General Sibling Selector 151 First Child Selector 151 Last Child Selector 151 Empty Selector 152 Nth Child Selector 152 Root Selector 152 CSS3 String Manipulation Attribute Selectors 153 Attribute Selectors Recap 153 Substring Matching Attribute Selectors 153 Prefix Match 154 Suffix Match 154 Substring Match 155 Word Match 155 Practical Examples 155 Custom Web Typography 156 Web Fonts 157 Font Stacks 157 Text Effects and Decorations 157 Variable Fonts 158 Animations and Transitions 158 @font-face Typography in Responsive Design 159 Font Selection 159 Font Formats 160 Media Queries 160 Fluid Typography 161 Performance Optimization 161 CSS3 Color Formats 162 RGBA and HSLA 162 HEX with Alpha Channel 162 CSS Named Colors 163 Hue Saturation Lightness 163 RGB with Percentage 163 Transparent 164 Summary 165 Chapter 6: Animations and Transitions in CSS3 166 Animating with CSS3 166 What Are the Animation Properties? 167 Animating an Object 168 CSS3 Transitions 170 Understanding CSS3 Transitions 170 Key Concepts of CSS3 Transitions 170 Implementing CSS3 Transitions 171 The Properties of Transition 173 transition-property 173 transition-duration 174 transition-timing-function 174 transition-delay 175 The Transition Shorthand Property 175 transition 175 transition-property 176 transition-duration 176 transition-timing-function 177 transition-delay 177 Understanding Timing Functions 178 The Basics of Timing Functions 178 Common Timing Functions 178 linear 178 ease 179 ease-in 179 ease-out 179 ease-in-out 179 Creating Custom Timing Functions 180 Experimentation and Fine-Tuning 180 CSS3 2D Transitions 180 Understanding CSS3 2D Transformations 181 Translation 181 Scaling 181 Rotation 182 Skewing 182 Origin Manipulation 183 Combining Transformations 183 CSS3 3D Transformations 184 Understanding CSS3 3D Transformations 184 Key Concepts of CSS3 3D Transformations 184 Perspective 184 Transformations in 3D Space 185 Combining Transformations 185 Implementing CSS3 3D Transformations 185 Setting the Perspective 185 Defining 3D Transformations 186 Combining and Experimenting 186 Summary 187 Chapter 7: Background and Shadows in CSS 188 Text Shadows with CSS3 188 Allowed Color Values 190 How to Prevent a Text Shadow 191 An Embossed Text Shadow Effect 192 Multiple Text Shadows 194 Box Shadows 196 Understanding the box-shadow Property 197 Basic Box Shadows 198 Multiple Shadows for Complex Effects 198 Inset Shadows: Creating Sunken Elements 199 Creating Text Shadows 200 Background Gradients 201 Repeating Gradients 205 Multiple Background Images 208 Sizable Icons for Responsive Design 211 Best Practices for Using Scalable Icons in Responsive Design 212 Summary 214 Chapter 8: Forms with HTML 215 HTML5 Forms 215 Decoding the HTML5 Form Elements 219 Input Type 220 required 220 placeholder 221 autofocus 221 Points to Consider 222 autocomplete 223 Usage of autocomplete Attribute 223 dropdown and Its Associated Values 225 The Element 225 The Element with the list Attribute 226 HTML5 Input Types 229 Text Input 231 Password Input 233 Number Input 234 Email Input 235 URL Input 237 Tel Input 238 Date Input 239 Time Input 240 Datetime Input 241 Month Input 243 Week Input 244 Color Input 245 Checkbox Input 246 Radio Input 247 File Input 248 Search Input 250 Range Input 251 Submit Input 252 Reset Input 253 Button Input 253 Polyfill Nonsupportive Browsers 254 Summary 256 Chapter 9: Cross-Browser Challenges and How to Resolve Them 257 Cross-Browser Challenges 257 Progressive Enhancement: Building from the Ground Up 258 Graceful Degradation: Starting at the Pinnacle 259 Balancing Act: Which Approach to Choose? 259 Progressive Enhancement vs. Graceful Degradation 260 When to Choose Progressive Enhancement 261 When to Choose Graceful Degradation 262 Making the Choice: Balancing Priorities 262 Accommodating Older Versions of Internet Explorer 263 Modernizr and How It Is Used in Responsive Design 264 What Is Modernizr? 265 Why Is Modernizr Important for Responsive Design? 265 Using Modernizr in Responsive Design 266 Modernizr and Its Support for HTML5 268 Understanding Modernizr: A Brief Overview 269 HTML5: The Evolution of Web Standards 269 Modernizr and HTML5 Feature Detection 269 Adding Media Query Capabilities for Internet Explorer 6, 7, and 8 272 Understanding the Problem: Limited Media Query Support 272 Introducing Modernizr’s Feature Detection 272 Using Modernizr for Min/Max Media Queries 272 Conditional Loading with Modernizr 274 Understanding Conditional Loading 274 The Role of Modernizr 275 Advantages of Conditional Loading with Modernizr 275 Implementing Conditional Loading with Modernizr 276 Summary 277 Index 278