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
-
HTML5 and CSS3: Building Responsive Websites
- Table of Contents
- HTML5 and CSS3: Building Responsive Websites
- HTML5 and CSS3: Building Responsive Websites
- Credits
- Preface
-
1. Module 1
- 1. Responsive Web Design
- 2. Web Development Tools
- 3. Constructing a Simple Responsive Blog with Responsive.gs
-
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
-
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
-
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
- 7. A Responsive Website for Business with Foundation
-
8. Extending Foundation
-
Syntactically Awesome Style Sheets
- Nesting rules
- Storing a value with a variable
- Reusable code block with mixins
- Creating and using a Sass function
- Manipulating color with Sass functions
- Useful Foundation's own function
- Have a go hero – diving into Sass
- Pop quiz – multiple parameters in Sass function
- Pop quiz – Sass color manipulation
- 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
-
Syntactically Awesome Style Sheets
-
A. Pop Quiz Answers
- Chapter 1, Responsive Web Design
- Chapter 2, Web Development Tools
- Chapter 3, Constructing a Simple Respons3ive Blog with Responsive.gs
- Chapter 4, Enhancing the Blog Appearance
- Chapter 5, Developing a Portfolio Website with Bootstrap
- Chapter 6, Polishing the Responsive Portfolio Website with LESS
- Chapter 8, Extend Foundation
-
2. Module 2
- 1. The Essentials of Responsive Web Design
- 2. Media Queries – Supporting Differing Viewports
-
3. Fluid Layouts and Responsive Images
- Converting a fixed pixel design to a fluid proportional layout
- Introducing Flexbox
- Getting Flexy
- Responsive images
- Summary
-
4. 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
-
5. 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
- 6. Stunning Aesthetics with CSS3
-
7. 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
- 8. Transitions, Transformations, and Animations
- 9. Conquer Forms with HTML5 and CSS3
-
10. 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
-
3. Module 3
-
1. 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
-
2. 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
-
3. 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
- 4. Using Responsive Frameworks
-
5. 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
- 6. Optimizing Responsive Content
- 7. Unobtrusive JavaScript
-
1. Responsive Elements and Media
- B. Bibliography
- Index
Product information
- Title: HTML5 and CSS3: Building Responsive Websites
- Author(s):
- Release date: October 2016
- Publisher(s): Packt Publishing
- ISBN: 9781787124813
You might also like
book
HTML and CSS in 24 Hours, Sams Teach Yourself (Updated for HTML5 and CSS3), Ninth Edition
Learn HTML5 and CSS3 in 24 one-hour lessons! Sams Teach Yourself HTML and CSS in 24 …
book
HTML5 and JavaScript Projects: Build on your Basic Knowledge of HTML5 and JavaScript to Create Substantial HTML5 Applications
Build on your basic knowledge of HTML5 and JavaScript to create substantial HTML5 applications. Through the …
book
HTML5 & CSS3 For The Real World, 2nd Edition
HTML5 and CSS3 for the Real World is your perfect introduction to the latest generation of …
book
HTML5 Pocket Reference, 5th Edition
Need help finding the right HTML5 element or attribute for your web page or application? HTML5 …