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;