Home

Using HTML5 and CSS3 to Build a Blog Design

Posted by Katy | Categories:
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
Share this post with
  • Facebook
  • Google
  • LinkedIn
  • Twitter

Comments

AckleySmith

Submitted by Visitor on Thu, 03/16/2017.
Helpful information, this information is really useful to beginners. http://www.consistenza.com/html5-development.html

Upgrade to CSS to AngularJS

Submitted by Visitor on Sat, 02/18/2017.
AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.Know more: http://www.credosystemz.com/training-in-chennai/best-angularjs-training-...

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Submitted by Visitor on Sun, 02/14/2016.
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

Submitted by Visitor on Thu, 10/08/2015.
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.

I have not gained much

Submitted by Visitor on Wed, 08/03/2016.
I have not gained much knowledge with the rest of the HTML5 Tutorial and CSS3 Tutorial which forms the basis to enter into mobile application development.I find your tutorial links are nice simple giving lot of examples for each topic, very clear gave much confidence to work in any mobile application development company.Thanks.

This page

Submitted by Visitor on Sun, 10/19/2014.
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.

Submitted by Visitor on Fri, 07/18/2014.
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

Submitted by Visitor on Tue, 05/13/2014.
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

Submitted by Visitor on Wed, 10/09/2013.
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

Submitted by Visitor on Tue, 06/26/2012.
this was really helpful XD

Nice info and to the point

Submitted by Visitor on Tue, 04/17/2012.
Nice info and to the point tutorial. anyway I found the url for final design is not active.

URL

Submitted by Visitor on Thu, 09/29/2011.
But where is download link?

I apologize for the broken link.

Submitted by Katy on Thu, 04/19/2012.
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