Responsive Web Design with HTML 5 and CSS, 9th Edition PDF by Jessica Minnick

By

Responsive Web Design with HTML 5 and CSS, 9th Edition

By Jessica Minnick

Responsive Web Design with HTML 5 and CSS, 9th Edition PDF 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

This book is US$10
To get free sample pages OR Buy this book


Share this Book!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.