The social news community Digg has been online since 2004 and rapidly grew in popularity leading up to the 2008 elections. Come 2011 the Digg team performed an overhaul on the system and completely revamped the site layout. This also broke the friends system, allowing big-name publishers to game the front page. This upset many powerhouse users who were furious with the major changes.

Over time the site has slowly moved back towards its roots as a user-powered news community. And although the domain has lost some credibility, their design skills are still impeccable. So in this tutorial I want to explain how we can build a similar layout using static HTML5 and CSS3 properties. I won’t have time to cover every detail but you can download my attached source code and play around on your own.

Live PreviewDownload Source Code

Building the Header

I’ll tackle major areas in the layout beginning at the top and working down. For starters the heading band has a couple interesting features, namely the navigation links and search form. Here’s the first portion of the code:

<div id="header-wrap">
	<header class="clearfix">
		<a href="#" class="logo">Diggy</a>

		<nav class="clearfix">
			<a href="#" class="sel">Top News</a>
			<a href="#">Newswire</a>
			<a href="#">Newsrooms</a>
		</nav>

As you can tell I’m using a wrapper div to house the entire blue background. However the content is placed inside an HTML5 <header> tag which is centered at 1000px width. For the top navigation I’ve also included the <nav> tag with internal anchor links.

#header-wrap { height: 48px; background-color: #14589e; border-bottom: 1px solid #0d4f92; }
#header-wrap header { display: block; width: 1000px; margin: 0 auto; padding: 7px 15px 5px 15px;  }

#header-wrap header nav a {
margin: -2px 1px -5px 0;
padding: 0 10px;
height: 40px;
line-height: 49px;
display: block;
font-size: 1.3em;
font-weight: bold;
color: #fff;
float: left;
}
#header-wrap header nav a.sel {
background-color: #194989;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#header-wrap header nav a:hover {
background-color: #194989;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
cursor: pointer;
}

It’s so much easier to setup block-style links and float them right next to each other. Also I’ve taken advantage of the CSS3 rounded corner properties, both on these links and for the categories list. Even the register and login buttons are using rounded corners. They look fantastic and have been a luxury up until now.

Categories List

Instead of setting up another nav element I’ve instead used an unordered list of links. The categories block underneath the header is actually placed inside another div with the ID #core-content. This centers the rest of our page to the 1000px width while also letting the background flow 100% of the browser window.

I copied over most of the important CSS properties for this section. It’s easy to get lost, but the links do look incredible. In fact, both the containing div and unordered list have bottom borders. This gives off the illusion of a double division line.

#core-content .categories { border-bottom: 1px solid #ccdcef; padding-bottom: 2px; }
#core-content .categories ul { border-bottom: 1px solid #ccdcef; padding: 10px 0; list-style: none; width: 100%; }
#core-content .categories ul li { margin-right: 8px; float: left; }

#core-content .categories ul li a { display: block; float: left; font-size: 1.2em; line-height: 1.1em; border: 1px solid transparent; color: #105cb6;  font-weight: bold; padding: 5px 9px 7px; text-decoration: none; }
#core-content .categories ul li a:hover { text-decoration: underline; }
#core-content .categories ul li.sel {  }
#core-content .categories ul li.sel a { background-color: #e3e8f4; border-color: #ccdcef;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }

Listing the Articles

The frontpage links list is probably Digg’s official calling card. You can tell these individual blocks consist of quite a bit of markup – but it’s fairly simple to explain.

<!-- begin story 1 -->
<div class="story clearfix">
	<div class="diggbtn">
		<div class="badge">
		<a href="#" class="count-wrap"><span class="numcount"><span>60</span></span></a>
		<a href="#" class="diggit"></a>
		</div>
	</div>

	<div class="story-content">
		<div class="media"><a href="#"><img src="images/thumbs/s01.png"></a></div>
		<div class="details">
			<h2><a href="#">Obamas kick off campaigning with rallies in must-win states</a></h2>
			<p>
			<a href="#" class="sourcedomain">reuters.com</a>
			<a href="#" class="teaser">— WASHINGTON (Reuters) - With his wife at his side and Air Force One as a campaign plane, President Barack Obama holds his first political rallies <span class="timestamp">2 mins ago</span></a>
			</p>
		</div>
		<ul class="meta">
			<li class="submitter">via <a href="#">Mikeymicron</a></li>
			<li class="comment"><a href="#">2 Comments</a></li>
			<li class="save"><a href="#">Save</a></li>
			<li class="bury"><a href="#">Bury</a></li>
		</ul>
	</div>
</div>

The wrapping div for each article has a class of .story. Inside are two more story classes: .badge for the voting bade and .story-content for everything to the right side. This would include the title, description, meta links, and thumbnail photo if available.

All of the styles for these elements are segregated into their own section of the stylesheet. The yellow digg badge uses a static BG image with dynamic text for the voting numbers. But overall there are way too many styles to go over, many of which do not contain anything new or interesting. But I have copied just the beginning portion for your reference.

/** stories **/
#core-content #left-col .story { display: block; border-bottom: 1px solid #ccdcef; padding: 10px 0; margin-bottom: 10px; }

#core-content #left-col .story .story-content { margin-left: 66px; }
#core-content #left-col .story .story-content .details { margin-bottom: 7px; }
#core-content #left-col .story .story-content .details h2 { display: block; font-size: 1.65em; line-height: 1.2em; margin-bottom: 8px; text-decoration: underline; font-weight: bold; }
#core-content #left-col .story .story-content .details h2 a { text-decoration: underline; }
#core-content #left-col .story .story-content .details h2 a:hover { text-decoration: none !important; color: #121212; }

#core-content #left-col .story .story-content .details p { margin-bottom: 12px; }
#core-content #left-col .story .story-content .details p a { color: #666;  }
#core-content #left-col .story .story-content .details p a:hover { color: #898989; }
#core-content #left-col .story .story-content .details .sourcedomain { border-bottom: 1px solid #cedbf1; color: #5f88ce; }
#core-content #left-col .story .story-content .details .sourcedomain:hover { color: #5f88ce; }
#core-content #left-col .story .story-content .details .timestamp { font-size: 0.9em; color: #999; }

Pagination Buttons

There is a small block located after all of the stories containing pagination links. This is also setup with an unordered list attached with special class names. I copied over the basic HTML in the snippet below.

<!-- paged navigation -->
<ul class="paged-navigation">
	<li class="prev"><a href="#" class="btn-default disabled">Prev</a></li>
	<li class="num">Page 1</li>
	<li class="next"><a href="#" class="btn-default">Next</a></li>
</ul>

The next and previous links are setup to float over to the left and right side. Meanwhile the main centered number text will actively display which page number you’re currently viewing. When you cannot go back or forward anymore the buttons are given an additional class .disabled. This simply drops the opacity down 50%, making the link appear inactive.

#core-content #left-col ul.paged-navigation {
display: block;
width: 100%;
background-color: #eee;
margin: 10px 0;
padding: 7px;
padding-top: 15px;
padding-bottom: 13px;
list-style: none;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#core-content #left-col ul.paged-navigation .disabled { opacity: 0.5; cursor: default; }
#core-content #left-col ul.paged-navigation .disabled:hover { cursor: default; }

#core-content #left-col ul.paged-navigation .prev { float: left; }
#core-content #left-col ul.paged-navigation .next { float: right; }
#core-content #left-col ul.paged-navigation .prev a, #core-content #left-col ul.paged-navigation .next a {
width: 3em;
font-size: 1.1em;
padding: 6px 10px;
}

#core-content #left-col ul.paged-navigation a.btn-default {
background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#f3f3f3));
background: -moz-linear-gradient(top,#ffffff,#f3f3f3);
background-color: #f3f3f3;
border: 1px solid #aaa;
color: #333;
text-shadow: #fff 0 1px 0;
zoom: 1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-weight: bold;
letter-spacing: -0.03em;
line-height: 1.25em;
}

This is the last block piece we have before closing the main left column. The whole content div is made up of just a left and right side, plus a simple footer. The style is very minimalist and works in the same archetype as classic Digg.

Splitting Up the Footer

Looking inside the main #core-content div I’ve actually squeezed three main blocks. The left and right columns are floating next to each other inside a cleared container. Both are fitted with the HTML5 <section> tag. And we’re also using <footer> in the very bottom block of links.

<footer>
	<ul class="data">
		<li class="copy">Original Design by <a href="http://digg.com/">Digg Inc.</a></li>
		<li><a href="#">About Digg</a></li>
		<li><a href="#">Advertise</a></li>
		<li><a href="#">Partners</a></li>
		<li><a href="#">API & Resources</a></li>
		<li><a href="#">Blogs</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">Jobs</a></li>
		<li><a href="#">Help & FAQ</a></li>
		<li><a href="#">Terms of Service</a></li>
		<li><a href="#">Privacy</a></li>
		<li><a href="#">Top 100</a></li>
	</ul>
</footer>

All of the main components are fairly straightforward to understand. There are possibly some newer properties I’ve used which you have never encountered before. But with just a quick Google search you can look further into all of them.

I left the right column open so there’s much more room for different block areas. These could include popular stories or recently logged in users. Overall I wanted the layout to be simple – merely a template to pay homage to Digg’s fantastic work. And also to prove that you can really build anything in HTML5 and CSS3.

Live PreviewDownload Source Code

Conclusion

Rebuilding the Digg v4 layout from scratch is exciting and certainly fun. Their team is very talented, and I’ve always been a fan of the social news genre. As I mentioned earlier feel free to download my example source code and play around with some of the properties. It’s easy to reorganize page elements and sample them in your own layouts.

You might also like…

How to Build an Accordion Image Gallery with only CSS →
Scroll to Internal Link with jQuery →
How to Build a Sliding One Page Portfolio with jQuery →
Hoverizr – An in depth view of the jQuery plugin →
Rubber Layouts – Combining Static and Fluid Layouts →
How to Build a Fully Functional CSS3-Only Content Slider →
Resize Images in a Post with jQuery, and turn it into a plugin →
Getting Started with WordPress Shortcodes (+Examples) →

It has been well over a year since we last took a look at some of the latest CSS3 buttons techniques. And what a difference a year makes.

No longer satisfied with just using the basic CSS3 properties (border-radius, box-shadow…), many developers have progressed to using @font-face icons, animation and 3D effects. All with only CSS.

Hope you enjoy this selection:

CSS Social Buttons

CSS Social ButtonsView the Demo

Orman Clark’s Chunky 3D Web Buttons

Orman Clark’s Chunky 3D Web ButtonsView the Demo

CSS Buttons with Pseudo-elements

CSS Buttons with Pseudo-elementsView the Demo

Soft, Customizable Pressure Buttons in CSS

Soft, Customizable Pressure Buttons in CSSView the Demo

Animated Buttons with CSS3

Animated Buttons with CSS3View the Demo

Awesome CSS3 Buttons

Awesome CSS3 ButtonsView the Demo

Simple CSS3 Buttons

Simple CSS3 ButtonsView the Demo

Animated Download Button With CSS3

Animated Download Button With CSS3View the Demo

How to Create CSS3 Buttons

How to Create CSS3 ButtonsView the Demo

Free CSS3 Button Styles

Free CSS3 Button StylesView the Demo

CSS3 Google UI

CSS3 Google UI

Google+ Styled UI Buttons

Google+ Styled UI Buttons

Twittter Buttons

Twittter Buttons

CSS3 Buttons

CSS3 Buttons

CSS3 Buttons

CSS3 Buttons

Fancy 3D-Button

Fancy 3D-ButtonView the Demo

Add to Cart Buttons

Add to Cart ButtonsView the Demo

3D Facebook Button Concept

3D Facebook Button ConceptView the Demo

Animated CSS3 Buy Now Button

Animated CSS3 Buy Now Button

You might also like…

22 CSS Button Styling Tutorials and Techniques →
20 Awesome jQuery Enhanced CSS Button Techniques →
20 CSS3 Tutorials and Techniques for Creating Buttons →
CSS3 Menu and Navigation Tutorials →
25 Free Fonts Perfect for @fontface → & @fontface Icons →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
Pure CSS Alternatives to Javascript →
40 Essential CSS Templates, Resources and Downloads →

Or, you could browse our extensive CSS Archives →

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :)
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

CSSPop – The Snippet Community

The Toolbox – A Directory of Useful Single-Page Sites & Apps

Responsive IE6 – Test your site's responsiveness in IE6

BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS

A Separate Mobile Website: No Forking Way

How To Build A Real-Time Commenting System

Mastering CSS Gradients in Less Than 1 Hour

How to Make Smooth Transitions with CSS3

How to Create a Fast Hover Slideshow with CSS3

Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

How to Create an Video Player in jQuery, HTML5 & CSS3

A Newbie’s Guide to Android Development

Which Responsive Images Solution Should You Use?

Getting Started With RESS

Sketch 2: A Worthy Photoshop Competitor?

How to Use Drop Shadows in Photoshop

Amazing Paper Typography

Free Vector Map Location Pins

Free Stained Paper Textures

41 Free Social Media/Networking Icons (PNG)

This Week on CodeVisually

Here are our favorite webdev resources from the past week:

Few weeks ago, we covered the European Union’s Cookie Law, and its implications on websites based in Europe. Thereafter, we have also covered the reactions to the said law. In fact, as a UK-based site, Speckyboy itself firmly stands in support of such protests against the Cookie Law.

Speaking of protests, Silktide, one of the most prominent critics of the Cookie Law and the brains behind concepts such as No Cookie Law and the popular YouTube video The Cookie Law in Under Three Minutes, has come up with a free open-source solution to the EU Cookie Law, named Cookie Consent.

In simplest terms, Cookie Consent is a Javascript plugin created specifically for websites that are required to comply with the Cookie Law. Once installed on your website, the plugin will show your users a drop down message, asking them whether or not they’d like to allow cookies or not. Neat, eh?

Apart from setting preferences for your own website, users can also set Global Preferences, which means they can enable or disable plugins for all websites in one go! As the webmaster, you can specify whether the drop down occurs from the top or the bottom of your site, and you can use custom CSS to customise its look and feel. And just in case that doesn’t make you happy, Cookie Consent is licensed under GNU GPL, so you can redistribute and modify it, if so needed.

Useful URLs

Cookie Consent Homepage →
Cookie Consent Documentation →

Over to you: what do you think of Cookie Consent and the underlying logic? Will you be using it on your website? Do share your thoughts with us in the comments.

The ubiquity of technology in our daily lives has made programming an indispensable DIY skill for the digital age. The ‘learn to code‘ movement, kick started by the easy availability of free interactive coding lessons on platforms such as Codecademy, combined with the inevitable shift of talent towards entrepreneurship in a depressed job market, has introduced thousands of people to programming.

Programming is difficult. Even the simplest of coding languages have steep learning curves. Add to that the imperative task of fixing security loopholes, and you have the perfect recipe for a concoction that can intimidate all but the most resolute of new converts to this field.

Most new programmers (and many old hands as well) are guilty of a committing a bevy of programming mistakes, some of which can be virtual suicide for a promising app or software program. The six most common programming mistakes are:

1. Not Validating Input

A numeric input field should get a numeric, not alphabetical input. A field that checks the price of a new car shouldn’t accept a dollar sign and other special characters. Validating the input is one of the fundamental rules of programming; breaking it can often lead to patchy performance and a host of easily exploitable vulnerabilities. Not only can hackers gain control over an app by carefully modifying the input, but incorrectly validated input also disrupts the data flow of a program.

How to avoid it:

Begin by using an input validation framework such as OWASP ESAPI Validation API (available for many languages). Maintain a strict policy of assuming all input as potentially malicious until further verification. Carefully examine all potential sources of vulnerabilities – filenames, databases, cookies, etc. – fixing each along the way. You can never really be too obsessed with security; using an input validation framework, and careful cross-checking of the code are only a few precautions to prevent a security mishap.

2. Cross-Site Scripting (or, Failure to Neutralize User Input)

Another common programming mistake is a failure to neutralize user-input before using it to generate output on a dynamically generated web page. Suppose a web-page requires input from a user (such as a comment field) before redirecting him to a dynamically created web page that incorporates that data. If the programmer fails to neutralize the user’s input, a hacker can insert malicious code into the input field, which can subsequently lead to inclusion of malicious, browser executable content (JavaScript, Flash, etc.) in the page.

How to avoid it:

Cross-site scripting usually occurs when users are allowed to submit unregulated content to be consumed by other users of a website. It is most common in sites that allow user-generated content such as comments for forum posts. This exploit has been prevalent since the beginning of the internet when ‘guestbooks’ were a common feature on most sites.

To prevent this from occurring, consider using a vetted framework that makes it easier to generate neutralized output, such as the Microsoft Anti-XSS library or the OWASP ESAPI Encoding Module. Further, carefully examine your code and understand the relationship between various components, neutralizing and escaping any user-generated content before outputting it to a web page. This cross-site scripting prevention cheat-sheet is a good resource as any to learn more about this exploit.

3. SQL Injection (or, A Major Failure to Neutralize User Input)

The previous mistake only affects other visitors to your site; but failure to neutralize user input before using it for database interaction is the even nastier version of this problem – it can take your entire site down and wipe out precious data. This should actually be the number one problem, because it causes more serious problems and dangerous security breaches than probably any other mistake. Mess up on this one, and your entire server could be taken over by a hacker.

How to avoid it:

To learn more about the technical details of SQL injection attacks, read this article on SQL Injection. The solution is actually rather simple: always, always escape all user input before using it in a database query. Most programming languages have built-in functions to clean user input before use in database queries. (For example, mysql_real_escape_string in PHP.)

4. Poor Formatting and Improper Comments

By its very nature, programming is a collaborative effort. This means that code generated by one programmer may be accessed and modified by other programmers days, months, and even years down the line. A failure to format the code and provide effective comments detailing each function makes code unmanageable and difficult to maintain.

How to avoid it:

Each programming language has its own entrenched ‘grammar’ and style guidelines. When in doubt, refer to them to gather insight on how to effectively comment and format code. Regardless, develop a habit of inserting appropriate white-space and starting each new function with a comment detailing its use and scope. Practice brevity; comments need to be concise and to the point, not overly wordy. A couple of well-written comments can go a long way in making code easier to read and interpret. Also, be careful to break up code by the specific task it performs; avoid run-on code, just like run-on sentences.

5. Improper User Authorization

Controlling what logged-in users can and cannot do is crucial to ensuring application security and stability. Inadvertently allowing users access to forbidden areas is a mistake new and old programmers alike are sometimes guilty of. Most recently, the ICANN allowed applicants to its new gTLD program to view other applicants’ private information in a major security gaffe, proving not only the pervasiveness of this programming error, but also its injurious consequences.

How to avoid it:

Each application should be divided into limited (normal), privileged, and administrative areas, and given rights and control accordingly. Most logged-in users must be granted limited additional rights, and only a few trusted parties must be given administrative control. Use of role-based access control (RBAC) is also highly recommended.

It is also recommended that you use a vetted library (such as the JAAS Authorization Framework for Java) to make this weakness easier to avoid.

6. Using Hard-Coded Passwords

This is one of the most prevalent programming mistakes, simply because of its convenience. Using a secret hard-coded password for authentication across all the components of a software program makes modifying the code very easy, but also makes the software vulnerable to security breaches. If an enterprising hacker gains access to this password, not only will the security breach be nearly impossible to detect, but also difficult to fix, putting your entire product at risk.

How to avoid it:

Every software program utilizes either of the two authentication methods: outbound (i.e. connecting to an external database or file to verify authentication), and inbound (the authentication mechanism is built into the software itself). For outbound authentication, it is best to save all relevant login data in a strongly encrypted database or protected file. No outside user should be granted access to this information.

For inbound authentication, the security vulnerabilities of a hard-coded password can be circumvented by requiring all users to enter a unique, strong password upon first registration. These user-specific passwords should be “salted” (the process of adding a special secret string to the actual password), then hashed using a one-way hashing algorithm before storage. Passwords should never be stored in plaintext.

In conjunction with access control checks, the elimination of hard-coded passwords can significantly improve the security of your program.

You may also like…

Good Old Static HTML Sites Aren’t Dead Yet. Should They Be? →
Should You Keep Your Website Open Source? →
Should Designers know how to code? What do you think? →
Is a Design House-Style Really Necessary? →
Repeat Work and the Search For The Holy Grail →
Thoughts and Considerations for Freelancing on a Part-Time Basis →
Is Working Freelance Really Worth It? Pros and Cons →