Learning HTML5 & CSS3

How did you learn to code?

I ask because a couple of recent chance encounters have got me thinking that there are some pretty big gaps in people’s knowledge of HTML5 and CSS3.

For example, I was chatting to a student who approached me at an event last Saturday. He asked me where he could go to learn HTML5. I suggested a few books and started explaining how HTML5 differs from HTML4. He interrupted and said, “Sorry you don’t understand… I have no idea about HTML 4 either.”

Is it me or is there a real problem here? After all, the guy was enthusiastic, he wanted to learn but was struggling to find the right resources for him. The problem seems to be that too many of the current books and sites assume that you’re simply moving up from an earlier version. So they spend a lot of time putting HTML5 into context by making exactly the same mistake as I did – explaining how it was different from HTML4 (or 3 for that matter).

When I started web development back in the late 90′s (when dinosaurs ruled the world) I remember starting with WebMonkey.com. Then I moved on to learn DHTML from DHTMLcentral.com. And then on to 4guysfromrolla.comto learn server-side programming.

Is there a modern day equivalent? A resource that guides people from complete beginner to web developer. Or do we simply expect all new developers to find their own way?

What site, book, course etc would you recommend to people that are just beginning in web design and development?

Published by thebeebs

Thebeebs is a Canadian pop singer, songwriter, actor and HTML5 junkie. Throughout his rise to fame, Thebeebs has been nominated and awarded numerous accolades, winning Artist of the Year at the 2010 American Music Awards, and being nominated for Best New Artist and Best Pop Vocal Album at the 53rd Grammy Awards. Thebeebs is considered a teen idol, and has been subject to acclaim from fans, as well as criticism and controversy from matters concerning his popularity and image.

9 Comments So Far, what do you think?

  1. Sam Hardacre

    I’ve not used if for a long time but HTML Dog may be a good place to start. Starts with the basics of HTML tags, elements, attributes etc, and introduces CSS too.

    Some practices may be a little dated now so I’d encourage beginners to investigate further but this would give a good grounding to start from :)

  2. Luke

    I know a lot of people poo poo it, but w3schools is still quite good. For newer stuff I usually trawl css-tricks or webdevtuts.

    That and the Twitters…

  3. Spooner

    WYSIWYG (WissyWig) me up butter cup!

    Front Page (seriously, I’m not just saying that) and The Beaver (Dreamweaver) taught me the basics initially. Seeing how changes in the design view correlated to changes in the code view was the eye opener for me. It wasn’t long till I realised that WissyWig mostly produced shameful code and I switched to a proper code editor. Then, I too moved over to WebMonkey.com and various web design forums.

    These days, I just interrupt TheBeebs (ha!) but if he’s not around, various books by John Allsopp, Andy Clarke and Bruce Lawson are handy for reference.

  4. Alex Older

    I learnt by picking sites apart in Dreamweaver when tables were cool. I learnt how to built contact forms and news scripts by picking free scripts apart when I wanted to change the way it output certain things. I slowly built up my own sites using Dreamweaver’s WYSIWYG before slowly transitioning to the split view then just the text editor.

    Now I use Espresso for all my text editing needs and haven’t looked a WYSIWYG in years.

  5. JustJen_wd

    I knew the very basics from the days of Myspace editing and Front Page, but for me reading books etc could only take me so far.

    I studied a Foundation Degree in Web Design and Front End Development at Newcastle College. Spending 2 years doing relevant tasks with a competant teacher was probably the only way I could have learned as well as I did.

    Learning about where the web and development was in the past is also a big help that some people overlook, as was the case with the student who wanted to start straight from HTML5.

  6. Daniel Knell

    i remember webmonkey… and later quirksmode…

    now theres things like MDN, html5 doctor, the opera web standards curriculum, and github (the new view source).

    isn’t there anything wrong with how we did in the 90′s though, just throw shit at the wall and see what sticks… then iterate from there until you can pass yourself off as a real developer…?

    I learnt by trying to build sites without a clue what i was doing, screwing up, getting pissed off because it was completely broken in either NN1 or IE3, and trying over and over till it worked, each failure brought new knowledge that helped in the future.

  7. Henry Roberts

    I would recommend the free 30 day course on Nettuts: http://learncss.tutsplus.com/

    It’s by no means exhaustive, but it’s great for somebody who’s an absolute beginner to get to the point where they can build simple sites cleanly using HTML5 and CSS. For me, the course helped me to ditch Dreamweaver and see the light at the end of the wissywig tunnel. I now use Sublime Text and love it.

  8. Karl

    I’d recommend the For Dummies series of books, they’re what got me started on the right foot. Easy to understand and basic guides for beginners.

    Before I moved on to more advanced guides I read through:
    - HTML, XHTML & CSS FOR DUMMIES
    - CSS FOR DUMMIES

  9. Rakim

    I’d recommend treehouse :)

    http://teamtreehouse.com/

    Has a massive syllabus for different types of development.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>