Things Not To Forget When Starting A Website

18 Nov 2012

Link Your Stylesheets

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/jqueryplugin1.css">
    <link rel="stylesheet" href="css/jqueryplugin2.css">

Remember to link your stylesheets in the header of your HTML doc. Adding stylesheets (and external javascript files) instead of using inline style dramatically increases your modularity and productivity.

Along with your default styles and your additional styles for any plugins you are using, strongly consider using a CSS reset or as an alternative, something like Normalize.css. I personally use Normalize, but there are plenty of resets that will do a great job too. These will make sure that your code stays standard-compliant and working in as many browsers as possible. Nothing is more annoying than your site having five different looks for five different browsers because they're all reading your styles differently.

Add Your Fonts

Adding a link to the fonts you're using will make sure that even if the viewer of your site doesn't have the fonts downloaded, it will still display like you intend.

There are a few different ways you could do this. You could add your own fonts via a folder in your website and serve those to the user with something like Typekit. Adding your own is great if you have your own custom font you wish to use. If you don't have your own, think about using a service like @font-face or Google Web Fonts, which is shown below.

    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>

Add Your Scripts To The Bottom Of Your HTML

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

You always want to add your Javascript to the bottom of your HTML, so you can make sure that your site is loaded first for people that have Javascript disabled.

Also consider using Modernizr, a Javascript library that will let you know whether your code is going to work on different browsers, as well as helping you write conditional CSS and Javascript to help fix any lack of support.

Titles and Meta

    <title>My Website</title>
    <meta name="description" content="">

Be good to your SEO. Make sure to do the minimum and add a title to each page and a meta description.

How To Make Sure You Don't Miss Anything

If you're unsure what you need to add to make sure your site works to its full potential, consider using a boilerplate. Boilerplates are basically extremely light frameworks that will set you up with a starting point with all the details written for you. A good way to look at it is it's a tool that does all the things you would do anyway.

Check out HTML5 Boilerplate for the most up to date boilerplate. It gets updated frequently and you can watch it on Github to follow along.

←