Social Ink recently taught a class in basic HTML and CSS at The Public School NYC, an exciting new community organization offering free classes and workshops. We had a great time and hope that you learned a thing or two. Here, as promised, is a resource list and some links and notes from class.

Welcome Public Schoolers. Here is the resource list we made in preparation for the HTML and CSS class.

Software: Text Editors

You can always use notepad (pc) or textedit (mac), but many text editors provide color coded markup detection that will make coding that much easier. Here are a few that we have used or read good things about:

PC:

HTML KIT
http://www.chami.com/html-kit/

Notepad + +
http://notepad-plus.sourceforge.net/uk/site.htm

Mac:

Text Wrangler
http://www.barebones.com/products/TextWrangler/

Smultron (recommended by Ehud, seems the programmer has discontinued future development)
http://sourceforge.net/projects/smultron/files/

Bluefish
http://bluefish.openoffice.nl/

Komodo Edit
http://www.activestate.com/komodo_edit/

HTML Tutorial and Reference

So, if you search for html tuturial or css tutorial there about a million results. Here are some of the better ones. But if these don’t work for you please do try a quick search.

HTML Tutorials:

http://www.w3schools.com/html/html_intro.asp
Nice built-in editor here so you can experiment yourself, and a good overview of basic html tags. Note however that some later chapters teach formatting with html, which we recommend doing only with css (this is the semantic approach which will be covered in class 1). Be careful if you choose to use html (rather than css) to affect changes to the style (colors, text bolding, etc.) or layout (positioning of various elements) of your document!

http://htmldog.com/guides/htmlbeginner/
another decent tutorial

if video is more your learning style, or to keep going after our classes, check out these sites:

http://www.youtube.com/watch?v=GwQMnpUsj8I
super basic intro, 40 minutes long.

This is a continuing ed course at harvard, gets much more advanced but worth knowing about:
http://academicearth.org/courses/building-dynamic-websites


CSS Tutorials:

http://www.html.net/tutorials/CSS/lesson1.asp
Good overview here of what CSS is and how it can be used to style pages (more effectively than HTML).

http://www.w3schools.com/css/default.asp
w3schools css overview, particularly worth noting are the advantages of using an external style sheet, which is a separate css file which can control the layout of many or every page on your site. By using an external stylesheet rather than writing css styles into each page of your site, you can edit the single stylesheet file and see your changes reflected on every page across your site.

http://www.csstutorial.net/category/css-basics/
Not sure about the interface on this site but there is some good info contained within, including the video below.

video:

http://www.killersites.com/web-design/videos/introduction-to-css.php
this guy talks forever but ffwd to ~5:30 and he does a little example of css implementation using dreamweaver cs3. Note he does not use an external stylesheet but rather uses <style> tags to load some quick styles into a single HTML document

http://cssvideos.com/
five css videos at the moment.

Reference and Cheat Sheets

Once you get the concepts down, these provide good reference. Again, a quick search will turn up many of these.

CSS

http://www.w3schools.com/css/css_reference.asp

http://www.lesliefranke.com/files/reference/csscheatsheet.html
good summary but less well explained what everything does.

http://www.elizabethcastro.com/html/extras/cssref.html
great reference, with plailn english explanations, see also her html ref below.

HTML

http://www.elizabethcastro.com/html/extras/xhtml_ref.html

http://www.psacake.com/web/dy.asp

http://www.webmonkey.com/cheat-sheets/
css also…

http://www.w3schools.com/tags/default.asp