Responsive Web Design with HTML5 and CSS3

Web pages that respond immediately to different screen sizes and devices is one of today’s essentials. Packed with screenshots and examples, this book will teach you the professional approach using just HTML5 and CSS3.
Responsive Web Design with HTML5 and CSS3 Book Cover

Responsive Web Design with HTML5 and CSS3

This ebook is included in a Mapt subscription
Ben Frain

1 customer reviews
Web pages that respond immediately to different screen sizes and devices is one of today’s essentials. Packed with screenshots and examples, this book will teach you the professional approach using just HTML5 and CSS3.
$0.00
$23.99
$39.99
$29.99p/m after trial
RRP $23.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Code Files
Preview in Mapt

Book Details

ISBN 139781849693189
Paperback324 pages

Book Description

Tablets, smart phones and even televisions are being used increasingly to view the web. There’s never been a greater range of screen sizes and associated user experiences to consider. Web pages built to be responsive provide the best possible version of their content to match the viewing devices of not just today’s devices but tomorrow’s too.

Learn how to design websites according to the new “responsive design” methodology, allowing a website to display beautifully on every screen size. Follow along, building and enhancing a responsive web design with HTML5 and CSS3. The book provides a practical understanding of these new technologies and techniques that are set to be the future of front-end web development.

Starting with a static Photoshop composite, create a website with HTML5 and CSS3 which is flexible depending on the viewer’s screen size.

With HTML5, pages are leaner and more semantic. A fluid grid design and CSS3 media queries means designs can flex and adapt for any screen size. Beautiful backgrounds, box-shadows and animations will be added – all using the power, simplicity and flexibility of CSS3.

Responsive web design with HTML5 and CSS3 provides the necessary knowledge to ensure your projects won’t just be built ‘right’ for today but also the future.

Table of Contents

Chapter 1: Getting Started with HTML5, CSS3, and Responsive Web Design
Why smart phones are important (and old IE isn't)
Are there times when a responsive design isn't the right choice?
Defining responsive web design
Why stop at responsive design?
Examples of responsive web design
HTML5—why it's so good
CSS3 enables responsive designs and more
Look Ma'—no images!
Can HTML5 and CSS3 work for us today?
Responsive web designs are not magic bullets
Educating our clients that websites shouldn't look the same in all browsers
Summary
Chapter 2: Media Queries: Supporting Differing Viewports
You can use media queries today
Why responsive designs need media queries?
Our first responsive design
Stopping modern mobile browsers from auto-resizing the page
Fixing the design for different viewport widths
With responsive designs, content should always come first
Media queries—only part of the solution
Summary
Chapter 3: Embracing Fluid Layouts
Fixed layouts aren't future proof
Why proportional layouts are essential for responsive designs
Amending a design from fixed to proportional layout
Using ems rather than pixels for typography
Fluid images
Serving different images for different screen sizes
Where fluid grids and media queries come together
CSS Grid systems
Summary
Chapter 4: HTML5 for Responsive Designs
What parts of HTML5 can we use today?
How to write HTML5 pages
New semantic elements in HTML5
Practical usage of HTML5's structural elements
HTML5 text-level semantics
Adding accessibility to your site with WAI-ARIA
Embedding media in HTML5
Adding video and audio the HTML5 way
Responsive video
Offline Web applications
Summary
Chapter 5: CSS3: Selectors, Typography, and Color Modes
What CSS3 offers the frontend developer
Anatomy of a CSS rule
Vendor prefixes and how to use them
Quick and useful CSS3 tricks
New CSS3 selectors and how to use them
Custom web typography
Help—my CSS3 @font-face headings look messy
New CSS3 color formats and alpha transparency
Summary
Chapter 6: Stunning Aesthetics with CSS3
Text shadows with CSS3
Box shadows
Background gradients
Background gradient patterns
Responsive considerations for CSS3
Bringing CSS3 properties together
Multiple background images
More CSS3 features
Sizeable icons which are perfect for responsive designs
Summary
Chapter 7: CSS3 Transitions, Transformations, and Animations
What CSS3 transitions are and how we can use them
CSS3 2D transformations
Dabbling in CSS3 3D transformations
Animating with CSS3
Summary
Chapter 8: Conquer Forms with HTML5 and CSS3
HTML5 forms
How to polyfill non-supporting browsers
Styling HTML5 forms with CSS3
Summary
Chapter 9: Solving Cross-browser Responsive Challenges
Progressive enhancement versus graceful degradation
Should you fix old versions of Internet Explorer?
Modernizr—the frontend developer's Swiss army knife
Changing navigation links to a drop menu (conditionally)
High resolution devices (the future)
Summary

What You Will Learn

  • Responsive web design is the hottest topic in web design. Understand what it is and why it’s essential to master
  • HTML5 is leaner, faster and more semantically rich. You’ll learn how to write HTML5 and understand all the key features
  • CSS3 media queries allow different styles for different media, learn how to integrate them into a design
  • Make web pages and the media within them ‘fluid’ - allowing them to flex when needed
  • Ditch images and use CSS3 to create background gradients, text shadows, box shadows and more
  • Use CSS3 3D transformations to flip elements in 3D space. Animate elements with CSS3 keyframes
  • Create smooth CSS3 transitions between default and hover states with differing durations and timing functions
  • Conquer forms – add validation and useful interface elements like date pickers and range sliders with HTML5 alone

Authors

Table of Contents

Chapter 1: Getting Started with HTML5, CSS3, and Responsive Web Design
Why smart phones are important (and old IE isn't)
Are there times when a responsive design isn't the right choice?
Defining responsive web design
Why stop at responsive design?
Examples of responsive web design
HTML5—why it's so good
CSS3 enables responsive designs and more
Look Ma'—no images!
Can HTML5 and CSS3 work for us today?
Responsive web designs are not magic bullets
Educating our clients that websites shouldn't look the same in all browsers
Summary
Chapter 2: Media Queries: Supporting Differing Viewports
You can use media queries today
Why responsive designs need media queries?
Our first responsive design
Stopping modern mobile browsers from auto-resizing the page
Fixing the design for different viewport widths
With responsive designs, content should always come first
Media queries—only part of the solution
Summary
Chapter 3: Embracing Fluid Layouts
Fixed layouts aren't future proof
Why proportional layouts are essential for responsive designs
Amending a design from fixed to proportional layout
Using ems rather than pixels for typography
Fluid images
Serving different images for different screen sizes
Where fluid grids and media queries come together
CSS Grid systems
Summary
Chapter 4: HTML5 for Responsive Designs
What parts of HTML5 can we use today?
How to write HTML5 pages
New semantic elements in HTML5
Practical usage of HTML5's structural elements
HTML5 text-level semantics
Adding accessibility to your site with WAI-ARIA
Embedding media in HTML5
Adding video and audio the HTML5 way
Responsive video
Offline Web applications
Summary
Chapter 5: CSS3: Selectors, Typography, and Color Modes
What CSS3 offers the frontend developer
Anatomy of a CSS rule
Vendor prefixes and how to use them
Quick and useful CSS3 tricks
New CSS3 selectors and how to use them
Custom web typography
Help—my CSS3 @font-face headings look messy
New CSS3 color formats and alpha transparency
Summary
Chapter 6: Stunning Aesthetics with CSS3
Text shadows with CSS3
Box shadows
Background gradients
Background gradient patterns
Responsive considerations for CSS3
Bringing CSS3 properties together
Multiple background images
More CSS3 features
Sizeable icons which are perfect for responsive designs
Summary
Chapter 7: CSS3 Transitions, Transformations, and Animations
What CSS3 transitions are and how we can use them
CSS3 2D transformations
Dabbling in CSS3 3D transformations
Animating with CSS3
Summary
Chapter 8: Conquer Forms with HTML5 and CSS3
HTML5 forms
How to polyfill non-supporting browsers
Styling HTML5 forms with CSS3
Summary
Chapter 9: Solving Cross-browser Responsive Challenges
Progressive enhancement versus graceful degradation
Should you fix old versions of Internet Explorer?
Modernizr—the frontend developer's Swiss army knife
Changing navigation links to a drop menu (conditionally)
High resolution devices (the future)
Summary

Book Details

ISBN 139781849693189
Paperback324 pages
Read More
From 1 reviews

Read More Reviews

DEAL OF THE DAY

Sign up here to get exclusive deep discounts on our latest and bestselling eBooks, delivered straight to your inbox every day.

FREE LEARNING FOREVER

Master new IT skills and unlock valuable software & web development knowledge with a FREE eBook every day.

Recommended for You

Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
Streamline your web applications with this hands-on course. From initial structuring to full deployment, you’ll learn everything you need to know about AngularJS DOM based frameworks.
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
If you’ve limited or no experience with JavaScript, this book will put you on the road to being an expert. A wonderfully compiled introduction to objects in JavaScript, it teaches through examples and practical play.
Responsive Web Design by Example : Beginner's Guide Book Cover
Responsive Web Design by Example : Beginner's Guide
$ 26.99
Discover how you can easily create engaging, responsive websites with minimum hassle!
Git: Version Control for Everyone Book Cover
Git: Version Control for Everyone
$ 23.99
Controlling different versions of files is an efficient process with Git, and this book makes it a snap to learn too! A practical tutorial, it hard-wires the lessons through hands-on exercises throughout the course.
Twitter Bootstrap Web Development How-To Book Cover
Twitter Bootstrap Web Development How-To
$ 12.99
A hands-on introduction to building websites with Twitter Bootstrap's powerful front-end development framework with this book and ebook.
Learning jQuery, Third Edition Book Cover
Learning jQuery, Third Edition
$ 23.99
Create better interaction, design, and web development with simple JavaScript techniques with this book and ebook