7 posts
  • 5 Years of Membership

Hi guys

I am currently learning HTML5/CSS3. Now, after three weeks, two books and a lot of playing with these instruments, I am reviewing some HMTL5 themes here on Themeforest. What I know now is that there are huge differences regarding quality and usage. Well, of course every template has another semantic and structure. Some of them use more code, other less, some of them have a smart strcuture – other not.

Anyway, a questions to the real Gurus here: Which templates can I consider as best practise examples?

48 posts
  • 6 Years of Membership
  • Author Level 1
  • Collector Level 1
  • Exclusive Author
+1 more

i would suggest you HTML5 boilerplate

here is the Link

and on nettuts there is an Official video tutorial from the Creator Paul Irish. Here is the Link

3 posts
  • 4 Years of Membership
  • Beta Tester
  • Exclusive Author
  • Switzerland

I don’t think that he means this. I think he’s looking more to examples to understand what the developer did, right?

7 posts
  • 5 Years of Membership

I already know all these tutorials and I am already able to practice this so far.

But what I mean is, which is the best coded template regarding quality, structure, semantic, etc. Furthermore I am looking for a intelligent and smart example coded by a real Guru where I can learn more than in standard tutorials.

Hope this helps..

576 posts
  • Elite Author
  • Author Level 8
  • 5 Years of Membership
  • Trendsetter
+4 more

No, we don’t know who is the proud owner of “best coded” template but in my opinion template to be considered as good coded first need to have valid html code. If you take a look at templates here you will often see unique features that can’t be easily achieved by someone who just learned basic coding. That are examples to learn from if you want to achieve advanced coding knowledge.

161 posts
  • Author Level 5
  • Collector Level 1
  • 4 Years of Membership
  • Exclusive Author

Not sure which template is best coded but here’s a few guidelines i follow.

Table of contents in the CSS (at the top)

That way it’s easy for both you and those who check the CSS to find what they are looking for in no time. Here’s a sample from our theme.

Table of Contents

    1.0 Normalize
    2.0 Columns
    3.0 Typography
    4.0 Form Elements
    5.0 Header
        5.1 Logo
        5.2 Tagline
        5.3 Navigation
    6.0 Main
        6.1 Portfolio
        6.2 Portfolio Filters
        6.3 Blog
            6.3.1 Format post type
            6.3.2 Quote post type
        6.4 Blog List (homepage)
        6.6 Skills
        6.7 Work Experience
        6.8 Sidebar
    7.0 Footer
    8.0 Shortcodes
        8.1 Buttons
        8.2 Messages
        8.3 Content Box and Accordion
    9.0 FlexSlider
    10.0 Responsive
        10.1 Tablets
        10.2 Phones (landscape + portrait)
        10.3 Phones (portrait)
    11.0 Helper Classes
    12.0 Print Styles

So, in the section bellow do like this:

* #.# Section Title
* Section description (not required)

Organized CSS properties

There are a few different methods here but i’m using the alphabetical organization. Also in the example bellow you’ll see every selector is on a separate line (in case of multiple selectors for same rules). You will also notice that after a property: there’s a blank space before the value.

.selector-3 {
    background: #hex;
    display: block;
    font-size: 15px;
    margin: 10px;
    padding: 10px;
    width: 200px;


There isn’t much to say here, just keep your code properly indented. For elements that have more lines of code inside put a comment at the closing tag so it’s easier to figure out what it’s closing.

<div class="selector">

    <div class="selector-2">
        something in here

    <div class="selector-3">
        something in here

    <div class="selector-4">
        something in here

</div><!-- .selector -->
438 posts
  • 6 Years of Membership
  • Exclusive Author
  • United States

As a learning tool, http://themeforest.net/user/greenshady

It’s not the flashiest or feature packed theme but the dude is a WP guru.