Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Is this HTML following BEST practices?

Hi,

Is this HTML following best practices?

Look where the meta tag is places, at the top. I know that bootstrap uses best practices under it's magic, so I assume meta tags should always go at the top.

Later they had a favicon, so thats ok? followed by title.

Now, there is CSS. Normalize is first, just in case you want to over-write any styles with the main styles.css.

Now, fonts are the last, starting from the font-from folder.

JS is at the bottom of the page, starting from a library followed by scripts.js.

Is this all okay?

It must be stricktly following best practices. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="urtf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" href="../../favicon.ico">

        <title>It's Christmas Time</title>

        <!-- Core CSS -->
        <link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="assets/css/styles.css">

        <!-- Fonts -->
        <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">

    </head>
    <body>


    <!-- HEADER -->
    <header id="main-header">

    </header>


    <section class="video-intro">

    </section>


    <section>

    </section>


    <!-- FOOTER -->
    <footer id="main-footer">

    </footer>

    <!-- Core JavaScript
   ================================================== -->
    <script type="text/javascript" scr="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/scripts.js"></script>

    </body>
</html>

Heres the codepen

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

OH! My folder structure looks like this:

You have assets folder that contains:

CSS

fonts

js

And then i have resources that contains:

img

audio

videos

Is that a good file structure?

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I have a few notes and these are just my personal opinions. I would prefer to see everything inside the <body> tag indented. Also, the <section> element is used to give meaning to a section of content. But given that there is no content this is not needed.

As for the file structure, I don't know why you've chosen to capitalize CSS for your folder. I would probably remove the resources folder and leave the js folder, css folder at the root level. Then under the assets folder I would have img, fonts, audio, and video folders. You might also consider an extra folder for html at your root level. Just my two cents!

And btw, the link to your codepen just opens up a brand new pen for me when I log in. It doesn't actually link to your codepen.

Good luck! :sparkles:

edited for additional note

Also, your charset is misspelled. That should be <meta charset="utf-8">

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Thank you.

The sections are for future, I usually make the HTML layout first, and then add accordingly.

The folder is in small, but thank you :D I will do the file structure you mentioned, seems better :)

This here hopefully it will work, is another thing i came up with , think that's better? or same as the other one?

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

I agree with Jennifer Nordell, also I would like to point that I just use id's for the purpose of programming, all the rest I use classes.

I recommend you these favicon generators, they produce more options of favicons to different screen sizes. http://realfavicongenerator.net

http://iconogen.com

PS: The meta charset is written urtf-8 (with R), when the right is utf-8, just a typo :)

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Thank you :)

Yes, i switched it to classes now.

Thank you for all the useful links you gave to me :D There is a lot to read. It's pretty hard to find stuff about HTML first lines of code or some CSS fully commented code : d so im trying to make the best as I can. Now I'm doing a Master Piece website, where I will do everything carefully as DRY and as OOCSS as possible.

:D