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.