A Basic Guide on Creating a Simple Responsive Template Using HTML5 and CSS3

At present, both HTML5 and CSS3 have become the most popular technologies, and are widely used to develop powerful websites. These technologies are supported by modern browsers, and has introduced new features that enables developers to build solutions that addresses today’s users’ needs. Because of their increasing popularity, the HTML5 and CSS3 technologies seem to have become the norm in creating a standard website layout.

Other than HTML5 and CSS3 technologies, another concept that is gaining prominence is responsive design, in fact, it has become a necessity than any buzzword. This can be attributed to the rise of mobile device usage. Since users favor using mobile for accessing the Internet, it has become important for website owners to make their designs adapt to all screen sizes.

Creating a Simple Responsive Template

Assuming that you have a basic understanding of HTML and CSS, in this post, we’ll discuss how you can build a responsive website layout using HTML5 and CSS3.

Creating a Simple Responsive Template

Laying Down the Foundation – The HTML Markup
The very first thing you need to do is to write HTML markup. Below is an example that illustrates how to write code for a simple HTML5 template, however, in this example I’ve also added some additional elements to make the process of creating an HTML5 template more clear to you.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>HTML</title>
<meta name=”description” content=””>
<meta name=”author” content=”Author Name”>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>
<link rel=”shortcut icon” href=”/favicon.ico”>
<link rel=”apple-touch-icon” href=”/apple-touch-icon.png”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div id=”wrapper”>
<div>
<header>
<h1>HTML5</h1>
</header>
<nav>
<ul>
<li>
<a href=”/”>Home</a>
</li>
<li>
<a href=”/contact”>Contact</a>
</li>
<li>
<a href=”/contact”>About</a>
</li>
<li>
<a href=”/contact”>Gallery</a>
</li>
<li>
<a href=”/contact”>Dummy</a>
</li>
<li>
<a href=”/contact”>Dummy</a>
</li>
</ul>
</nav>
<div id=”core” class=”clearfix”>
<section id=”left”>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section id=”right”>
<p>Sidebar Content goes here</p>
</section>
</div>
<footer class=”clearfix”>
<p>
&copy; Copyright  by Author
</p>
</footer>
</div>
</div>
</body>
</html>

As you can see in the code, coding in HTML5 doctype is pretty same like writing code for HTML4, except that the doctype declaration in the new HTML version is very simple. In addition, you no longer need to include self-enclosing tags, which save a lot of your development time.

Let us see how our code works:
To begin with, you’ll see that the entire page is enclosed with a <div> tag. Further, we’re making use of an ID as “wrapper”, which is used for wrapping the elements of our website. And then, we’ve divided our page into three different elements, namely: <header>, <div>, and <footer>.

Our header area contains the title of our page, and a few navigation items. Next, the <div> tag helps in specifying the alignment of the content to be displayed on the page. For this purpose, it includes a <section> tags containing our main content, as well as, a sidebar on the right side of the theme.

Finally, the <footer> tag can be used for including any copyright and legal information. Here, you can choose to include your own content or instead can add certain information with secondary links and so on.

Understanding How to Use CSS3 Styles
So, now that you’ve completed writing a basic HTML markup, it’s time to add some style to it. For this, we’ll be using CSS3 styles. Below is a code snippet that needs to be added within your CSS stylesheet:

body{ font-family :Arial, Helvetica, sans-serif; text-align: center;}
nav {
margin:0 auto;
margin-bottom: 10px;
padding:5px 10px;
background-color:#222;
width:40%;
}
nav ul {
list-style: disc;
font-size: 14px;
margin:0; padding:0;
}
nav ul li {
display:inline-block;
width:auto;
}
nav ul li a {
background: #999;
border-radius: 5px;
color: #fff;
display: inline-block;
font-weight: normal;
line-height: 21px;
padding: 10px 20px;
text-decoration: none;
transition: all 500ms ease 0s;
}
nav ul li a:hover {
background: #fff;
color:#000;
}
nav ul li a:hover {
text-decoration: none;
}
#core{
margin:0 auto;
width:75%;
}
#left{
float:left;
width:75%;
text-align: left;
}
#right{
float:right;
width:23%;
}
#footer{
float:left;
width:100%
}
.clearfix{
clear: both}

Note: In the above example, we’re using an external CSS file for keeping the design and code separately, so as to avert any confusion while styling your HTML layout pages.
The above code helps in creating some great navigation hover effects.
Conclusion
If you want to create a responsive website, then it is recommended that you should make use of the latest HTML5 and CSS3 web technologies. To help you, we’ve included an example that will help you learn about the process of creating a responsive template using HTML5, and then finish it with CSS3 styles.

Author Biography:
Jack Calder is a perfect expert in Markupcloud Ltd, a top-notch company involved in to convert psd to html in very fast manner. Jack loves to research on latest trends in current market specially on upcoming technology.

Leave a Reply