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!
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!
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.
- 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.
HTML/CSS advanced topics:
- Pseudo elements
- CSS3 animations, transitions
- HTML5 controls like audio and video
- 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.
- Wikipedia – SEO – high-level overview
- Google Search Engine Optimization Starter Guide – the search engine to get ranked
- SEOmoz beginners guide – another great introductory read
- Alexa – see traffic amounts and webpage information
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
- Microsoft PowerPoint
- Microsoft Paint
- Apple Preview
Tools and resources
- Stack Overflow
- Firefox addon – Firebug
Where to go to learn more and be inspired –