Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

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

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Subscribe TalkersCode! One Of The Best
Web Development And Review Blog

Get Latest Tutorials And Reviews
Via Email