DOCTYPE
The most important deceleration element, this helps your browser to understand what kind of HTML version it is trying to parse.
HTML5 dropped type attribute
You should avoid following tags and attributes in HTML5
HTML Code
<header class='container'>1 Header</header>
<nav class='container'>2 Nav</nav>
<section class='container'>3 Main</section>
<footer class='container'>4 Footer</footer>
CSS Code
CSS code
Article Page
Here article title is the most important and top level, so title should be in <h1> tag.
Home Page
This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading.
HTML Code
For implementing lower version browser like Internet Explorer 7 and 8, you just include modernizr.min.js after style sheet inside header tag. download link.
Now this code works fine with Internet Explorer lower version.
The most important deceleration element, this helps your browser to understand what kind of HTML version it is trying to parse.
<!DOCTYPE html>
HTML5 dropped type attribute
<meta http-equiv=”Content-Type” content="text/html";>
to
<meta charset=”UTF-8”>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
to
<link rel=”stylesheet” href=”style.css”>
to
<meta charset=”UTF-8”>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
to
<link rel=”stylesheet” href=”style.css”>
You should avoid following tags and attributes in HTML5
<font>, <center>,<frame> align, bgcolor, height, width, size, type
Step 1
Web layout divided into four horizontal parts are Hearder, Nav, Section and Footer. HTML Code
<header class='container'>1 Header</header>
<nav class='container'>2 Nav</nav>
<section class='container'>3 Main</section>
<footer class='container'>4 Footer</footer>
CSS Code
*{margin:0px; padding:0px}
header, footer, section, nav
{
display:blocks
}
.container
{
margin:0 auto;
width:950px;
margin-top:20px
}
header, footer, section, nav
{
display:blocks
}
.container
{
margin:0 auto;
width:950px;
margin-top:20px
}
Step 2
Now working with an unorder list <ul> tag.
<nav class='container' id='nav'>
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</nav>
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</nav>
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
Step 3
section (main part) dividing into two vertical parts are section(article part) and aside(sidebar part)
<section class='container'>
<section id="content">Article</section>
<aside id='sidebar'>Sidebar</aside>
</section>
<section id="content">Article</section>
<aside id='sidebar'>Sidebar</aside>
</section>
CSS code
#main
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
Article Page
Here article title is the most important and top level, so title should be in <h1> tag.
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
Home Page
This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading.
<section id='content'>
<article>
<header>
<h2>Article Title 1</h2>
</header>
<p>
Article Short Description
</p>
</article>
<article>
<header>
<h2>Article Title 2</h2>
</header>
<p>
Article Short Description
</p>
</article>
.......
</section>
<article>
<header>
<h2>Article Title 1</h2>
</header>
<p>
Article Short Description
</p>
</article>
<article>
<header>
<h2>Article Title 2</h2>
</header>
<p>
Article Short Description
</p>
</article>
.......
</section>
Modernizr
Modernizr is a JavaScript library that
detects the availability of native implementations for next-generation
Web Technologies. These technologies are new features that stem from the
ongoing HTML5 and CSS3 specifications. HTML Code
For implementing lower version browser like Internet Explorer 7 and 8, you just include modernizr.min.js after style sheet inside header tag. download link.
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>
<header class='container' id='header'>
Logo Part
</header>
<nav class='container' id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>DEMOS</a></li>
<li><a href='#'>PROJECT</a></li>
.....
.....
</ul>
</nav>
<section class='container' id='main'>
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
<aside id='sidebar'>
</aside>
</section>
<footer class='container' id='footer'>
<p>
© 2009-2013 9lessons.info.
</p>
</footer>
<body>
</html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>
<header class='container' id='header'>
Logo Part
</header>
<nav class='container' id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>DEMOS</a></li>
<li><a href='#'>PROJECT</a></li>
.....
.....
</ul>
</nav>
<section class='container' id='main'>
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
<aside id='sidebar'>
</aside>
</section>
<footer class='container' id='footer'>
<p>
© 2009-2013 9lessons.info.
</p>
</footer>
<body>
</html>
Now this code works fine with Internet Explorer lower version.
