HTML5 and CSS3: Building Responsive Websites
One-stop guide for Responsive Web Design
1st Edition
Published on 15. April 2025
709 pages
978-1-78712-002-0 (ISBN)
Description
No detailed description available for "HTML5 and CSS3: Building Responsive Websites".
All prices
More details
Persons
Firdaus Thoriq :
Thoriq Firdaus is a web developer and lives in Indonesia. He has been dabbling in web design and development for more than 5 years, working with many clients of varying sizes. He appreciates the giving nature of the web design community at large. He also loves trying out new things in CSS3 and HTML5 and occasionally speaks at some local colleges and institutions on the subject. Outside of work, he loves spending time with his wife and daughter, watching movies, and enjoying meals at nearby cafes and restaurants.LaGrone Benjamin :
Benjamin LaGrone is a web developer who lives and works in Texas. He got his start in programming at the age of 6 when he took his first computer class at the Houston Museum of Natural Science. His first program was "choose your own adventure book", written in BASIC; he has fond memories of the days when software needed you to write line numbers. Fast forward to about thirty years later: after deciding that computers are here to stay, Ben has made a career combining two of his favorite things, art and codingcreating art from code. One of his favorite projects was using the GMaps API to map pathologies to chromosomes for cancer research. Fascinated with mobile devices for a long time, Ben thinks that the responsive Web is one of the most exciting, yet long time coming, new aspects of web development. He now works in a SaaS development shop and is the mobile and responsive Web evangelist of the team. When he's not working on some Internet project, Ben spends his time building robots, tinkering with machines, drinking coffee, surfing, and teaching Kuk Sool martial arts.Frain Ben Frain :
Ben Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: books, films and raising a family.
Thoriq Firdaus is a web developer and lives in Indonesia. He has been dabbling in web design and development for more than 5 years, working with many clients of varying sizes. He appreciates the giving nature of the web design community at large. He also loves trying out new things in CSS3 and HTML5 and occasionally speaks at some local colleges and institutions on the subject. Outside of work, he loves spending time with his wife and daughter, watching movies, and enjoying meals at nearby cafes and restaurants.LaGrone Benjamin :
Benjamin LaGrone is a web developer who lives and works in Texas. He got his start in programming at the age of 6 when he took his first computer class at the Houston Museum of Natural Science. His first program was "choose your own adventure book", written in BASIC; he has fond memories of the days when software needed you to write line numbers. Fast forward to about thirty years later: after deciding that computers are here to stay, Ben has made a career combining two of his favorite things, art and codingcreating art from code. One of his favorite projects was using the GMaps API to map pathologies to chromosomes for cancer research. Fascinated with mobile devices for a long time, Ben thinks that the responsive Web is one of the most exciting, yet long time coming, new aspects of web development. He now works in a SaaS development shop and is the mobile and responsive Web evangelist of the team. When he's not working on some Internet project, Ben spends his time building robots, tinkering with machines, drinking coffee, surfing, and teaching Kuk Sool martial arts.Frain Ben Frain :
Ben Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: books, films and raising a family.
Content
- Cover
- Copyright
- Preface
- Table of Contents
- Module 1: Responsive Web Design Beginner's Guide
- 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
- Managing project dependency with 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
- The blog HTML structures
- Summary
- Chapter 4: Enhancing the Blog Appearance
- Using CSS3
- Working with Koala
- Thinking mobile first
- Composing the blog styles
- Optimize the blog for desktop
- Making Internet Explorer more capable 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
- The portfolio website HTML structure
- Summary
- Chapter 6: Polishing the Responsive Portfolio Website with LESS
- Basic LESS syntax
- External style sheet references
- Working with Koala
- Polishing the portfolio website with LESS
- Improve and make the website functioning with JavaScript
- 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
- Summary
- Chapter 8: Extending Foundation
- Syntactically Awesome Style Sheets
- Project recap
- Style sheet organizations
- The website's look and feel
- Fine-tuning the website
- Summary
- Module 2: Responsive Web Design with HTML5 and CSS3
- Chapter 1: 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 2: 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 3: Fluid Layouts and Responsive Images
- Converting a fixed pixel design to a fluid proportional layout
- Introducing Flexbox
- Getting Flexy
- Responsive images
- Summary
- Chapter 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
- Chapter 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
- Chapter 6: 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 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
- Chapter 8: 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 9: 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 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
- Module 3: HTML5 and CSS3 Responsive Web Design Cookbook
- Chapter 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 CSS3 button glow for a loading element
- Chapter 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
- Chapter 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
- Chapter 4: 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 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
- Chapter 6: 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 7: 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
- Bibliography
- _GoBack
