# Html Tutorial:  HTML Responsive web design

Responsive design is about creating a website that looks good on all device. It will automatically adjust for different screen sizes and viewpoints.

[![AD-BANNER](https://cdn.hashnode.com/res/hashnode/image/upload/v1623431076912/oO4SKztRo.jpeg align="left")](https://res.cloudinary.com/practicaldev/image/fetch/s--c1kDWjYV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41meil9ho9yx2ulb535m.png)

## Setting the viewpoint

In order to create a responsive website, add the following code to all your web page

```xml
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

This will set up the viewport of your page. Which will give instructions to your browser on how to control the page’s dimensions and scaling.

## Responsive images

These are images that scale nicely to fit any browser size. Using the width property If the CSS width property is scaled to 100%, the image will be responsive and scale up and down

```xml
<img src="google.jpg" style="width:100%;">
```

![](google.jpg align="left")

## Responsive Text Size

The text size can be set with a "vw" unit, which means the viewport width". That way the text will follow the size of the browser window

```xml
<h1 style="font-size: 10vw"> Hello World</h1>
```

# Hello World

## Media Queries

In addition to resizing text and images, it is also common to use media queries in responsive web pages.

```xml
<style>
    .left, .right {
        Float:left;
        Width: 20%;
    }
    .main  {
        Float: left;
        Width:60%;
    }

    /* use a media query to add a breakpoint at 800px */
    @media screen and (max-width: 800px){
        .left,  .main,  .right {
            Width:100%; /* the width is 100%, when the viewport is 800px or smaller */
        }
    }
</style>
```

### Create Stunning Websites and Web Apps

Building different custom components in React for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. [Try contrast pro!](https://www.devwares.com/product/contrast-pro)

[![Contrast Design Boostrap](https://cdn.hashnode.com/res/hashnode/image/upload/v1623431078408/KeSsCx4qH.jpeg align="left")](https://res.cloudinary.com/practicaldev/image/fetch/s--HmPIBlKY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, a prelaunch, etc project with a clean, well-documented, well-crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro)

### **RESOURCES**

[**Introduction to CSS Animation**](https://www.devwares.com/blog/css-animations/)

[**CSS Colors, Backgrounds, Borders, Margins and Padding**](https://www.devwares.com/blog/css-colors/)

[**CSS Combinators**](https://www.devwares.com/blog/css-combinators/)

[**CSS Flexbox**](https://www.devwares.com/blog/css-flexbox/)

[**CSS Fonts**](https://www.devwares.com/blog/css-font/)

[**CSS Grid**](https://www.devwares.com/blog/css-grid/)

[**CSS Height And Width**](https://www.devwares.com/blog/css-height-and-width/)

[**Tutorial: CSS Icons**](https://www.devwares.com/blog/css-icons/)

[**Tutorial: CSS Pagination**](https://www.devwares.com/blog/css-pagination/)

[**CSS Syntax and Selector**](https://www.devwares.com/blog/css-syntax-and-selector/)

[**CSS Text and Layout**](https://www.devwares.com/blog/css-text-and-layout/)

[**Full Website Layout**](https://www.devwares.com/blog/css-website-layout/)

[**Introduction to CSS**](https://www.devwares.com/blog/css-tutorial-1/)

[**Differences Between Tailwind CSS and Bootstrap**](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

[**Differences between Tailwind CSS and SASS**](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

[All you need to know about Html Elements](https://www.devwares.com/blog/html-element/)

[HTML File path, Charset and Meta](https://www.devwares.com/blog/html-file-path)

[Html 5 Formating](https://www.devwares.com/blog/html-5-formating/)

[Html 5 Layout](https://www.devwares.com/blog/html-5-layout/)

[Html 5 Basic Tags Example](https://www.devwares.com/blog/html-basic-tags-example/)

[Html Editors](https://www.devwares.com/blog/html-editors/)

[HTML Quotations and comments](https://www.devwares.com/blog/html-quotations/)

[Including JavaScript in your HTML project.](https://www.devwares.com/blog/html-javascript/)

[HTML Forms](https://www.devwares.com/blog/html-forms/)

[Creating Responsive HTML web design](https://www.devwares.com/blog/html-responsive/)

[HTML Tables, Classes and Ids](https://www.devwares.com/blog/html-table/)

[Introducing HTML](https://www.devwares.com/blog/introduction-to-html/)