Scribd
Upload
107 views

HTML Basics: Search On Codescracker Search

Uploaded by

Sreejith PB
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
107 views

HTML Basics: Search On Codescracker Search

Uploaded by

Sreejith PB
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Responsive Web Design Page 1 of 6

f t g l y

search on codescracker Search

Home
Java
C
C++
HTML
CSS
JavaScript
SQL
PHP
Perl
Python
C#
Objective-C
Tips

HTML Basics
HTML Home
HTML Basics
HTML Document Structure
HTML Data Types
HTML Attributes
HTML Fonts
HTML Headings
HTML Character Entities
HTML Horizontal Line
HTML Line Break
HTML Paragraph
HTML Citation Definition
HTML Quotations
HTML Comments
HTML Styles
HTML Formatting
HTML CSS
HTML Tags
HTML Basic Tags
HTML All Tags
HTML Root Tags
HTML Metadata Tags
HTML Section Tags
HTML Head Heading Tags
HTML Flow Tags
HTML Phrasing Tags
HTML Embedded Tags
HTML Interactive Tags
HTML Meta Tags
HTML Texts
HTML Text Formatting
HTML Physical Style Text
HTML Logical Style Text
HTML Organizing Text
HTML Arranging Text
HTML Displaying Lists
HTML List
HTML Links Tables
HTML Links URLs
HTML Links
HTML URL Encode
HTML Tables
HTML Images Colors
HTML Images Colors
HTML Images

http://codescracker.com/html/html-responsive.htm 19-02-17
HTML Responsive Web Design Page 2 of 6

HTML Color Codes


HTML Canvas
HTML Backgrounds
HTML Forms
HTML Forms
HTML Form Tag
HTML Input Tag
HTML Button Tag
HTML Multiple-Choice
HTML Select Tag
HTML Option Tag
HTML Optgroup Tag
HTML Textarea Label
HTML Fieldset Legend
HTML Datalist Tag
HTML Keygen Tag
HTML Output Tag
HTML Progress Tag
HTML Meter Tag
HTML Submit Form
HTML enctype Attribute
HTML action Attribute
HTML Method Attribute
HTML Get Method
HTML Post Method
HTML Interactive
HTML Interactive Web
HTML Details Summary
HTML Menu Tag
HTML Command Tag
HTML KBD Tag
HTML Time Tag
HTML Multimedia
HTML Multimedia
HTML Multimedia Tags
HTML Audio Video
HTML Embedded Multimedia
HTML EMBED Tag
HTML OBJECT Tag
HTML FIGURE FIGCAPTION
HTML Advance
HTML Blocks
HTML Classes
HTML Iframes
HTML JavaScript
HTML Layouts
HTML Responsive
HTML Test
HTML Online Test
Give Online Test
Register Now
Login Page
All Test List

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>

http://codescracker.com/html/html-responsive.htm 19-02-17
HTML Responsive Web Design Page 3 of 6

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

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

http://codescracker.com/html/html-responsive.htm 19-02-17
HTML Responsive Web Design Page 4 of 6

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

Responsive Web Design Demo

HTML Responsive HTML Responsive Example HTML Responsive Test

In this tutorial of HTML In this example of HTML In this test of HTML responsive
responsive web design, you will responsive web design example, web design test, you can give
learn about creating responsive you will find some examples that test related to HTML responsive
web design of a web page. shows how to create responsive web design to check your
web page. knowledge about responsive web
design.

Resize your windows to watch the Responsive effect.

HTML Online Test

« Previous Tutorial CodesCracker Home »

http://codescracker.com/html/html-responsive.htm 19-02-17
HTML Responsive Web Design Page 5 of 6

Click on video to unmute

Tools
Calculator

Quick Links
Signup - Login - Give Online Test

http://codescracker.com/html/html-responsive.htm 19-02-17
HTML Responsive Web Design Page 6 of 6

Graduate Level
Programs
Ad niitdiginxt.com

HostGator™
Hosting
Ad HostGator

C++ Program to
Print Star...
codescracker.com

Reliance Job
Openings
Ad timesjobs.com

C++ Program to
Print Smiling...
codescracker.com

C++ Two
Dimensional...
codescracker.com

C++ Program to
Print Pascal...
codescracker.com

C++ Program
Bubble Sort
codescracker.com

C++ Program to
Tutorials Online Tests Online Tests Examples
Reverse String
Java Tutorial All Test
codescracker.com Objective-C Test Java Examples
C Tutorial Java
C++ TwoTest Data Structure Test C Examples
Dimensional...
C++ Tutorial C Test Computer Fundamental Test C++ Examples
codescracker.com
HTML Tutorial C++ Test Operating System Test Python Examples
C++ Program to
JavaScript TutorialPrint
HTML Test
Table of... Networking Test Interview Questions
codescracker.com
PHP Tutorial CSS Test Microsoft Word Test Java Interview Questions
Java Three
CSS Tutorial JavaScript Test Microsoft Excel Test References
Dimensional...
SQL Tutorial SQL Test
codescracker.com Microsoft PowerPoint Test C Functions
Python Tutorial PHP Testto
C Program Computer Hardware Test HTML Character Entities
Find Largest...
C# Tutorial Perl Test Linux Test HTML Color Codes
codescracker.com
Perl Tutorial Python Test Unix Test Computer Tips & Tricks
Objective-C Tutorial C# Test MySQL Test Computer Networking

© Copyright 2017 CodesCracker.com. All Rights Reserved.

codescracker.com

http://codescracker.com/html/html-responsive.htm 19-02-17

You might also like