Responsive Web Design with HTML 5 and CSS, 9th Edition
By Jessica Minnick
Contents:
Preface ix
Responsive Web Design
with HTML 5 and CSS
CHAPTER ONE
Introduction to the Internet
and Web Design
Objectives HTML 1
Introduction HTML 2
Project — Create a Basic Webpage HTML 2
Roadmap HTML 3
Exploring the Internet HTML 3
World Wide Web HTML 4
Protocols HTML 6
Web Browsers HTML 7
Types of Websites HTML 9
Planning a Website HTML 11
Purpose of the Website HTML 11
Target Audience HTML 12
Multiplatform Display HTML 13
Wireframe HTML 14
Site Map HTML 14
Graphics HTML 17
Navigation HTML 17
Typography HTML 18
Color HTML 19
Accessibility HTML 20
Accessibility Standards for Webpage Developers HTML 20
Planning Checklist HTML 21
Understanding the Basics of HTML HTML 21
HTML Elements and Attributes HTML 22
Technologies Related to HTML HTML 24
HTML 5 HTML 24
Understanding the Role of Other Web Programming Languages HTML 24
JavaScript HTML 24
jQuery HTML 25
PHP HTML 25
ASP HTML 25
Using Web Authoring Tools HTML 25
Text Editors HTML 25
WYSIWYG Editors HTML 28
Online Code Editors HTML 29
Creating a Basic Webpage HTML 30
To Start Notepad++ and Create a Blank Document HTML 31
To Add Basic HTML Tags to a Document HTML 32
To Add a Title and Text to a Webpage HTML 33
To Save a Webpage HTML 34
To View a Webpage in a Browser HTML 36
Using a Different Text Editor HTML 36
Chapter Summary HTML 37
Apply Your Knowledge HTML 38
Extend Your Knowledge HTML 39
Analyze, Correct, Improve HTML 40
In the Lab HTML 41
Consider This: Your Turn HTML 44
CHAPTER TWO
Building a Webpage Template with HTML 5
Objectives HTML 47
Introduction HTML 48
Project — Plan and Build a Website HTML 48
Roadmap HTML 49
Designing a Website HTML 50
Site Map HTML 50
Wireframe HTML 51
File Management HTML 52
To Create a Website Folder and Subfolders HTML 53
Using HTML 5 Semantic Elements HTML 54
Header Element HTML 55
Nav Element HTML 55
Main Element HTML 55
Footer Element HTML 55
Creating a Webpage Template HTML 56
To Create a Webpage Template Document HTML 57
To Add HTML 5 Semantic Elements to a Webpage Template HTML 58
To Add a Title to a Webpage Template HTML 59
Comments HTML 59
To Add Comments to a Webpage Template HTML 60
Heading Elements HTML 61
Webpage Content HTML 62
To Add Content to the Header Section HTML 62
Using Symbol Entities HTML 63
To Add Text and Nonbreaking Spaces to the Nav Section HTML 64
To Add Content and a Symbol to the Footer Section HTML 66
Validating HTML Documents HTML 66
To Validate the Webpage Template HTML 67
To Validate an HTML Document with Errors HTML 68
Creating a Home Page Using a Webpage Template HTML 69
To Create a Home Page Using a Webpage Template and Add Content HTML 69
To Display a Home Page in the Default Browser HTML 70
Chapter Summary HTML 71
Apply Your Knowledge HTML 72
Extend Your Knowledge HTML 74
Analyze, Correct, Improve HTML 75
In the Lab HTML 76
Consider This: Your Turn HTML 81
CHAPTER THREE
Enhancing a Website with Images and Links Objectives HTML 83
Introduction HTML 84
Project — Add Images and Links to a Website HTML 84
Roadmap HTML 85
Adding Images to a Website HTML 86
Image File Formats HTML 86
Image Dimensions and File Size HTML 90
Image File Names HTML 92
Image Tag and Its Attributes HTML 92
To Copy Files into the Images Folder HTML 94
To Add an Image to a Website Template HTML 96
To Add an Image to the Home Page HTML 97
Exploring Div Elements HTML 98
Div Element HTML 98
Div Attributes HTML 98
To Add Div Elements to a Website Template HTML 100
To Add a Div Element to the Home Page HTML 101
Adding Links to a Webpage HTML 102
Anchor Element HTML 103
Relative Links HTML 103
Absolute Links HTML 103
Bookmarks HTML 104
Image Links HTML 104
Email Links HTML 104
Telephone Links HTML 105
To Add Relative Links in a Website Template HTML 106
To Add an Email Link in a Website Template HTML 107
To Add Relative Links in the Home Page HTML 108
To Add an Email Link in the Home Page HTML 109
Adding Lists HTML 110
To Create the About Us Webpage and Add Content HTML 112
To Add Unordered Lists to the About Us Webpage HTML 114
To Add a Description List and Absolute Link to the About Us Webpage HTML 116
To Save the About Us Webpage and View It in a Browser HTML 118
To Create the Contact Us Webpage and Add a Heading and Links HTML 120
Embedding a Map HTML 121
To Embed a Map within a Webpage HTML 123
To Preview a Website in a Browser and Test Page Links HTML 125
To Validate the About Us and Contact Us Pages HTML 126
Chapter Summary HTML 126
Apply Your Knowledge HTML 128
Extend Your Knowledge HTML 129
Analyze, Correct, Improve HTML 131
In the Lab HTML 132
Consider This: Your Turn HTML 139
CHAPTER FOUR
Designing Webpages with CSS Objectives HTML 143
Introduction HTML 144
Project — Format Webpages with CSS HTML 144
Roadmap HTML 145
Using Cascading Style Sheets HTML 145
Inline Styles HTML 147
Embedded Style Sheets HTML 147
External Style Sheets HTML 148
Style Sheet Precedence HTML 148
CSS Basics HTML 149
CSS Text Properties HTML 150
CSS Colors HTML 151
Understanding Inline Elements and Block Elements HTML 153
CSS Box Model HTML 154
Creating an External Style Sheet HTML 156
Selectors HTML 156
To Create a CSS File and a Style Rule for the Body Element HTML 157
Linking an HTML Document to a CSS File HTML 159
To Link HTML Pages to the CSS File HTML 159
Creating a Webpage Layout HTML 161
Float and Clear Properties HTML 161
Aligning Webpage Content HTML 162
To Position Elements HTML 163
Creating Style Rules for Structural Elements HTML 165
Use a List for Navigation Links HTML 165
To Code the Navigation Links as an Unordered List HTML 166
CSS List Properties HTML 168
To Style the Navigation Using CSS HTML 169
Making Responsive Images HTML 171
To Add a Hero Image HTML 172
To Remove Height and Width Attributes from img Elements HTML 174
To Modify the Style Rule for the Main Element HTML 176
To Create a Style Rule for the Footer Element HTML 177
Creating Style Rules for ID Selectors HTML 179
To Create Style Rules for IDs on the About Us Page HTML 179
To Create Style Rules for IDs on the
Contact Page HTML 182
Creating Class Attributes HTML 183
To Create and Style the action Class HTML 184
To Create and Style the external-link Class HTML 186
To Create and Style the map Class HTML 187
CSS Reset HTML 188
To Create a CSS Reset HTML 190
Improving the Appearance of the
Forward Fitness Club Website HTML 191
To Remove the heading 1 Elements HTML 191
To Modify a Style Rule HTML 192
Adding Comments to CSS Files HTML 193
To Add Comments to a CSS File HTML 193
Validating CSS Files HTML 195
To Validate the CSS File HTML 195
To Validate a CSS File with Errors HTML 197
Chapter Summary HTML 198
Apply Your Knowledge HTML 199
Extend Your Knowledge HTML 201
Analyze, Correct, Improve HTML 202
In the Lab HTML 204
Consider This: Your Turn HTML 212
CHAPTER FIVE
Responsive Design Part 1: Designing for Mobile Devices Objectives HTML 215
Introduction HTML 216
Project — Redesign a Website for Mobile Devices HTML 216
Roadmap HTML 217
Exploring Responsive Design HTML 218
Designing for Mobile Devices HTML 219
Using Responsive Design HTML 222
Creating a Fluid Layout HTML 223
Following a Mobile-First Strategy HTML 225
Styles for Content on Mobile Devices HTML 225
Meta Viewport Element HTML 227
To Add the Meta Viewport Element for Responsive Design HTML 228
Mobile Simulator HTML 229
Steps in a Mobile-First Strategy HTML 232
To Add a Comment for Mobile Styles HTML 232
Sticky Elements HTML 233
To Create a Sticky Header HTML 233
Responsive Navigation HTML 237
To Edit the nav Style Rule for Mobile Viewports HTML 238
To Edit the nav ul Style Rule for Mobile Viewports HTML 238
To Edit the nav li Style Rule for Mobile Viewports HTML 239
Custom Fonts HTML 240
To Integrate a Custom Google Font HTML 242
Pseudo-Classes HTML 247
To Remove the Top Border for the nav li Style Rule HTML 248
To Edit the nav li a Style Rule HTML 249
Analyze the Home Page for Mobile-First Design HTML 249
To Modify the Home Page HTML 249
To Create a Style Rule for the mobile Class HTML 252
To Add a Style Rule for the tablet-desktop Class HTML 252
Rounded Corners HTML 253
To Add Style Rules for the tel-link Class HTML 254
To Add a Style Rule for the hours Class HTML 255
To Modify the Style Rule for the main Element HTML 256
Analyze the About Us Page for Mobile-First Design HTML 257
To Modify the About Us Page HTML 258
To Add a Style Rule for the round Class HTML 259
To Modify a Style Rule to Use a Single Column HTML 260
Analyze the Contact Us Page for Mobile-First Design HTML 261
To Modify the Contact Us Page HTML 262
To Modify #contact a and .map Style Rules HTML 262
Mobile-Friendly Test HTML 263
To Validate the Style Sheet HTML 265
To Validate the HTML Files HTML 266
Chapter Summary HTML 266
Apply Your Knowledge HTML 268
Extend Your Knowledge HTML 269
Analyze, Correct, Improve HTML 270
In the Lab HTML 271
Consider This: Your Turn HTML 276
CHAPTER SIX
Responsive Design Part 2: Designing for Tablet and Desktop Devices Objectives HTML 279
Introduction HTML 280
Project — Use Media Queries to Design for Tablet and Desktop Viewports HTML 280
Roadmap HTML 281
Using Media Queries HTML 281
Breakpoints HTML 282
Media Query Expressions HTML 283
Adding Media Queries to an External Style Sheet HTML 285
Designing for Tablet Viewports HTML 286
To Create a Media Query for a Tablet Viewport HTML 286
Page Design for a Tablet Viewport HTML 286
To Show and Hide Content for a Tablet Viewport HTML 287
To Remove a Sticky Position for the Header for a Tablet Viewport HTML 289
Navigation Design for a Tablet Viewport HTML 290
To Style the Navigation Area for a Tablet Viewport HTML 290
About Us Page Design for a Tablet Viewport HTML 292
To Style Unordered List Elements within the Main Element for a Tablet Viewport HTML 292
To Restore Previous Style Rules and Move Them into the Tablet Media Query HTML 294
Contact Us Page Design for a Tablet Viewport HTML 295
To Modify the Contact Us Page HTML 296
To Style the Map for a Tablet Viewport HTML 297
Designing for Desktop Viewports HTML 298
To Create a Media Query for a Desktop Viewport HTML 299
To Create a Style Rule for the Header Element in the Desktop Media Query HTML 299
To Style the Navigation Element for a Desktop Viewport HTML 300
To Style the Unordered List in the Navigation Area for a Desktop Viewport HTML 301
To Style the List Item Links in the Navigation
Area for a Desktop Viewport HTML 302
To Style the Main Element for a Desktop Viewport HTML 304
To Style heading 1 Elements Within the main Element for a Desktop Viewport HTML 305
About Us Page Design for a Desktop Viewport HTML 306
To Create a Multiple-Column Layout for a Desktop Viewport HTML 306
Media Query for Large Viewports HTML 308
To Create a Media Query for Large Desktop Viewports HTML 309
Media Query for Print HTML 310
To Create a Media Query for Print HTML 310
Modifying Breakpoints HTML 312
To Determine the Viewport Width for the Desktop Viewport HTML 313
To Set a New Breakpoint for
the Desktop Media Query HTML 314
Using Dynamic Pseudo-Classes HTML 315
To Add Dynamic Pseudo-Classes to a Style Sheet HTML 316
Using Gradients HTML 318
To Add a Linear Gradient HTML 319
To Display a Website in Multiple Viewports HTML 320
To Validate the Style Sheet HTML 322
To Validate the HTML Files HTML 322
Chapter Summary HTML 323
Apply Your Knowledge HTML 324
Extend Your Knowledge HTML 325
Analyze, Correct, Improve HTML 327
In the Lab HTML 329
Consider This: Your Turn HTML 335
CHAPTER SEVEN
Improving Web Design with New Page Layouts Objectives HTML 337
Introduction HTML 338
Project — Use HTML 5 Structural Elements to Redesign a Website HTML 338
Roadmap HTML 340
Using HTML 5 Semantic Elements HTML 340
Article Element HTML 341
Aside Element HTML 343
Section Element HTML 344
Figure and Figure Caption Elements HTML 346
Improving Design with CSS HTML 347
CSS Grid Layout HTML 347
Opacity HTML 348
CSS Shadows HTML 349
CSS Box Sizing HTML 349
Redesigning the Home Page HTML 350
To Add a New div Element to the Home Page HTML 351
To Add figure Elements to the Home Page HTML 352
To Update the Style Sheet for the New Design in a Mobile Viewport HTML 354
To Use the CSS Grid in a Tablet Viewport HTML 357
To Add New Style Rules in a Desktop Viewport HTML 360
To Apply a Text Shadow HTML 362
Updating the About Us Page HTML 364
To Add Section Elements to the About Us Page HTML 364
Creating the Nutrition Page HTML 365
CSS Grid Spans HTML 367
To Create the Nutrition Page HTML 367
To Add article and aside Elements
to the Nutrition Page HTML 368
Structural Pseudo-Class, nth-of-type() HTML 372
To Style the Nutrition Page for a Mobile Viewport HTML 372
To Style the Nutrition Page for a Tablet Viewport HTML 375
To Style the Nutrition Page for a Desktop Viewport HTML 378
Adding a Favicon HTML 378
To Add a Favicon to a Website HTML 380
To Validate the Style Sheet HTML 383
To Validate the HTML Files HTML 383
Chapter Summary HTML 384
Apply Your Knowledge HTML 385
Extend Your Knowledge HTML 387
Analyze, Correct, Improve HTML 388
In the Lab HTML 389
Consider This: Your Turn HTML 396
CHAPTER EIGHT
Creating Tables and Forms
Objectives HTML 399
Introduction HTML 400
Project—Create a Table and a Form HTML 400
Roadmap HTML 402
Discovering Tables HTML 402
Creating a Table with HTML Elements HTML 403
Table Borders, Headers, and Captions HTML 404
Table Element Attributes HTML 406
Use of Tables HTML 407
Planning the Table HTML 408
To Create the Classes Page HTML 408
To Add a div Element to the Classes Page HTML 409
To Add a Table to the Classes Page HTML 411
Styling Table Elements HTML 415
Styling Tables for Responsive Web Design HTML 416
To Style a Table for a Tablet Viewport HTML 417
To Style a Table for a Large Desktop Viewport HTML 422
Creating Webpage Forms HTML 423
Form Controls HTML 424
Form Labels HTML 429
Attributes of HTML Tags Used to Create Forms HTML 429
Form Processing HTML 431
To Add a Form, Fieldset, Legend, Labels, and Text Input Controls to the Contact Us Page HTML 432
To Add email and tel Input Controls to a Form HTML 433
To Add Checkbox Controls to a Form HTML 434
To Add a select Element to a Form HTML 435
To Add a textarea Element to a Form HTML 437
To Add a Submit Button to a Form HTML 438
Styling Forms HTML 438
To Style a Form for a Mobile Viewport HTML 439
To Style a Form for a Tablet Viewport HTML 442
To Style a Form for a Desktop Viewport HTML 443
To Validate the Style Sheet HTML 444
To Validate the HTML Files HTML 445
Chapter Summary HTML 445
Apply Your Knowledge HTML 447
Extend Your Knowledge HTML 449
Analyze, Correct, Improve HTML 450
In the Lab HTML 452
Consider This: Your Turn HTML 462
CHAPTER NINE
Integrating Audio and Video
Objectives HTML 465
Introduction HTML 466
Project — Add Audio and Video to a Webpage HTML 466
Roadmap HTML 468
Using Multimedia HTML 468
Creating Multimedia Files HTML 469
Embedded vs. External Multimedia HTML 471
Media Players and Plug-Ins HTML 472
HTML 5 and Multimedia HTML 473
Flash HTML 473
Java Applets HTML 473
Object Element HTML 474
Integrating Audio HTML 474
Audio File Formats HTML 475
File Compression and Codecs HTML 475
HTML 5 audio Element HTML 476
To Add Audio to the Classes Page HTML 478
Integrating Video HTML 480
Video File Formats HTML 480
HTML 5 video Element HTML 481
Using the video Element HTML 481
To Add Video to the About Us Page HTML 483
To Style the Video HTML 484
Making Videos Accessible HTML 486
To Create a Captions File HTML 488
To Add a Track Element HTML 490
To View Video Captions Using Web Server for Chrome HTML 491
To Validate the Style Sheet HTML 495
To Validate the HTML Files HTML 495
Chapter Summary HTML 496
Apply Your Knowledge HTML 497
Extend Your Knowledge HTML 498
Analyze, Correct, Improve HTML 498
In the Lab HTML 500
Consider This: Your Turn HTML 504
CHAPTER TEN
Creating Interactivity with CSS and JavaScript Objectives HTML 507
Introduction HTML 508
Project — Add Interactivity to a Webpage HTML 508
Roadmap HTML 508
Using CSS to Create Interactivity HTML 510
To Apply a CSS Transform to a Webpage HTML 512
To Add Animation to a Webpage HTML 515
Incorporating JavaScript HTML 517
To Create a New Nav Element for a Mobile Viewport HTML 519
To Style the New Nav Element for a Mobile Viewport HTML 523
To Modify Previous Navigation Style Rules for a Mobile Viewport HTML 527
JavaScript Terminology HTML 531
Writing JavaScript Code HTML 533
DOM Methods HTML 534
Using if/else Statements HTML 535
jQuery HTML 535
To Create a JavaScript File HTML 536
To Create the hamburger( ) Function HTML 537
To Call the hamburger( ) Function HTML 540
To Add and Style a Video Element
on the About Us Page HTML 541
To Create and Call the burpees( ) Function HTML 543
To Create and Call the plank( ) Function HTML 546
To Create and Call the mountain( ) Function HTML 548
To Create and Call the discount( ) Function HTML 549
To Validate the Style Sheet HTML 552
To Validate the HTML Files HTML 552
Chapter Summary HTML 553
Apply Your Knowledge HTML 554
Extend Your Knowledge HTML 555
Analyze, Correct, Improve HTML 557
In the Lab HTML 558
Consider This: Your Turn HTML 567
CHAPTER ELEVEN
Publish, Promote, and
Maintain a Website
Objectives HTML 569
Introduction HTML 570
Project — Publish and Promote a Website HTML 570
Roadmap HTML 572
Using Social Media HTML 572
Facebook HTML 573
Twitter HTML 574
YouTube HTML 576
Instagram HTML 578
Pinterest HTML 578
Other Social Media Options HTML 579
Blogs HTML 579
Adding Facebook and Twitter Links to a Website HTML 580
To Add Social Media Icons and
Links to the Home Page HTML 582
To Add Social Media Icons and Links to Webpages HTML 584
To Style the Copyright Class HTML 585
To Style the Social Class HTML 586
Finding a Website HTML 589
Search Engines HTML 589
Search Engine Optimization HTML 589
Meta Tags HTML 591
To Modify Titles and Add a Description
Meta Tag to a Webpage HTML 592
To Create a Sitemap File HTML 594
Publishing a Website HTML 595
Domain Name HTML 595
Website Hosting HTML 596
Publishing a Website HTML 597
FTP Clients HTML 597
To Start FileZilla and Connect to a Remote Server HTML 599
To Upload Folders and Files to a Remote Server HTML 600
To View and Test a Published Website HTML 602
Promoting a Website HTML 603
Registering with Search Engines HTML 604
Website Development Life Cycle HTML 604
Website Planning HTML 605
Website Analysis HTML 606
Website Design and Development HTML 606
Website Testing HTML 608
Implementation HTML 610
Maintenance HTML 610
Being an Observant Web User HTML 611
To Create a Skip to Content Link HTML 612
To Style the Skip to Content Link HTML 612
To Minify a CSS File HTML 615
To Link HTML Files to the Minified CSS File HTML 616
Project Management HTML 617
Content Updates HTML 618
Copyright Law HTML 618
E-Commerce HTML 619
To Validate the HTML Files HTML 620
Chapter Summary HTML 621
Apply Your Knowledge HTML 622
Extend Your Knowledge HTML 623
Analyze, Correct, Improve HTML 623
In the Lab HTML 625
Consider This: Your Turn HTML 630
CHAPTER TWELVE
Getting Started with Bootstrap
Objectives HTML 633
Introduction HTML 634
Project — Create a Website Using Bootstrap HTML 634
Roadmap HTML 634
Exploring Bootstrap HTML 636
To Create a Bootstrap Webpage HTML 638
Bootstrap Navigation Bar HTML 641
To Create a Bootstrap Navigation Bar HTML 644
Bootstrap Responsive Containers HTML 648
Bootstrap Jumbotron HTML 648
Margins and Padding HTML 649
Images HTML 650
Bootstrap Colors HTML 651
Styling Buttons HTML 651
Custom Styles HTML 652
To Create a Bootstrap Jumbotron HTML 652
To Create Custom Style Rules HTML 654
Using jQuery HTML 656
Add jQuery Code HTML 657
Using the Bootstrap Grid System HTML 659
Bootstrap Typography Classes HTML 661
Add Columns Using Bootstrap HTML 661
To Create a Footer Element HTML 665
Add Bootstrap Classes to the About Us Page HTML 668
Styling Tables with Bootstrap HTML 674
Add Bootstrap Table Classes to the Classes Page HTML 675
To View the Website in a Mobile Viewport HTML 677
To View the Website in a Tablet Viewport HTML 677
To View the Website in a Desktop Viewport HTML 678
Content Management Systems HTML 679
To Validate the HTML Files HTML 681
Chapter Summary HTML 682
Apply Your Knowledge HTML 683
Extend Your Knowledge HTML 685
Analyze, Correct, Improve HTML 686
In the Lab HTML 688
Consider This: Your Turn HTML 699
Appendices
APPENDIX A
HTML Quick Reference
Common HTML Elements APP 1
APPENDIX B
CSS Quick Reference
CSS Properties APP 13
APPENDIX C
Symbols Quick Reference
Using Symbols APP 25
APPENDIX D
Accessibility Standards
for Webpage Developers
Making the Web Accessible APP 27
Section 508 Guidelines Examples APP 27
WAI Guidelines APP 30
Index IND 1