✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Simple And Best Responsive Web Design Using CSS

Last Updated : Jul 1, 2023

IN - CSS HTML | Written & Updated By - Riya

In this tutorial we will teach you how to make a Responsive Web Design Using HTML and CSS, responsive Web Design is a great practise to build a website that looks and works similar in almost every device or any screen size.

Nowadays, where mobile device user growing rapidly it is neccessary to make a design that works perfect in them.

You may also like responsive navigation menu.

Simple And Best Responsive Web Design Using CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Make Simple and Best Responsive Web Design it takes only two steps:-

  1. Make a HTML file and define markups For Responsive Web Design
  2. Make a CSS file and define styling For Responsive Web Design

Step 1. Make a HTML file and define markups For Responsive Web Design

We make a HTML file and save it with a name rwd.html 

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="rwd_style.css">
</head>
   
<body>

<div id="header">
 <a href="#">SiteName</a>
 <input type="text" id="search" placeholder="Search">
 <input type="submit" id="submit" value="Search">
</div>
<!--End of header-->

<div id="navigation_bar">
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Contact</a>
 <a href="#">Help</a>
</div>
<!--end of navigation_bar-->

<div id="left_column">
 <h1>This is a Sample Text</h1>
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>

 <h2>This is a Sample Text</h2>
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>

 <h2>This is a Sample Text</h2>
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>

 <h2>This is a Sample Text</h2>
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>

 <h2>This is a Sample Text</h2>
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>

 <h2>This is a Sample Text</h2>
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>
</div>
<!--left_column-->

<div id="right_column">
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>
</div>
<!--right_column-->

<div id="sec_right_column">
 <p>
  This is a Sample Text, This is a Sample Text, This is a Sample Text, This 
  is a Sample Text, This is a Sample Text, 
 </p>
</div>
<!--sec_right_column-->

<div id="footer">
 <center>
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Contact</a>
 <a href="#">Help</a>
 </center>
</div>
<!--end of footer-->

</body>
</html>

You may also like responsive login and signup form .

name="viewport" is used because to optimize our web page for mobile devices also, width=device-width is used because it covers all the with of the device, initial scale =1.0 it controls the the zoom level when the page is first loaded and maximum=1.0 it prevents zooming of web page in small device screen size.

Please Go to Next Page To See Step 2.Make a CSS file and define styling For Responsive Web Design

I hope this tutorial on responsive web design using css helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪