Responsive Web Design

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


This guide assumes that you have a basic knowledge of HTML, CSS and JavaScript, and you know how to create files and upload them to a server. If you don't know how to program in HTML, CSS or JavaScript, you can download our guides Introduction to HTML, Introduction to CSS, and Introduction to JavaScript. For a complete course on web development, read our book HTML5 for Masterminds.


This guide is a collection of excerpts from the book HTML5 for Masterminds. The information included in this guide will help you understand a particular aspect of web development, but it will not teach you everything you need to know to develop a website or a web application. If you need a complete course on web development, read our book HTML5 for Masterminds. For more information, visit our website at www.formasterminds.com.