RGB Webtech

RGB Webtech

How To Make A Responsive Website From Scratch (HTML & CSS)?

You can create custom responsive designs using just HTML and CSS only. Some of the great responsive email templates are designed in using just HTML and CSS because most of the email clients do not support Media Queries.

How to Make a Responsive Website from scratch

How To Make A Responsive Website From Scratch (HTML & CSS)?

how to make a responsive website from scratch

You can create custom responsive designs using just HTML and CSS only. Some of the great responsive email templates are designed in using just HTML and CSS because most of the email clients do not support Media Queries.

But you can’t make a complex custom responsive design by using HTML and CSS, for that purpose you need to use Media Queries and sometimes, even javascript

Today, a website must not look good only on a desktop screen, but also on tablets and smart phones.

A website is responsive if it can adapt to the screen of the client.

Responsive web design is extremely important nowadays and is one technique you need to master as a web designer.

In this article, I’ll show you how to easily build a custom responsive website and how to apply custom responsive design techniques on existing web pages in three easy steps.

Before you start a responsive design from scratch you need to keep some points in your mind as below:

1. Use meta tag in your website top of the header:

Viewpoint Meta Tag: Put viewport meta tag inside your page head area. This viewport tag will prevent the browser from zooming out the page. Thus it will remain the same width of the screen size.

Example:

<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> </html>

2. Every code should be in % (percentage) instead of px (pixels).

Example:

div { width:100%; height:auto; } img { max-width: 100%; height: auto; }

3. Try to use flexbox layout as much as possible.

The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using float or positioning.

Before the flexbox layout module, there were four layout modes:

  • Block, for sections in a webpage.
  • Inline, for text.
  • Table, for two-dimensional table data.
  • Positioned, for the explicit position of an element.

Example:

.flex-container { display: flex; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width:30%; height:auto; margin: 1%; padding: 1%; }

4. Beautify your design for tablets and smart phones screen by using media queries.

Now apply media queries in our CSS file, this is done with the help of condition statements. In the condition provide the min-width and max-width to target screen size.

@media only screen and (min-width: 1201px) and (max-width: 5000px) { your code will be here... } @media only screen and (min-width: 880px) and (max-width: 1200px) { your code will be here... } @media only screen and (min-width: 600px) and (max-width: 879px) { { your code will be here... } @media only screen and (min-width: 320px) and (max-width: 599px) { your code will be here... }

Conclusion:

Hope you like this Responsive Website from scratch (HTML & CSS). I would also like to tell you that designing a responsive website from scratch can be a time-consuming job. There is also an easy alternative for responsive web design.

Alternatives of Responsive Web Design:

If you want to explore more responsive Front-end Frameworks for your upcoming projects than you can Visit Here.

WRITTEN BY

RGB Webtech - Web Design & Development Company

We are a startup and innovative IT Company. We provide complete Web Design, Web Development, Digital Marketing and App Development solutions.

  • Facebook
  • Twitter
  • Linkedin
  • Pinterest
  • Instagram
  • Tumblr
  • Youtube

Our Services

Do you want to explore our services?

View all

Complete SEO Checklist

Do you want to explore our SEO Checklist?

View all

Our recent blog

Web Hosting Companies
Website Hosting

Best Web Hosting Companies in USA

Jan 29, 2020 by RGB Webtech

Are you looking for a best web hosting plans for your domain, but you are not sure where to buy the best web hosting plans? Here is a Top 10 Best Web Hosting Companies in USA 2020 for your domain...

Types of Web Hosting
Website Hosting

Different Types of Web Hosting

Jan 21, 2020 by RGB Webtech

There are many different types of web hosting services. So, it can be very difficult to figure out which type of web hosting you need or choose...

Cheap Web Hosting Companies in India
Website Hosting

Cheap Web Hosting Companies in India

Jan 22, 2020 by RGB Webtech

Are you looking for a best web hosting plans for your domain, but you are not sure where to buy the best web hosting plans? Here is a Top 10 Web Hosting Companies in India 2020 for your domain...

Do you want to explore our recent blog?

View all

Current JOB Openings

Are you looking for a career opportunity?

View all