The best destination for UI/UX designers. We collect awesome stuff for you. Enjoy the Day :)

CSS3 + HTML5 = Top Notch One-Page Website Template

Web development is the most flexible sector, where you have to keep yourself updated with the new-generation technologies and techniques. There is no doubt that new techniques in this area are changing with pace. Thus, it becomes important for every professional web designer or developer to adopt the new changes and latest technologies.

In order, to derive the maximum benefits of the newfangled web development techniques, you have to utilize the new methods while designing or developing a website.

Today, we are creating an HTML5 web template by using the rich features introduced by CSS3 and jQuery with the scrollTo plugin. You can optionally download an XHTML version of the web template, as HTML5 is still in its construction period.

In this post we will share the steps for creating an HTML5 web page with the combination of CSS3 and jQuery.

Create a One-Page Website Template

Step 1- The Design of a Web Template

The first step for a web designer is to implement his/her ideas into the design. For this, designers need programs like Photoshop, to work on the specifics and view how the different elements will fit together.

After this, you can simply think about the initial layout of the page.

Step 2- HTML

HTML5 is still a work in progress. But some portions of the standard are complete and ready to be used. We have separated the entire layout into a few section tags:

figure – holds an image which is used as an illustration for your article

With the help of this, you can display your web content in such a way that the subject matter of that page can be determined. In fact, search engine kind of online marketing services allow you to drive more targeted visitors to your site and thus enhance your ROI.

There are few implications in utilizing HTML5. IE family is one of the notorious browsers, that doesn’t support these tags (It can be locked with the simple JavaSrcipt file). Thus, it is important for you to take a decision on moving to HTML5 on your website.

In this, we use new section tags that classify your page into separate semantic sections. Furthermost is the #page section that is settled to a width of 960px in the style sheet. And, after this comes the header tag and the navigation tag.

This markup is shared between all articles. In addition, the first line is the dividing line and then we can see the new article tags with a unique ID that are used by the navigation for scrolling the page.

We can also see the title of the article, two paragraphs and the new fig. tag that marks the usage of images in the article.

At the bottom of the web page, you can see the rest of the JS files, which add the jQuery library and the scrollTo plugin.

Step 3 – CSS

Now, you can take extra measures with the styling. As the tags of the new version of HTML introduces are not yet offered with a default styling, you can simply add it using CSS code, and the page works and appears as it is supposed to:

In this section of coding, we execute more detailed styling to the elements like a hover property, a width for the page section and styles for the links inside the footer.

Step 4 – jQuery

Now you will create a tranquil scrolling effect after clicking the navigation link, using the scrollTjQuery plugin. This is done to improvise the template.

In this step, you just need to loop through the links included in the navigation bar and attach an onclick event which will trigger the $.scrollTo() function.

script.js

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
$('nav a,footer a.up').click(function(e){
// If a link has been clicked, scroll the page to the link's hash target:
$.scrollTo( this.hash || 0, 1500);
e.preventDefault();
});
});

After entering this code, our template is complete.

Conclusion

In this article we introduced the latest semantic features offered by HTML5 to create and code a top-notch one-page web template. Being a web designer/developer, it is vital to properly utilize the new techniques and technologies.