Using HTML5 and CSS3 to Build a Blog Design

1. I found a really good tutorial by Net Tuts on using HTML5 to build a CSS layout for a blog. It also uses some new CSS3 techniques. You can find it here:
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-t...

2. This tutorial was written in 2009, so some of the HTML5 specs have changed since then.
  • The element header must not appear as a descendant of the footer element.
  • The section element should not be used to wrap articles just to demarcate content as described here http://html5doctor.com/the-section-element/

3. You can make this tutorial work in IE by adding this code to the head element.
<!–[if lte IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

See http://remysharp.com/2009/01/07/html5-enabling-script/

4. I recommend using DOCTYPE in capital letters and add a the meta tag for charset. So the first part of the code looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Nettuts HTML5</title>
<link rel="stylesheet" href="nettuts.css" type="text/css" />
<!--[if lte IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

5. You may need to tell your browser to treat the new HTML5 semantic elements as a block to get them to work like your previous divs. Add this code to your CSS.

/* Tell the browser to render HTML 5 elements as block */
header, footer, section, aside, nav, article {
    display: block;
}

6. Validate your HTML5 code here: http://validator.w3.org

and validate your CSS code here. http://jigsaw.w3.org/css-validator/
I chose the CSS 3 profile but it still says that many of the CSS3 styling eg. rounded corners is not valid.
I recently updated my CSE HTML Validator and it validated all of my CSS3 code. I recommend using CSE HTML Validator. It's an editor and a validator all in one. http://www.htmlvalidator.com/

7. You can download the final design with my modifications here. It's a zip file including the images.
http://www.seascapewebdesign.com/sites/files/html5-flower-blog.zip

Comments

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Good share,, thanks for sharing these steps to build a blog design. Next time, I'll use this code to design my sites. Here is the code to create a Minimal Blog Design Using HTML5, CSS3 and jQuery. Any one can easily follow this code to design their blog, even a newbie can. Title

joel sutherland

This is my site - http://www.html2pdfrocket.com/ and I used this code to design this site.. Cheers!!

Manmeet

Great Post ! CSS3 tutorial with simple and easy examples,covering CSS3 Modules, Background Properties, Borders, Gradients, Shadow Effects, Web Fonts,Text,2D & 3D Transform, Transitions, Animations, Multiple Columns, User Interface, Box Sizing. HTML5 Tutorial & CSS3 Tutorial.

This page

Huh.....I thought there would be more to developing a blog page, well I stand here corrected and relieve that this is all it takes.

Really informative article.

Really informative article. Thanks for this one. I am not good in css and html codings myself. Instead, I use online css generators like http://www.generatecss.com/css/position/ and http://css3generator.com/ it offers me great help and at the same time, I get to finished my work on time.

HTML5 blog design

Wow so good information about HTML5 and Css3 thanks a lot for sharing. Here i also want to share a very best site where anyone can share their site to get better responses in their business. HTML5 mobile app design

More about HTML 5

Hi! nice post you got here! We also have a related article about HTML5 in our site. You may want to check it out, it might help. Visit www.ideyatech.com/2013/10/javascript-programming-with-html5-data-attribu... Thanks! :)

thanks for the info

this was really helpful XD

Nice info and to the point

Nice info and to the point tutorial. anyway I found the url for final design is not active.

URL

But where is download link?

I apologize for the broken link.

I apologize for the broken link. Here is the correct link to download my modifications to the HTML5 blog mentioned above. http://www.seascapewebdesign.com/sites/files/html5-flower-blog.zip