HTML5 and CSS3: Building Responsive Websites

HTML5 and CSS3: Building Responsive Websites

by Thoriq Firdaus, Ben Frain, Benjamin LaGrone
Released October 2016
Publisher(s): Packt Publishing
ISBN: 9781787124813

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Design robust, powerful, and above all, modern websites across all manner of devices with ease using HTML5 and CSS3

About This Book

  • Use Responsive Grid System, Bootstrap, and Foundation frameworks for responsive web design

  • Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc

  • Make a mobile website using jQuery mobile and mobile-first design

    • Who This Book Is For

    This course is for web developers who are familiar with HTML and CSS but want to understand the essentials of responsive web design. It is for those developers who are willing to seek innovative techniques that deliver fast, intuitive interfacing with the latest mobile Internet devices.

    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

    • In Detail

    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:

  • Responsive Web Design by Example: Beginner’s Guide - Second Edition by Thoriq Firdaus

  • Responsive Web Design with HTML5 and CSS3 - Second Edition by Ben Frain

  • HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone

    • Style and approach

    This Learning Path course provides a simplistic and easy way to build powerful, engaging, responsive, and future proof websites across devices using HTML5 and CSS3 to meet the demands of the modern web user.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of contents

    1. HTML5 and CSS3: Building Responsive Websites
      1. Table of Contents
      2. HTML5 and CSS3: Building Responsive Websites
      3. HTML5 and CSS3: Building Responsive Websites
      4. Credits
      5. Preface
        1. What this learning path covers
        2. What you need for this learning path
        3. Who this learning path is for
        4. Reader feedback
        5. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      6. 1. Module 1
        1. 1. Responsive Web Design
          1. Responsive web design in a nutshell
            1. Viewport meta tag
              1. A word on screen size and viewport
            2. Media queries
          2. A look into responsive frameworks
            1. The Responsive.gs framework
              1. A word on CSS box model
              2. CSS3 box sizing
            2. The Bootstrap framework
            3. The Foundation framework
            4. A brief introduction to CSS preprocessors
            5. Have a Go Hero — delve into responsive web design
            6. Pop Quiz — responsive web design main components
          3. Responsive web design inspiration sources
          4. Summary
        2. 2. Web Development Tools
          1. Choosing a code editor
            1. Sublime Text Package Control
          2. Time for action – installing Sublime Text Package Control
            1. What just happened?
            2. Have a go hero – install the LESS and Sass syntax-highlighting package
            3. Setting up a local server
          3. Time for action – installing XAMPP
            1. What just happened?
            2. Choosing a CSS preprocessor compiler
            3. Browser for development
              1. Source maps
              2. Mobile emulator
          4. Managing project dependency with Bower
          5. Time for action – installing Node.js
            1. What just happened?
            2. Have a go hero – get yourself familiar with command lines
          6. Time for action – installing Bower
            1. What just happened?
            2. Bower commands
            3. Pop quiz – web development tools and command lines
          7. Summary
        3. 3. Constructing a Simple Responsive Blog with Responsive.gs
          1. Responsive.gs components
            1. The classes
          2. Using HTML5 elements for semantic markups
            1. HTML5 search input types
              1. HTML5 placeholder attribute
            2. HTML5 in Internet Explorer
            3. A look into polyfills in the Responsive.gs package
              1. Box sizing polyfills
              2. CSS3 media queries polyfill
          3. Examining the blog's wireframe
          4. Organizing project directories and files
          5. Time for action – creating and organizing project directories and assets
            1. What just happened?
            2. Have a go hero – making the directory structure more organized
            3. Pop quiz – using polyfill
          6. The blog HTML structures
          7. Time for action – constructing the blog
            1. What just happened?
            2. Have a go hero – creating more blog pages
            3. Pop quiz – HTML5 elements
          8. Summary
        4. 4. Enhancing the Blog Appearance
          1. Using CSS3
            1. Creating rounded corners with CSS3
            2. Creating drop shadow
            3. CSS3 browser supports and the use of vendor prefix
            4. Customizing to placeholder text styles
            5. Using CSS libraries
          2. Working with Koala
          3. Time for action – integrating project directory into Koala and combining the style sheets
            1. What just happened?
            2. Have a go hero – renaming the output
            3. Pop quiz – website performance rules
          4. Thinking mobile first
          5. Composing the blog styles
          6. Time for action – composing the base style rules
            1. What just happened?
            2. Have a go hero – customizing the link color
          7. Time for action – enhancing the header and the navigation appearance with CSS
            1. What just happened?
            2. Have a go hero – customizing the header
          8. Time for action – enhancing the content section appearance with CSS
            1. What just happened?
            2. Have a go hero – improving the content section
          9. Time for action – enhancing the footer section appearance with CSS
            1. What just happened?
          10. Optimize the blog for desktop
          11. Time for action – composing style rules for desktop
            1. What just happened?
          12. Making Internet Explorer more capable with polyfills
          13. Time for action – patch Internet Explorer with polyfills
            1. What just happened?
            2. Have a go hero – polish the blog for Internet Explorer
          14. Summary
        5. 5. Developing a Portfolio Website with Bootstrap
          1. The Bootstrap components
            1. The Bootstrap responsive grid
            2. Bootstrap buttons and forms
            3. Bootstrap Jumbotron
            4. Bootstrap third-party extensions
              1. Jasny Bootstrap off-canvas
          2. Digging into Bootstrap
          3. Using font icons
          4. Examining the portfolio website layout
          5. Project directories, assets, and dependencies
          6. Time for action – organizing project directories, assets, and installing project dependencies with Bower
            1. What just happened?
            2. Have a go hero – specifying Bower custom directory
            3. Pop quiz – test your understanding on Bower commands
            4. Updating Bower components
          7. The portfolio website HTML structure
          8. Time for action – building the website HTML structure
            1. What just happened?
            2. Have a go hero – extending the portfolio website
            3. Pop quiz – Bootstrap button classes
          9. Summary
        6. 6. Polishing the Responsive Portfolio Website with LESS
          1. Basic LESS syntax
            1. Variables
            2. Nesting style rules
            3. Mixins
              1. Parametric mixins
                1. Specify a default value in a parametric mixin
              2. Merging mixins with extend syntax
            4. Generating value with mathematical operations
            5. Generating color with mathematical operations and LESS functions
            6. Referential import
              1. Using a variable in an import statement
            7. Using source map for easier style debugging
            8. More on LESS
          2. External style sheet references
          3. Time for action – creating style sheets and organizing external style sheet references
            1. What just happened?
            2. Have a go hero – name and organize the style sheets
            3. Pop quiz – which of the following option is not LESS Import option?
          4. Working with Koala
          5. Time for action – compiling LESS into CSS using Koala
            1. What just happened?
          6. Polishing the portfolio website with LESS
          7. Time for action – composing the website styles with LESS syntax
            1. What just happened?
            2. Have a go hero – being more creative
            3. Pop quiz — using LESS function and extend syntax
          8. Improve and make the website functioning with JavaScript
          9. Time for action – compiling JavaScript with Koala
            1. What just happened?
          10. Summary
        7. 7. A Responsive Website for Business with Foundation
          1. Examining the website layout
          2. A look into Foundation
            1. The grid system
            2. The buttons
            3. The navigation and top bar
            4. The pricing tables
            5. Moving around Orbit
              1. How is Orbit constructed?
            6. Adding add-ons, the font Icons
            7. Further on Foundation
          3. Additional required assets
          4. The project directories, assets, and dependencies
          5. Time for action – organizing the project directories, assets, and dependencies
            1. What just happened?
          6. Time for action – building the website's HTML structure
            1. What just happened?
          7. Summary
        8. 8. Extending Foundation
          1. Syntactically Awesome Style Sheets
            1. Nesting rules
            2. Storing a value with a variable
              1. Variable interpolation
            3. Reusable code block with mixins
              1. A brief on the Sass mixin library
            4. Creating and using a Sass function
            5. Manipulating color with Sass functions
            6. Useful Foundation's own function
              1. Em and Rem
            7. Have a go hero – diving into Sass
            8. Pop quiz – multiple parameters in Sass function
            9. Pop quiz – Sass color manipulation
          2. Project recap
          3. Style sheet organizations
          4. Time for action – organizing and compiling style sheets
            1. What just happened?
          5. The website's look and feel
          6. Time for action – build on the website
            1. What just happened?
            2. Have a go hero – colors and creativities
            3. Pop quiz – importing an external Sass style sheet
          7. Fine-tuning the website
          8. Time for action – compiling JavaScript and styling the website with media queries
            1. What just happened?
            2. Have a go hero – remove unnecessary Foundation components
          9. Summary
        9. A. Pop Quiz Answers
          1. Chapter 1, Responsive Web Design
            1. Pop quiz – responsive web design main components
          2. Chapter 2, Web Development Tools
            1. Pop quiz – web development tools and command lines
          3. Chapter 3, Constructing a Simple Respons3ive Blog with Responsive.gs
            1. Pop quiz – using polyfill
            2. Pop quiz – HTML5 elements
          4. Chapter 4, Enhancing the Blog Appearance
            1. Pop quiz – website performance rules
          5. Chapter 5, Developing a Portfolio Website with Bootstrap
            1. Pop quiz – test your understanding on Bower commands
            2. Pop quiz – Bootstrap button classes
          6. Chapter 6, Polishing the Responsive Portfolio Website with LESS
            1. Pop quiz – which of the following option is not LESS Import option?
            2. Pop quiz – using LESS function and extend syntax
          7. Chapter 8, Extend Foundation
            1. Pop quiz – multiple parameters in Sass function
            2. Pop quiz – Sass color manipulation
            3. Pop quiz – importing external Sass style sheet
      7. 2. Module 2
        1. 1. The Essentials of Responsive Web Design
          1. Beginning our quest
          2. Defining responsive web design
          3. Setting browser support levels
            1. A brief note on tooling and text editors
          4. Our first responsive example
            1. Our basic HTML file
            2. Taming images
            3. Enter media queries
              1. Amending the example for a larger screen
          5. The shortcomings of our example
          6. Summary
        2. 2. Media Queries – Supporting Differing Viewports
          1. Why media queries are needed for a responsive web design
            1. Basic conditional logic in CSS
          2. Media query syntax
            1. Media queries in link tags
          3. Combining media queries
            1. Media queries with @import
            2. Media queries in CSS
            3. What can media queries test for?
          4. Using media queries to alter a design
            1. Any CSS can be wrapped in a media query
            2. Media queries for HiDPI devices
          5. Considerations for organizing and authoring media queries
            1. Linking to different CSS files with media queries
            2. The practicalities of separating media queries
            3. Nesting media queries 'inline'
          6. Combine media queries or write them where it suits?
          7. The viewport meta tag
          8. Media Queries Level 4
            1. Scripting media feature
            2. Interaction media features
            3. The hover media feature
            4. Environment media features
          9. Summary
        3. 3. Fluid Layouts and Responsive Images
          1. Converting a fixed pixel design to a fluid proportional layout
            1. Why do we need Flexbox?
            2. Inline block and whitespace
            3. Floats
            4. Table and table-cell
          2. Introducing Flexbox
            1. The bumpy path to Flexbox
            2. Browser support for Flexbox
              1. Leave prefixing to someone else
                1. Choosing your auto-prefixing solution
          3. Getting Flexy
            1. Perfect vertically centered text
            2. Offset items
            3. Reverse the order of items
              1. How about if we want them laid out vertically instead?
              2. Column reverse
            4. Different Flexbox layouts inside different media queries
            5. Inline-flex
            6. Flexbox alignment properties
              1. The align-items property
              2. The align-self property
              3. Possible alignment values
              4. The justify-content property
            7. The flex property
            8. Simple sticky footer
            9. Changing source order
            10. Wrapping up Flexbox
          4. Responsive images
            1. The intrinsic problem of responsive images
            2. Simple resolution switching with srcset
            3. Advanced switching with srcset and sizes
              1. Did you say the browser 'might' pick one image over another?
            4. Art direction with the picture element
              1. Facilitate new-fangled image formats
          5. Summary
        4. 4. HTML5 for Responsive Web Designs
          1. HTML5 markup – understood by all modern browsers
          2. Starting an HTML5 page the right way
            1. The doctype
            2. The HTML tag and lang attribute
            3. Specifying alternate languages
            4. Character encoding
          3. Easy-going HTML5
            1. A sensible approach to HTML5 markup
            2. All hail the mighty <a> tag
          4. New semantic elements in HTML5
            1. The <main> element
            2. The <section> element
            3. The <nav> element
            4. The <article> element
            5. The <aside> element
            6. The <figure> and <figcaption> elements
            7. The <details> and <summary> elements
            8. The <header> element
            9. The <footer> element
            10. The <address> element
            11. A note on h1-h6 elements
          5. HTML5 text-level semantics
            1. The <b> element
            2. The <em> element
            3. The <i> element
          6. Obsolete HTML features
          7. Putting HTML5 elements to use
            1. Applying common sense to your element selection
          8. WCAG and WAI-ARIA for more accessible web applications
            1. WCAG
            2. WAI-ARIA
              1. Don't use roles for semantic elements
            3. If you only remember one thing
            4. Taking ARIA further
          9. Embedding media in HTML5
            1. Adding video and audio the HTML5 way
              1. Fallback capability for older browsers
            2. Audio and video tags work almost identically
          10. Responsive HTML5 video and iFrames
          11. A note about 'offline first'
          12. Summary
        5. 5. CSS3 – Selectors, Typography, Color Modes, and New Features
          1. No one knows it all
          2. Anatomy of a CSS rule
          3. Quick and useful CSS tricks
            1. CSS multi-column layouts for responsive designs
              1. Fixed columns, variable width
              2. Adding a gap and column divider
          4. Word wrapping
            1. Text ellipsis
            2. Creating horizontal scrolling panels
          5. Facilitating feature forks in CSS
            1. Feature queries
            2. Combining conditionals
            3. Modernizr
              1. Feature detection with Modernizr
          6. New CSS3 selectors and how to use them
            1. CSS3 attribute selectors
            2. CSS3 substring matching attribute selectors
              1. The 'beginning with' substring matching attribute selector
              2. The 'contains an instance of' substring matching attribute selector
              3. The 'ends with' substring matching attribute selector
            3. Gotchas with attribute selection
            4. Attribute selectors allow you to select IDs and classes that start with numbers
          7. CSS3 structural pseudo-classes
            1. The :last-child selector
            2. The nth-child selectors
            3. Understanding what nth rules do
              1. Breaking down the math
            4. nth-based selection in responsive web designs
            5. The negation (:not) selector
            6. The empty (:empty) selector
            7. Do something with the :first-line regardless of viewport
          8. CSS custom properties and variables
          9. CSS calc
          10. CSS Level 4 selectors
            1. The :has pseudo class
            2. Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
          11. Web typography
            1. The @font-face CSS rule
            2. Implementing web fonts with @font-face
            3. A note about custom @font-face typography and responsive designs
          12. New CSS3 color formats and alpha transparency
            1. RGB color
            2. HSL color
            3. Alpha channels
            4. Color manipulation with CSS Color Module Level 4
          13. Summary
        6. 6. Stunning Aesthetics with CSS3
          1. Text shadows with CSS3
            1. Omitting the blur value when not needed
            2. Multiple text shadows
          2. Box shadows
            1. An inset shadow
            2. Multiple shadows
            3. Understanding spread
          3. Background gradients
            1. The linear-gradient notation
              1. Specifying gradient direction
              2. Color stops
              3. Adding fallback for older browsers
            2. Radial background gradients
              1. Breakdown of the radial-gradient syntax
            3. Handy 'extent' keywords for responsive sizing
          4. Repeating gradients
          5. Background gradient patterns
          6. Multiple background images
            1. Background size
            2. Background position
            3. Background shorthand
          7. High-resolution background images
          8. CSS filters
            1. Available CSS filters
            2. Combining CSS filters
          9. A warning on CSS performance
            1. A note on CSS masks and clipping
          10. Summary
        7. 7. Using SVGs for Resolution Independence
          1. A brief history of SVG
          2. The graphic that is a document
            1. The root SVG element
            2. Namespace
            3. The title and desc tags
            4. The defs tag
            5. The g element
            6. SVG shapes
            7. SVG paths
          3. Creating SVGs with popular image editing packages and services
            1. Save time with SVG icon services
          4. Inserting SVGs into your web pages
            1. Using an img tag
            2. Using an object tag
            3. Insert an SVG as a background image
            4. A brief aside on data URIs
            5. Generating image sprites
          5. Inserting an SVG inline
            1. Re-using graphical objects from symbols
            2. Inline SVGs allow different colors in different contexts
              1. Make dual-tone icons that inherit the color of their parent
            3. Re-using graphical objects from external sources
          6. What you can do with each SVG insertion method (inline, object, background-image, and img)
            1. Browser schisms
          7. Extra SVG capabilities and oddities
            1. SMIL animation
              1. The end of SMIL
            2. Styling an SVG with an external style sheet
            3. Styling an SVG with internal styles
              1. SVG properties and values within CSS
            4. Animate an SVG with CSS
          8. Animating SVG with JavaScript
            1. A simple example of animating an SVG with GreenSock
          9. Optimising SVGs
          10. Using SVGs as filters
          11. A note on media queries inside SVGs
            1. Implementation tips
            2. Further resources
          12. Summary
        8. 8. Transitions, Transformations, and Animations
          1. What CSS3 transitions are and how we can use them
            1. The properties of a transition
            2. The transition shorthand property
            3. Transition different properties over different periods of time
            4. Understanding timing functions
            5. Fun transitions for responsive websites
          2. CSS3 2D transforms
            1. Scale
            2. Translate
              1. Using translate to center absolutely positioned elements
            3. Rotate
            4. Skew
            5. Matrix
              1. Matrix transformations for cheats and dunces
            6. The transform-origin property
          3. CSS3 3D transformations
            1. The transform3d property
              1. Use transforms with progressive enhancement
          4. Animating with CSS3
            1. The animation-fill-mode property
          5. Summary
        9. 9. Conquer Forms with HTML5 and CSS3
          1. HTML5 forms
          2. Understanding the component parts of HTML5 forms
            1. placeholder
              1. Styling the placeholder text
            2. required
            3. autofocus
            4. autocomplete
            5. List and the associated datalist element
          3. HTML5 input types
            1. email
            2. number
              1. min and max ranges
              2. Changing the step increments
            3. url
            4. tel
            5. search
            6. pattern
            7. color
            8. Date and time inputs
              1. date
              2. month
              3. week
              4. time
            9. range
          4. How to polyfill non-supporting browsers
          5. Styling HTML5 forms with CSS3
            1. Indicating required fields
            2. Creating a background fill effect
          6. Summary
        10. 10. Approaching a Responsive Web Design
          1. Get designs in the browser as soon as possible
            1. Let the design dictate the breakpoints
          2. View and use the design on real devices
          3. Embracing progressive enhancement
          4. Defining a browser support matrix
            1. Functional parity, not aesthetic parity
            2. Choosing the browsers to support
          5. Tiering the user experience
            1. Practically delivering experience tiers
          6. Linking CSS breakpoints to JavaScript
          7. Avoid CSS frameworks in production
          8. Coding pragmatic solutions
            1. When a link becomes a button
          9. Use the simplest code possible
          10. Hiding, showing, and loading content across viewports
            1. Let CSS do the (visual) heavy lifting
          11. Validators and linting tools
          12. Performance
          13. The next big things
          14. Summary
      8. 3. Module 3
        1. 1. Responsive Elements and Media
          1. Introduction
          2. Resizing an image using percent width
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          3. Responsive images using the cookie and JavaScript
            1. Getting ready
            2. How to do it…
            3. How it works…
          4. Making your video respond to your screen width
            1. Getting ready
            2. How to do it…
            3. How it works…
          5. Resizing an image using media queries
            1. Getting ready
            2. How to do it…
            3. How it works...
          6. Changing your navigation with media queries
            1. Getting ready
            2. How to do it…
            3. How it works…
          7. Making a responsive padding based on size
            1. Getting ready
            2. How to do it…
            3. How it works…
          8. Making a CSS3 button glow for a loading element
            1. Getting ready
            2. How to do it…
            3. How it works…
        2. 2. Responsive Typography
          1. Introduction
          2. Creating fluid, responsive typography
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. See also
          3. Making a text shadow with canvas
            1. Getting ready
            2. How to do it...
            3. How it works…
            4. See also
          4. Making an inner and outer shadow with canvas
            1. Getting ready
            2. How to do it…
            3. How it works…
          5. Rotating your text with canvas
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          6. Rotating your text with CSS3
            1. Getting ready
            2. How to do it…
            3. How it works…
            4. See also
          7. Making 3D text with CSS3
            1. Getting ready
            2. How to do it…
            3. How it works…
          8. Adding texture to your text with text masking
            1. Getting ready
            2. How to do it…
            3. How it works…
          9. Styling alternating rows with the nth positional pseudo class
            1. Getting ready
            2. How to do it…
            3. How it works…
          10. Adding characters before and after pseudo elements
            1. Getting ready
            2. How to do it…
            3. How it works…
          11. Making a button with a relative font size
            1. Getting ready
            2. How to do it…
            3. How it works…
          12. Adding a shadow to your font
            1. Getting ready
            2. How to do it…
            3. How it works...
          13. Curving a corner with border radius
            1. Getting ready
            2. How to do it…
            3. How it works…
        3. 3. Responsive Layout
          1. Introduction
          2. Responsive layout with the min-width and max-width properties
            1. Getting ready
            2. How to do it…
            3. How it works…
          3. Controlling your layout with relative padding
            1. Getting ready
            2. How to do it…
            3. How it works…
          4. Adding a media query to your CSS
            1. Getting ready
            2. How to do it…
            3. How it works…
          5. Creating a responsive width layout with media queries
            1. Getting ready
            2. How to do it…
            3. How it works…
          6. Changing image sizes with media queries
            1. Getting ready
            2. How to do it…
            3. How it works…
          7. Hiding an element with media queries
            1. Getting ready
            2. How to do it…
            3. How it works…
          8. Making a smoothly transitioning responsive layout
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more...
        4. 4. Using Responsive Frameworks
          1. Introduction
          2. Using the Fluid 960 grid layout
            1. Getting ready
            2. How to do it...
            3. How it works...
          3. Using the Blueprint grid layout
            1. Getting ready
            2. How to do it....
            3. How it works...
          4. Fluid layout using the rule of thirds
            1. Getting ready
            2. How to do it…
            3. How it works...
            4. There's more...
          5. Trying Gumby, a responsive 960 grid
            1. Getting ready
            2. How to do it…
            3. How it works...
          6. The Bootstrap framework makes responsive layouts easy
            1. Getting ready
            2. How it works...
            3. There's more...
        5. 5. Making Mobile-first Web Applications
          1. Introduction
          2. Using the Safari Developer Tools' User Agent switcher
            1. Getting ready
            2. How to do it…
            3. How it works...
          3. Masking your user agent in Chrome with a plugin
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more...
          4. Using browser resizing plugins
            1. Getting ready
            2. How to do it...
            3. How it works...
          5. Learning the viewport and its options
            1. Getting ready
            2. How to do it…
            3. How it works...
          6. Adding tags for jQuery Mobile
            1. Getting ready
            2. How to do it...
            3. How it works...
          7. Adding a second page in jQuery Mobile
            1. Getting ready
            2. How to do it...
            3. How it works...
          8. Making a list element in jQuery Mobile
            1. Getting ready
            2. How to do it...
            3. How it works...
          9. Adding a mobile, native-looking button with jQuery Mobile
            1. Getting ready
            2. How to do it...
            3. How it works...
          10. Adding a mobile stylesheet for mobile browsers only using the media query
            1. Getting ready
            2. How to do it...
            3. How it works...
          11. Adding JavaScript for mobile browsers only
            1. Getting ready
            2. How to do it...
            3. How it works...
        6. 6. Optimizing Responsive Content
          1. Introduction
          2. Responsive testing using IE's Developer Tools
            1. Getting ready
            2. How to do it...
            3. How it works...
            4. There's more...
          3. Browser testing – using plugins
            1. Getting ready
            2. How to do it...
          4. Development environments – getting a free IDE
            1. Getting ready
            2. How to do it…
            3. How it works...
          5. Virtualization – downloading VirtualBox
            1. Getting ready
            2. How to do it...
            3. How it works…
          6. Getting a browser resizer for Chrome
            1. Getting ready
            2. How to do it...
            3. How it works...
        7. 7. Unobtrusive JavaScript
          1. Introduction
          2. Writing "Hello World" unobtrusively
            1. Getting ready
            2. How to do it...
            3. How it works...
          3. Creating a glowing "submit" button with the event listener
            1. Getting ready
            2. How to do it...
            3. How it works...
          4. Making a button stand out when you hover over it
            1. Getting ready
            2. How to do it...
            3. How it works...
          5. Resizing an element with unobtrusive jQuery
            1. Getting ready
            2. How to do it...
            3. How it works...
          6. Masking a password with unobtrusive JavaScript
            1. Getting ready
            2. How to do it...
            3. How it works...
          7. Using an event listener to animate an image shadow
            1. Getting ready
            2. How to do it...
            3. How it works...
      9. B. Bibliography
      10. Index

    Product information

    • Title: HTML5 and CSS3: Building Responsive Websites
    • Author(s): Thoriq Firdaus, Ben Frain, Benjamin LaGrone
    • Release date: October 2016
    • Publisher(s): Packt Publishing
    • ISBN: 9781787124813