codescracker


html

HTML Responsive Web Design



« Previous Tutorial CodesCracker Home »


Responsive web design means web design of a web page or whole website that can adjustable in all devices such as mobiles, tablets, laptops or projectors.

If you design your web page in responsive manner, then your web page can deliver in variable sizes.

Create Responsive Web Page

You can create responsive web page using CSS. Here is an example shows how to create a responsive web page.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Responsive Web Design Example</title>
	<style>
	.topic { float: left; margin: 5px; padding: 15px; width: 230px;
			height: 220px; border: 1px dashed black; }
	</style>
</head>
<body>

<h2 style="text-align:center;">Responsive Web Design Demo</h2>
<div class="topic">
	<h3>HTML Responsive</h3>
	<p>In this tutorial of HTML responsive web design, you will learn
	about creating responsive web design of a web page.</p>
</div>
<div class="topic">
	<h3>HTML Responsive Example</h3>
	<p>In this example of HTML responsive web design example, you
	will find some examples that shows how to create responsive
	web page.</p>
</div>
<div class="topic">
	<h3>HTML Responsive Test</h3>
	<p>In this test of HTML responsive web design test, you can
	give test related to HTML responsive web design to check
	your knowledge about responsive web design.</p>
</div>

</body>
</html>

Here are some sample outputs produced (in different-different screen sizes) by the above HTML responsive web design example code. Here is the output produced on the screen size that can fit all the boxes in a row.

html responsive web design

Here is the output produced on the screen size that can fit all the boxes in two rows.

html responsive web design example

Here is the live demo output produced by the above HTML example code on responsive web design.

Responsive Web Design Demo

HTML Responsive

In this tutorial of HTML responsive web design, you will learn about creating responsive web design of a web page.

HTML Responsive Example

In this example of HTML responsive web design example, you will find some examples that shows how to create responsive web page.

HTML Responsive Test

In this test of HTML responsive web design test, you can give test related to HTML responsive web design to check your knowledge about responsive web design.

Resize your windows to watch the Responsive effect.


« Previous Tutorial CodesCracker Home »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test