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

Posted by Aaron Peasley
Aaron Peasley
1,411 Points

HTML for Sublime Text 2

I really need a basic HTML that I can either copy and paste into Sublime Text 2, and then run in my browser, or, if possible, I was wondering if there is a simple HTML that you can just open in Sublime Text 2, if so, please let me know.

5 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Aaron,

Check out HTML5 Boilerplate. Sublime Text 2 also has some HTML snippets you can use.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Aaron - I'd suggest you use jsbin.com instead of a basic webpage

But if you really want to use a basic HTML file:

<!DOCTYPE html> 
<html lang="en-us">
    <head>
        <title>My JavaScript Playground</title>
        <meta name="Description" content="My JavaScript Playground">
        <meta charset="UTF-8">
        <script type="text/javascript">
            /* JavaScript goes here */
        </script>
    </head>
    <body>
        <!-- HTML Goes here -->
    </body>
</html>
Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points
Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points

I made my own thing, just a simple stuff: https://github.com/Larrazabal/start-with-this

this is what's inside:

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Untitled</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- Remove http: if not working with file:// protocol -->
        <script src="script.js"></script>
    </body>
</html>

style.css - meyer reset, box-sizing: border-box, text selection color, some styles, and a few class helpers

html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}*,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
::-moz-selection {
    background: #f06;
    color: #050505;
    text-shadow: none;
}
::selection {
    background: #f06;
    color: #050505;
    text-shadow: none;
}
body {
    background: #fdfdfd;
    color: #3d3d3d;
    text-align: center;
    font-family: Sans-Serif;
}
.wrap {
    margin: 0 auto;
    width: 960px;
    text-align: left;
}
a,
a:visited {
    color: inherit;
    text-decoration: none;
}


/*
    ===========================
    === Put you styles here ===
    ===========================
*/


.clearfix{clear:both!important;}
.no-read{speak:none;}
.no-see,[hidden]{position:absolute;left:-9999px;}
.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.none{display:none;}
.align-left{text-align:left;}
.align-center{text-align:center;}
.align-right{text-align:right;}
.align-justify{text-align:justify;}

script.js

var w = window;
var d = document;
var s = 100;
var ss = 150;
var sss = 250;

/*
    ==================
    === Start Here ===
    ==================
*/
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Enrique - You should use normalize.css instead of a hardcoded CSS reset. You can learn more about normalize.css from this Treehouse quicktip

Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points
Enrique de Larrazabal
Enrique de Larrazabal
3,595 Points

Hahahahaha, I hate normalize. Sorry, but i find that it is so much easier to just reset everything :smiley:, I find my self overriding the padding, margins, font-size, etc in Normalize.