×
Web Jeevan

Internet Marketing and Web Design & Development Company

How to Make a Responsive Website from scratch (HTML & CSS)?

Last updated on 19 March, 2024 by Web Jeevan
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.

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 smartphones.

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 at 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 as 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:

1. Block, for sections in a webpage.

2. Inline, for text.

3. Table, for two-dimensional table data.

4. 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 smartphones 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.

If you’ve found value in our article, we’d greatly appreciate it if you consider sharing it on your social media channels. Your single share can be a source of inspiration for us to keep crafting informative and valuable content just for you. Thank you for your support!
Internet Marketing Agency

Written by Web Jeevan

Technologies and Internet Marketing Blog

Welcome to our Technologies and Internet Marketing Blog, your go-to resource for cutting-edge insights and strategies in the digital realm. Dive into expert analyses on emerging technologies, such as AI, blockchain, and IoT, exploring their impact on businesses and society. Stay ahead of the curve with practical tips and trends in internet marketing, including SEO, social media, and content strategies. Whether you’re a seasoned professional or a budding entrepreneur, our blog equips you with the knowledge to navigate the dynamic landscape of technology and digital marketing successfully.