Responsive Web Design Quick Guide

Responsive Web Design

CSS3 | HTML5

Learn how to design your website for mobile devices. After reading this guide, you will know how to design your website with fixed and flexible layouts, and how to adapt the design to the size of the screen with Responsive Web Design.

Only $ 2.99

Amazon

Apple

Google

Description

Quick Guides for Masterminds are excerpts from our best-selling books SwiftUI for Masterminds, UIKit for Masterminds, and HTML5 for Masterminds, providing a cost-effective alternative to getting the information you need.

With this guide, you will learn how to design your website for mobile devices. After reading this guide, you will know how to design your website with fixed and flexible layouts, and how to adapt the design to the size of the screen with Responsive Web Design.

Table of Contents

WEB DESIGN

Boxes

Display

Traditional Box Model

Floating Content

Floating Boxes

Absolute Positioning

Columns

Real-life Application

Flexible Box Model

Flex Container

Flexible Elements

Organizing Flexible Elements

Real-life Application

RESPONSIVE WEB DESIGN

Mobile Web

Media Queries

Breakpoints

Viewport

Flexibility

Box-sizing

Fixed and Flexible

Text

Images

Real-life Application

QUICK REFERENCE

Design

Columns

Flexible Model

Images

Examples

Download TXT Files

Listing 1: Defining HTML5 elements as block elements

Listing 2: Testing the float property

Listing 3: Floating the image to the left

Listing 4: Recovering the normal flow with the overflow property

Listing 5: Adding an empty element to apply the clear property

Listing 6: Recovering the normal flow with the clear property

Listing 7: Creating a document for testing the float property

Listing 8: Floating boxes to the left

Listing 9: Reducing the size of the container

Listing 10: Floating boxes to the left and right

Listing 11: Setting the relative position of an element

Listing 12: Setting the absolute position of an element

Listing 13: Setting the z index

Listing 14: Displaying a slide with additional information

Listing 15: Styling the boxes

Listing 16: Animating the slide

Listing 17: Splitting articles into columns

Listing 18: Defining the columns

Listing 19: Adding a rule between the columns

Listing 20: Defining a document for the Traditional Box Model

Listing 21: Implementing a reset rule

Listing 22: Assigning styles to the header

Listing 23: Assigning styles to the navigation area

Listing 24: Assigning styles to the options of the menu

Listing 25: Assigning styles to the main content

Listing 26: Creating the columns for the main content

Listing 27: Setting the position and styles of the <time> element

Listing 28: Assigning styles to the articles

Listing 29: Assigning styles to the footer

Listing 30: Calculating the size of the sections with percentages

Listing 31: Adding submenus

Listing 32: Assigning styles to submenus

Listing 33: Organizing boxes with a flexible container

Listing 34: Declaring the element parentbox as a flexible container

Listing 35: Making the boxes flexible with the flex property

Listing 36: Creating an uneven distribution

Listing 37: Combining inflexible and flexible boxes

Listing 38: Controlling how the elements shrink

Listing 39: Defining flexible boxes with a preferred size

Listing 40: Declaring a maximum size

Listing 41: Reversing the orientation of the boxes

Listing 42: Defining the location of each box

Listing 43: Distributing empty space in a flexible container

Listing 44: Distributing empty space with justify-content

Listing 45: Distributing vertical space

Listing 46: Stretching the boxes to occupy the vertical space available

Listing 47: Aligning the boxes to the top

Listing 48: Aligning the boxes by the baseline

Listing 49: Changing the alignment for the box-2 element

Listing 50: Creating two lines of boxes with the flex-wrap property

Listing 51: Aligning multiple lines with the align-content property

Listing 52: Defining a document for the Flexible Box Model

Listing 53: Turning the header into a flexible container

Listing 54: Turning the menu into a flexible container

Listing 55: Turning the columns into flexible containers

Listing 56: Configuring the content

Listing 57: Turning the footer into a flexible container

Listing 58: Loading styles with Media Queries

Listing 59: Defining the styles by default (responsiveall.css)

Listing 60: Defining the styles for small devices (responsivephones.css)

Listing 61: Declaring Media Queries with the @media at-rule (responsiveall.css)

Listing 62: Adding multiple breakpoints

Listing 63: Adding the viewport <meta> tag

Listing 64: Creating flexible elements with percentages

Listing 65: Adding margins and paddings to flexible elements

Listing 66: Including padding and border in the size of the element

Listing 67: Declaring flexible and fixed columns

Listing 68: Moving the fixed column to the left

Listing 69: Creating a flexible document with two fixed columns

Listing 70: Defining two fixed columns on the sides

Listing 71: Declaring relative font sizes

Listing 72: Declaring relative sizes for elements and containers

Listing 73: Declaring relative sizes for the elements with rem units

Listing 74: Adapting the size of the images

Listing 75: Setting a maximum size for the images

Listing 76: Selecting the image with the <picture> element

Listing 77: Selecting images for different resolutions

Listing 78: Declaring the size of an image with high resolution

Listing 79: Declaring the maximum size of an image with high resolution

Listing 80: Including the element to show the background image

Listing 81: Updating the background image

Listing 82: Defining flexible elements with the Traditional Box Model

Listing 83: Repositioning the <time> element

Listing 84: Rearranging the columns

Listing 85: Creating a mobile menu

Listing 86: Adding a menu button for small screens

Listing 87: Hiding the menu button

Listing 88: Replacing the menu with the button

Listing 89: Displaying the menu when the button is pressed

Listing 90: Displaying the menu as a flexible container

Listing 91: Designing a responsive document with the Flexible Box Model

Listing 92: Moving the <time> element

Listing 93: Moving from a two-column to a one-column design

Listing 94: Adapting the menu and the footer

Links

CSS Layout

Flexible Box Model

Reset Style Sheet

writing-mode Property

Media Queries Tutorial

Media Queries Examples

Responsive Web Design Tutorial - Google Developers

Responsive Images

Resolution Units

Original article about Responsive Web Design

Viewport meta tag

Tutorial about Elastic Design

Resources

Books

For Masterminds books include everything you need to develop professional applications. Create amazing websites and insanely great apps for iPhones, iPads and Mac computers.