HTML5 & CSS3 tutorial | Create a Digg V4 layout using HTML5 and CSS3

In this post of mine I am presenting the tutorial to create a Digg v4 layout using HTML5 and CSS3 programming language. Beside with providing the complete coding; I had also explained the basic working algorithms for the same.

Digg is not a new name for any web developer or designer. This social news website was launched in 2004 and encountered a lot of updates and crunches till then. In 2011 this website took a sharp turn and completely overhauled the site layout. These mega changes diminished the conventional friends system and welcomed the big-name publishers to play with the front page. These changes make a foul among many dig users who were expecting a ‘Plus’ update. Although the website is again approaching to its roots as user-powered news portal.

The recent mega news from Digg was reported in July 2012 when Digg was sold in three parts. The astounding design skills of Digg are still ruling the charts and hence today I am here with this tutorial. By the aid of this tutorial you will be able to build a layout similar to that of Digg using HTML5 and CSS3 programming.

Digg New Look

Step1: Building the Header

To make it easy for the beginners; I will like to proceed with the process in a hierarchical manner. this heading band portion of the process is integrated with a lot of interesting and customizable features that includes search forms and navigation links.

The code for the portion is given below

As it is understandable from the code that I am implementing a wrapper div to cover the entire blue background. On the other hand the content of the header is placed inside an HTML5 tag with the positioning poles at 1000 px width. Here I am using the tag in corporation with internal anchor links for the top navigation.

To make a much better looking interface; I am making the register and login buttons with round corners and it is all possible just because of the CSS3 rounded corner properties.

Step2: Create Categories List

In this section I had used an unordered list of links instead of creating an another nav element. The category block which is situated underneath the header section; is actually positioned inside an another div with the ID caption #core-content. This step results in centering on your page at 1000px width.

Step3: Listing the Articles

It is really important to note that the front page link is most likely the Digg’s official calling card. Beside with some markup; these individual blocks are really simple to understand and implement.

Along with a class of .story; the wrapping div for each class constitutes two more classifications, the .badge class is for voting bade and the .Story-content is used for a lot of additional traits that includes the title, meta links, description and thumbnail photos of the post.

Actually there are different ways listed in the style sheets to style up these elements but here I am providing just a beginning portion of the reference.

Step4: Pagination Buttons

Please take a note that a small block is loaded after every story that contains pagination links. To give a much better explanation I am writing a basic HTML code below:

In this code I had used the next and previous links to make a navigation base over the left and right side. On the other side; the main centered number is used to display the current viewed page number. At the end of the list when the back or forward options are not possible; the additional .disabled class is posted to the buttons. This step deactivates the link attached.

Step5: Splitting Up the Footer

Please make a look inside the main #core-content div where I had integrated the three main blocks. I’ve actually squeezed three main blocks. At the present phase; The left and right columns of the page are hanging together in a clear box. These left and right columns are fitted with the HTML5 tag. For a much better navigation I am also using in the very bottom block of links.


This is up; we are done with the every section and I hope that you would be watching magic created by you only. I had tried my best to be simple and conventional but at some instances I had used some new properties which could be ‘SUPER NEW’ to you. The detailed information about these properties can be easily fetched from Google.

I hope that now you can code the Digg v4 layout using the HTML5 and CSS3 programming language. For more information or any query you can contact me. I will love to hear your reviews and comments about my work.

Jennifer Adam

The area of interest of Jennifer Adam is to cater technologically advanced and powerful tool which works remarkably with multiple browsers and devices. Being a talented professional of inkyROBO, she is capable of implementing the innovative ideas and also loves to write inspiration blogs.