Note: I started writing this post and it got long, really fast. I’m going to publish what I have and worry about tuning it up later…

I believe that everyone can and should learn how to make a simple, static website. There are billions of websites and our lives increasingly involve the web (a nice side effect: there are a lot of jobs in the area). What do you need to begin? A text editor and a web browser. Now you’re on your way to creating webpages with HTML/CSS!

TL;DR

Open a text editor, type or copy/paste in <html><head><title>title</title></head><body>body</body></html>, save the file as index.html, fire up a web browser, and open the file. You’ve just created a webpage!

Full

HTML - the structure:

CSS - the style:

Text editors: (NOTE: a platform is another way of saying operating system like Mac OS X, Windows XP/Vista/7, etc)

  • Notepad (Windows only, built-in, free)
  • Wordpad (Windows only, built-in to, free)
  • TextEdit (Mac only, built-in, free)
  • gedit (Linux only, built-in to Ubuntu, free)
  • Notepad++ (all platforms, downloadable, free)
  • TextMate (Mac only, downloadable, ~$58)
  • Eclipse (all platforms, downloadable, free)
  • jEdit (Linux only, downloadable, free).
  • In a pinch, Microsoft Word or another word processor will work, but these are suboptimal.
  • You could also learn Vim, emacs, nano, pico, or a number of others, but I don’t think they’re as user-friendly–their power comes from features that a designer probably won’t need.

Web browsers:

  • Google Chrome (all platforms, downloadable, free) - my favorite for speed and built-in tools
  • Mozilla Firefox (all platforms, downloadable, free) - my favorite for extensibility
  • Apple Safari (Mac/Windows, built-in/downloadable, free)
  • Microsoft Internet Explorer (Windows only, built-in, free) - the most popular browser on the web
  • There are other web browsers, but they do not have significant market share.

I would recommend you start with a concrete task, like creating an “About me” page that explains who you are and what you’re doing. Here’s a simple HTML program that you can copy and paste into your text editor, save as index.html, and open in a web browser.

<html>
  <head>
    <title>
      Title
    </title>
  </head>
  <body>
    Body
  </body>
</html>

Now, extend your simple page. Here are a few recommended tasks:

  • use a new HTML element like a section heading (<h1>…</h1>), a link (<a href=”“>…</a>), or a paragraph (<p>…</p>)
  • create and link to an external style file
  • change the font
  • change the font color
  • add an image
  • change the background color
  • create a content box that is centered on the page (hint: set width and margins)

From here, the sky is the limit! You can create HTML emails, partner with those who do not know how (or are too busy) to make websites, improve the usability of sites for anyone who will let you (for example, non-profits and local favorites).

Anytime you see a webpage you like, simply right click on the background and view the source. The Safari and Chrome inspectors are particularly nice for seeing how the markup and style are interacting.

More advanced topics include SEO, creating your own graphics, further reading, and JavaScript. I’ll provide a few links about each below.

HTML/CSS advanced topics:

  • Pseudo elements
  • Selectors
  • CSS3 animations, transitions
  • HTML5 controls like audio and video

JavaScript

  • JavaScript
  • Choose a framework like jQuery, Dojo, or ExtJS

Search engine optimization (SEO) - where your page appears on Google (and other search engines) is tied to your content as well how you structure and style it. Knowing the basics of SEO will let you create pages that will appear higher in search engine results.

Accessibility - related to SEO is accessibility. If you create your markup properly, your content will be “readable” by people with disabilities. Luckily, Google reads your site very similar to the tools utilized by people with disabilities, so making your site more accessible means your site will rank higher on search engines.

Use free UI packs

Create your own graphics -

  • Adobe Photoshop and Photoshop Express
  • Adobe Illustrator
  • GIMP
  • Inkscape
  • Pixelmator
  • Microsoft PowerPoint
  • Microsoft Paint
  • Apple Preview

Tools and resources

Version control

  • Git
  • Subversion
  • Dropbox

Where to go to learn more and be inspired -