7 posts
  • Has been part of the Envato Community for over 3 years
Sedro89 says

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
  • Has been part of the Envato Community for over 3 years
  • Has sold $1+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
H4run says

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
  • Has been part of the Envato Community for over 1 year
  • Has been a beta tester for an Envato feature
  • Sells items exclusively on Envato Market
  • Located in Switzerland
PrimaGento says

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
  • Has been part of the Envato Community for over 3 years
Sedro89 says

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..

520 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
  • Won a Most Wanted contest
+2 more
rayoflightt says

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
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Has been part of the Envato Community for over 2 years
  • Sells items exclusively on Envato Market
themebros says

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.5 Comments 
        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,
.selector-2,
.selector-3 {
    background: #hex;
    display: block;
    font-size: 15px;
    margin: 10px;
    padding: 10px;
    width: 200px;
}

HTML

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>

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

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

</div><!-- .selector -->
438 posts
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in United States
christopherjon says

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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by