Responsive Web Design: Learn how to adapt your website for mobile devices with HTML5, CSS3 and JavaScript

JD Gauchat

Jan 2018 · J.D Gauchat

Ebook

124

Pages

Eligible

About this ebook

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.

Rate this ebook

Tell us what you think.

Reading information

Smartphones and tablets

Install the Google Play Books app for Android and iPad/iPhone. It syncs automatically with your account and allows you to read online or offline wherever you are.

Laptops and computers

You can listen to audiobooks purchased on Google Play using your computer's web browser.

eReaders and other devices

To read on e-ink devices like Kobo eReaders, you'll need to download a file and transfer it to your device. Follow the detailed Help Center instructions to transfer the files to supported eReaders.