4 Effective Way to Create Responsive Website in 2021

Creating any website with HTML and CSS is so easy. But Making a responsive website is too complex for beginners. But in this tutorial, I will share wi

Responsive Websites

Creating any website with HTML and CSS(Cascading StyleSheet) is so easy. But Making a responsive website is too complex for beginners. But in this tutorial, I will share with you 5 effective ways to create responsive websites.

In this tutorials, I will share with you all those method or tips which helps you to create responsive websites. And I will share all my 2 years of experience with you.

While developing any website there is a need to have a good layout design. A good layout means responsive websites. The Media Queries is one of the best ways of making responsive websites. But if you have a good layout and properly used CSS then you don't need to used media queries for making responsive websites.


1. Create Layout of the Websites

Websites Layout

The layout is one of the important parts of web development. It helps to create responsive websites. The header, hero, article, features, footer, etc are the important layout in websites.

You can create the layout of the websites on paper and any software. There is no requirement to have a good design layout.


2. Design Website For Different Screen

Web Design

There are different types of devices used by people. The Desktop, tablet, and mobile are the basic screen size used by people. So, before you start developing any websites you need to design a website on a different screen.

You can design any website on UI/UX Designing software. The best web designing software:

By using this software you can able to design your websites. In this software, you can get useful tools that help to create websites.


3. Used Media Query

Media Query

Media Query is one of the best ways to make websites according to the size of devices. You can change any element in particular sizes.

It is necessary while developing websites. Media Query is used given example:

@media(max-width:600px) and (min-width:360px){Your CSS}


4. Used Flexbox

Flexbox

Flexbox is the greatest way to make responsive websites. Using flexbox, every element can resize according to the devices. And it is so simple to used flexbox. There are some examples of using flexbox:

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:1rem;

You can also use the grid in flexbox. It is simple to the used grid on a text editor. There is a common example of using the grid on a website:

display:grid;

grid-template-column:repeat(3, 1fr)

gap: 1rem;

align-items:center;