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:
Smultron (recommended by Ehud, seems the programmer has discontinued future development)
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.
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!
another decent tutorial
if video is more your learning style, or to keep going after our classes, check out these sites:
super basic intro, 40 minutes long.
This is a continuing ed course at harvard, gets much more advanced but worth knowing about:
Good overview here of what CSS is and how it can be used to style pages (more effectively than HTML).
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.
Not sure about the interface on this site but there is some good info contained within, including the video below.
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
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.
good summary but less well explained what everything does.
great reference, with plailn english explanations, see also her html ref below.