HTML5 and CSS3: Building Responsive Websites

Design robust, powerful, and above all, modern websites across all manner of devices with ease using HTML5 and CSS3
HTML5 and CSS3: Building Responsive Websites Book Cover
Preview in Mapt
Code Files

HTML5 and CSS3: Building Responsive Websites

Thoriq Firdaus, Ben Frain, Benjamin LaGrone

6 customer reviews
Design robust, powerful, and above all, modern websites across all manner of devices with ease using HTML5 and CSS3
Mapt Subscription
FREE
€29.98/m after trial
eBook
€49.56
RRP €70.78
Save 29%
Print + eBook
€73.99
RRP €73.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
€0.00
€49.56
€73.99
€29.99 p/m after trial
RRP €70.78
RRP €73.99
Subscription
eBook
Print + eBook
Start 14 Day Trial

Frequently bought together


HTML5 and CSS3: Building Responsive Websites Book Cover
HTML5 and CSS3: Building Responsive Websites
€ 70.78
€ 49.56
HTML5 and CSS3: Building Responsive Websites
Oct 2016
709 pages
€ 49.56
Enduring CSS Book Cover
Enduring CSS
€ 33.58
€ 23.52
Enduring CSS
Jan 2017
134 pages
€ 23.52
Buy 2 for €35.72
Save €57.20
Add to Cart

Book Details

ISBN 139781787124813
Paperback709 pages

Book Description

Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. The Internet is going mobile. Desktop-only websites just aren’t good enough anymore. With mobile internet usage still rising and tablets changing internet consumption habits, you need to know how to build websites that will just “work,” regardless of the devices used to access them. This Learning Path course explains all the key approaches necessary to create and maintain a modern responsive design using HTML5 and CSS3.

Our first module is a step-by-step introduction to ease you into the responsive world, where you will learn to build engaging websites. With coverage of Responsive Grid System, Bootstrap, and Foundation, you will discover three of the most robust frameworks in responsive web design. Next, you’ll learn to create a cool blog page, a beautiful portfolio site, and a crisp professional business site and make them all totally responsive.

Packed with examples and a thorough explanation of modern techniques and syntax, the second module provides a comprehensive resource for all things “responsive.” You’ll explore the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won’t just be built “right” for today, but in the future too.

The last and the final module is your guide to obtaining full access to next generation devices and browser technology. Create responsive applications that make snappy connections for mobile browsers and give your website the latest design and development advantages to reach mobile devices. At the end of this course, you will learn to get and use all the tools you need to build and test your responsive web project performance and take your website to the next level.

This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

Table of Contents

Chapter 1: Responsive Web Design
Responsive web design in a nutshell
A look into responsive frameworks
Responsive web design inspiration sources
Summary
Chapter 2: Web Development Tools
Choosing a code editor
Time for action – installing Sublime Text Package Control
Time for action – installing XAMPP
Managing project dependency with Bower
Time for action – installing Node.js
Time for action – installing Bower
Summary
Chapter 3: Constructing a Simple Responsive Blog with Responsive.gs
Responsive.gs components
Using HTML5 elements for semantic markups
Examining the blog's wireframe
Organizing project directories and files
Time for action – creating and organizing project directories and assets
The blog HTML structures
Time for action – constructing the blog
Summary
Chapter 4: Enhancing the Blog Appearance
Using CSS3
Working with Koala
Time for action – integrating project directory into Koala and combining the style sheets
Thinking mobile first
Composing the blog styles
Time for action – composing the base style rules
Time for action – enhancing the header and the navigation appearance with CSS
Time for action – enhancing the content section appearance with CSS
Time for action – enhancing the footer section appearance with CSS
Optimize the blog for desktop
Time for action – composing style rules for desktop
Making Internet Explorer more capable with polyfills
Time for action – patch Internet Explorer with polyfills
Summary
Chapter 5: Developing a Portfolio Website with Bootstrap
The Bootstrap components
Digging into Bootstrap
Using font icons
Examining the portfolio website layout
Project directories, assets, and dependencies
Time for action – organizing project directories, assets, and installing project dependencies with Bower
The portfolio website HTML structure
Time for action – building the website HTML structure
Summary
Chapter 6: Polishing the Responsive Portfolio Website with LESS
Basic LESS syntax
External style sheet references
Time for action – creating style sheets and organizing external style sheet references
Working with Koala
Time for action – compiling LESS into CSS using Koala
Polishing the portfolio website with LESS
Time for action – composing the website styles with LESS syntax
Improve and make the website functioning with JavaScript
Time for action – compiling JavaScript with Koala
Summary
Chapter 7: A Responsive Website for Business with Foundation
Examining the website layout
A look into Foundation
Additional required assets
The project directories, assets, and dependencies
Time for action – organizing the project directories, assets, and dependencies
Time for action – building the website's HTML structure
Summary
Chapter 8: Extending Foundation
Syntactically Awesome Style Sheets
Project recap
Style sheet organizations
Time for action – organizing and compiling style sheets
The website's look and feel
Time for action – build on the website
Fine-tuning the website
Time for action – compiling JavaScript and styling the website with media queries
Summary
Chapter 9: The Essentials of Responsive Web Design
Beginning our quest
Defining responsive web design
Setting browser support levels
Our first responsive example
The shortcomings of our example
Summary
Chapter 10: Media Queries – Supporting Differing Viewports
Why media queries are needed for a responsive web design
Media query syntax
Combining media queries
Using media queries to alter a design
Considerations for organizing and authoring media queries
Combine media queries or write them where it suits?
The viewport meta tag
Media Queries Level 4
Summary
Chapter 11: Fluid Layouts and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Introducing Flexbox
Getting Flexy
Responsive images
Summary
Chapter 12: HTML5 for Responsive Web Designs
HTML5 markup – understood by all modern browsers
Starting an HTML5 page the right way
Easy-going HTML5
New semantic elements in HTML5
HTML5 text-level semantics
Obsolete HTML features
Putting HTML5 elements to use
WCAG and WAI-ARIA for more accessible web applications
Embedding media in HTML5
Responsive HTML5 video and iFrames
A note about 'offline first'
Summary
Chapter 13: CSS3 – Selectors, Typography, Color Modes, and New Features
No one knows it all
Anatomy of a CSS rule
Quick and useful CSS tricks
Word wrapping
Facilitating feature forks in CSS
New CSS3 selectors and how to use them
CSS3 structural pseudo-classes
CSS custom properties and variables
CSS calc
CSS Level 4 selectors
Web typography
New CSS3 color formats and alpha transparency
Summary
Chapter 14: Stunning Aesthetics with CSS3
Text shadows with CSS3
Box shadows
Background gradients
Repeating gradients
Background gradient patterns
Multiple background images
High-resolution background images
CSS filters
A warning on CSS performance
Summary
Chapter 15: Using SVGs for Resolution Independence
A brief history of SVG
The graphic that is a document
Creating SVGs with popular image editing packages and services
Inserting SVGs into your web pages
Inserting an SVG inline
What you can do with each SVG insertion method (inline, object, background-image, and img)
Extra SVG capabilities and oddities
Animating SVG with JavaScript
Optimising SVGs
Using SVGs as filters
A note on media queries inside SVGs
Summary
Chapter 16: Transitions, Transformations, and Animations
What CSS3 transitions are and how we can use them
CSS3 2D transforms
CSS3 3D transformations
Animating with CSS3
Summary
Chapter 17: Conquer Forms with HTML5 and CSS3
HTML5 forms
Understanding the component parts of HTML5 forms
HTML5 input types
How to polyfill non-supporting browsers
Styling HTML5 forms with CSS3
Summary
Chapter 18: Approaching a Responsive Web Design
Get designs in the browser as soon as possible
View and use the design on real devices
Embracing progressive enhancement
Defining a browser support matrix
Tiering the user experience
Linking CSS breakpoints to JavaScript
Avoid CSS frameworks in production
Coding pragmatic solutions
Use the simplest code possible
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
The next big things
Summary
Chapter 19: Responsive Elements and Media
Introduction
Resizing an image using percent width
Responsive images using the cookie and JavaScript
Making your video respond to your screen width
Resizing an image using media queries
Changing your navigation with media queries
Making a responsive padding based on size
Making a CSS3 button glow for a loading element
Chapter 20: Responsive Typography
Introduction
Creating fluid, responsive typography
Making a text shadow with canvas
Making an inner and outer shadow with canvas
Rotating your text with canvas
Rotating your text with CSS3
Making 3D text with CSS3
Adding texture to your text with text masking
Styling alternating rows with the nth positional pseudo class
Adding characters before and after pseudo elements
Making a button with a relative font size
Adding a shadow to your font
Curving a corner with border radius
Chapter 21: Responsive Layout
Introduction
Responsive layout with the min-width and max-width properties
Controlling your layout with relative padding
Adding a media query to your CSS
Creating a responsive width layout with media queries
Changing image sizes with media queries
Hiding an element with media queries
Making a smoothly transitioning responsive layout
Chapter 22: Using Responsive Frameworks
Introduction
Using the Fluid 960 grid layout
Using the Blueprint grid layout
Fluid layout using the rule of thirds
Trying Gumby, a responsive 960 grid
The Bootstrap framework makes responsive layouts easy
Chapter 23: Making Mobile-first Web Applications
Introduction
Using the Safari Developer Tools' User Agent switcher
Masking your user agent in Chrome with a plugin
Using browser resizing plugins
Learning the viewport and its options
Adding tags for jQuery Mobile
Adding a second page in jQuery Mobile
Making a list element in jQuery Mobile
Adding a mobile, native-looking button with jQuery Mobile
Adding a mobile stylesheet for mobile browsers only using the media query
Adding JavaScript for mobile browsers only
Chapter 24: Optimizing Responsive Content
Introduction
Responsive testing using IE's Developer Tools
Browser testing – using plugins
Development environments – getting a free IDE
Virtualization – downloading VirtualBox
Getting a browser resizer for Chrome
Chapter 25: Unobtrusive JavaScript
Introduction
Writing "Hello World" unobtrusively
Creating a glowing "submit" button with the event listener
Making a button stand out when you hover over it
Resizing an element with unobtrusive jQuery
Masking a password with unobtrusive JavaScript
Using an event listener to animate an image shadow

What You Will Learn

  • Build a semantic website structure with HTML5 elements
  • Use Bower to organize website dependencies
  • Make responsive media that is optimized for the specific device on which it’s displayed, allowing images, videos, and other elements be fully appreciated
  • Make typography that’s fluidly responsive, so it’s easy to read on all devices—no more hard-to-see text on a tiny mobile screen
  • Get to know techniques for server-side and client-side media deployment, providing platforms that are scaled for any device that requests them

Authors

Continue reading

Table of Contents

Chapter 1: Responsive Web Design
Responsive web design in a nutshell
A look into responsive frameworks
Responsive web design inspiration sources
Summary
Chapter 2: Web Development Tools
Choosing a code editor
Time for action – installing Sublime Text Package Control
Time for action – installing XAMPP
Managing project dependency with Bower
Time for action – installing Node.js
Time for action – installing Bower
Summary
Chapter 3: Constructing a Simple Responsive Blog with Responsive.gs
Responsive.gs components
Using HTML5 elements for semantic markups
Examining the blog's wireframe
Organizing project directories and files
Time for action – creating and organizing project directories and assets
The blog HTML structures
Time for action – constructing the blog
Summary
Chapter 4: Enhancing the Blog Appearance
Using CSS3
Working with Koala
Time for action – integrating project directory into Koala and combining the style sheets
Thinking mobile first
Composing the blog styles
Time for action – composing the base style rules
Time for action – enhancing the header and the navigation appearance with CSS
Time for action – enhancing the content section appearance with CSS
Time for action – enhancing the footer section appearance with CSS
Optimize the blog for desktop
Time for action – composing style rules for desktop
Making Internet Explorer more capable with polyfills
Time for action – patch Internet Explorer with polyfills
Summary
Chapter 5: Developing a Portfolio Website with Bootstrap
The Bootstrap components
Digging into Bootstrap
Using font icons
Examining the portfolio website layout
Project directories, assets, and dependencies
Time for action – organizing project directories, assets, and installing project dependencies with Bower
The portfolio website HTML structure
Time for action – building the website HTML structure
Summary
Chapter 6: Polishing the Responsive Portfolio Website with LESS
Basic LESS syntax
External style sheet references
Time for action – creating style sheets and organizing external style sheet references
Working with Koala
Time for action – compiling LESS into CSS using Koala
Polishing the portfolio website with LESS
Time for action – composing the website styles with LESS syntax
Improve and make the website functioning with JavaScript
Time for action – compiling JavaScript with Koala
Summary
Chapter 7: A Responsive Website for Business with Foundation
Examining the website layout
A look into Foundation
Additional required assets
The project directories, assets, and dependencies
Time for action – organizing the project directories, assets, and dependencies
Time for action – building the website's HTML structure
Summary
Chapter 8: Extending Foundation
Syntactically Awesome Style Sheets
Project recap
Style sheet organizations
Time for action – organizing and compiling style sheets
The website's look and feel
Time for action – build on the website
Fine-tuning the website
Time for action – compiling JavaScript and styling the website with media queries
Summary
Chapter 9: The Essentials of Responsive Web Design
Beginning our quest
Defining responsive web design
Setting browser support levels
Our first responsive example
The shortcomings of our example
Summary
Chapter 10: Media Queries – Supporting Differing Viewports
Why media queries are needed for a responsive web design
Media query syntax
Combining media queries
Using media queries to alter a design
Considerations for organizing and authoring media queries
Combine media queries or write them where it suits?
The viewport meta tag
Media Queries Level 4
Summary
Chapter 11: Fluid Layouts and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Introducing Flexbox
Getting Flexy
Responsive images
Summary
Chapter 12: HTML5 for Responsive Web Designs
HTML5 markup – understood by all modern browsers
Starting an HTML5 page the right way
Easy-going HTML5
New semantic elements in HTML5
HTML5 text-level semantics
Obsolete HTML features
Putting HTML5 elements to use
WCAG and WAI-ARIA for more accessible web applications
Embedding media in HTML5
Responsive HTML5 video and iFrames
A note about 'offline first'
Summary
Chapter 13: CSS3 – Selectors, Typography, Color Modes, and New Features
No one knows it all
Anatomy of a CSS rule
Quick and useful CSS tricks
Word wrapping
Facilitating feature forks in CSS
New CSS3 selectors and how to use them
CSS3 structural pseudo-classes
CSS custom properties and variables
CSS calc
CSS Level 4 selectors
Web typography
New CSS3 color formats and alpha transparency
Summary
Chapter 14: Stunning Aesthetics with CSS3
Text shadows with CSS3
Box shadows
Background gradients
Repeating gradients
Background gradient patterns
Multiple background images
High-resolution background images
CSS filters
A warning on CSS performance
Summary
Chapter 15: Using SVGs for Resolution Independence
A brief history of SVG
The graphic that is a document
Creating SVGs with popular image editing packages and services
Inserting SVGs into your web pages
Inserting an SVG inline
What you can do with each SVG insertion method (inline, object, background-image, and img)
Extra SVG capabilities and oddities
Animating SVG with JavaScript
Optimising SVGs
Using SVGs as filters
A note on media queries inside SVGs
Summary
Chapter 16: Transitions, Transformations, and Animations
What CSS3 transitions are and how we can use them
CSS3 2D transforms
CSS3 3D transformations
Animating with CSS3
Summary
Chapter 17: Conquer Forms with HTML5 and CSS3
HTML5 forms
Understanding the component parts of HTML5 forms
HTML5 input types
How to polyfill non-supporting browsers
Styling HTML5 forms with CSS3
Summary
Chapter 18: Approaching a Responsive Web Design
Get designs in the browser as soon as possible
View and use the design on real devices
Embracing progressive enhancement
Defining a browser support matrix
Tiering the user experience
Linking CSS breakpoints to JavaScript
Avoid CSS frameworks in production
Coding pragmatic solutions
Use the simplest code possible
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
The next big things
Summary
Chapter 19: Responsive Elements and Media
Introduction
Resizing an image using percent width
Responsive images using the cookie and JavaScript
Making your video respond to your screen width
Resizing an image using media queries
Changing your navigation with media queries
Making a responsive padding based on size
Making a CSS3 button glow for a loading element
Chapter 20: Responsive Typography
Introduction
Creating fluid, responsive typography
Making a text shadow with canvas
Making an inner and outer shadow with canvas
Rotating your text with canvas
Rotating your text with CSS3
Making 3D text with CSS3
Adding texture to your text with text masking
Styling alternating rows with the nth positional pseudo class
Adding characters before and after pseudo elements
Making a button with a relative font size
Adding a shadow to your font
Curving a corner with border radius
Chapter 21: Responsive Layout
Introduction
Responsive layout with the min-width and max-width properties
Controlling your layout with relative padding
Adding a media query to your CSS
Creating a responsive width layout with media queries
Changing image sizes with media queries
Hiding an element with media queries
Making a smoothly transitioning responsive layout
Chapter 22: Using Responsive Frameworks
Introduction
Using the Fluid 960 grid layout
Using the Blueprint grid layout
Fluid layout using the rule of thirds
Trying Gumby, a responsive 960 grid
The Bootstrap framework makes responsive layouts easy
Chapter 23: Making Mobile-first Web Applications
Introduction
Using the Safari Developer Tools' User Agent switcher
Masking your user agent in Chrome with a plugin
Using browser resizing plugins
Learning the viewport and its options
Adding tags for jQuery Mobile
Adding a second page in jQuery Mobile
Making a list element in jQuery Mobile
Adding a mobile, native-looking button with jQuery Mobile
Adding a mobile stylesheet for mobile browsers only using the media query
Adding JavaScript for mobile browsers only
Chapter 24: Optimizing Responsive Content
Introduction
Responsive testing using IE's Developer Tools
Browser testing – using plugins
Development environments – getting a free IDE
Virtualization – downloading VirtualBox
Getting a browser resizer for Chrome
Chapter 25: Unobtrusive JavaScript
Introduction
Writing "Hello World" unobtrusively
Creating a glowing "submit" button with the event listener
Making a button stand out when you hover over it
Resizing an element with unobtrusive jQuery
Masking a password with unobtrusive JavaScript
Using an event listener to animate an image shadow

Book Details

ISBN 139781787124813
Paperback709 pages
Read More
From 6 reviews

Read More Reviews

Recommended for You

Enduring CSS Book Cover
Enduring CSS
€ 33.58
€ 23.52
Enduring CSS
Jan 2017
134 pages
€ 23.52
PHP 7: Real World Application Development Book Cover
PHP 7: Real World Application Development
€ 73.18
€ 51.24
PHP 7: Real World Application Development
Sep 2016
1091 pages
€ 51.24
TypeScript: Modern JavaScript Development Book Cover
TypeScript: Modern JavaScript Development
€ 73.18
€ 51.24
TypeScript: Modern JavaScript Development
Dec 2016
841 pages
€ 51.24
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
€ 22.78
€ 4.56
Responsive Web Design with HTML5 and CSS3
Apr 2012
324 pages
€ 4.56
Mobile Application Development: JavaScript Frameworks Book Cover
Mobile Application Development: JavaScript Frameworks
€ 62.38
€ 43.68
Mobile Application Development: JavaScript Frameworks
Sep 2016
599 pages
€ 43.68
Bootstrap 4 - Responsive Web Design Book Cover
Bootstrap 4 - Responsive Web Design
€ 82.78
€ 57.96
Bootstrap 4 - Responsive Web Design
Jul 2017
810 pages
€ 57.96