---
title: Responsive Web Design – Introduction
description: "> ## What is Responsive Web Design? > > > > Responsive web design makes your web page look good on all devices. > > > > Responsive web design uses only HTML and CSS. > > > > Responsive…"
url: "https://apprentice.mn/docs/responsive-web-design-introduction/"
updated: "2021-05-13"
category: CSS
---

# Responsive Web Design – Introduction

> ## What is Responsive Web Design?
>
>
>
> Responsive web design makes your web page look good on all devices.
>
>
>
> Responsive web design uses only HTML and CSS.
>
>
>
> Responsive web design is not a program or a JavaScript.

## Designing For The Best Experience For All Users

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:

     ![](https://www.w3schools.com/css/rwd_desktop.png)

**Desktop**

      ![](https://www.w3schools.com/css/rwd_tablet.png)

**Tablet**

      ![](https://www.w3schools.com/css/rwd_phone.png)

**Phone**

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Don’t worry if you don’t understand the example below, we will break down the code, step-by-step, in the next chapters:

# Chania

- The Flight
- The City
- The Island
- The Food

# The City

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

## What?

Chania is a city on the island of Crete.

## Where?

Crete is a Greek island in the Mediterranean Sea.

## How?

You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.

         [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-introduction%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Introduction](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-introduction%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Introduction)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-introduction%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Introduction](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-introduction%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Introduction)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-introduction%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Introduction](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fresponsive-web-design-introduction%2F&linkname=Responsive%20Web%20Design%20%E2%80%93%20Introduction)[https://www.addtoany.com/share](https://www.addtoany.com/share)