Simple And Best Responsive Web Design Using CSS.

Tuesday, Apr 4, 2017

Tags:- CSS HTML


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.In this tutorial we will teach you how to make a Responsive Web Design Using HTML and CSS.You may also like responsive navigation menu.


See Demo
Responsive Web Design


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

Subscribe Our Newsletter And Get Tutorials
And Offers Via Email

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.