Quick Code Snippets

| September 18th, 2011 | Last Updated:

I’m really putting the feelers out there on this cheat sheet, so I definitely need some feedback, if I’m to keep adding code snippets. Request a snippet:

Request a Code Snippet

If you really want to dive headfirst into web designing, blogging, writing, etc., I recommend trying out WordPress.com (completely free).

If you’d rather have more control and do your own thing, you’ll first need to get hosting, and then the self-hosted WordPress software.

Whether you want to build a static site, or a site on top of WordPress, you can pick up the starter website template and WordPress theme that I’ve created here.

If you’re looking for a really basic HTML beginner’s guide, start here.

HTML5 Doctype

<!DOCTYPE html>

HTML5 Page Template

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Page Title | Company Name</title>

<link type="text/css" rel="stylesheet" href="style.css" />

</head>

<body>

<header>

<nav>

... ADD NAVIGATION HERE ...

</nav>

</header>

<article>

<p>... ADD CONTENT HERE ...</p>

</article>

<footer>

... ADD COPYRIGHT HERE ...

</footer>

</body>

</html>

CSS Stylesheet Template

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body{margin:40px 0;background:#eee}
body, input, textarea{font-family:arial,sans-serif;font-size:14px;color:#666;line-height:20px}

p{margin:10px 0}
strong{font-weight:bold}
em{font-style:italic}

a{font-family:georgia,'times new roman',serif;color:#09f;text-decoration:none}
a:hover{text-decoration:underline}

h1, h2, h3, h4, h5, h6{font-weight:normal}

input, textarea{padding:3px 5px 3px 5px;border:1px #999 solid;background:#f6f6f6}
input[type=submit]{cursor:pointer}
textarea{padding:6px 8px 6px 8px;overflow:auto}

header, article, footer{max-width:920px;padding:20px;margin:0 auto}
article{min-height:395px;height:100%;text-align:justify;border:4px double #ccc;box-shadow:0 5px 15px #aaa;background:#fff}

a img, input[type=image]{border:0 none}

jQuery

Add the following between your <head></head> tags:

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>

Learn more about jQuery.

Canonical Link

Add the following between your <head></head> tags:

<link rel="canonical" href="http://website.com/" />

Learn more about the canonical link element.

HTML Entity Symbols

Copyright: ©

&copy;

Heart: ♥

&hearts;