The new doctype is only interesting if you know what a doctype is
March 27, 2012 11:00 AM Subscribe
I'm looking for an HTML5/CSS3 tutorial geared for complete beginners who have never built a single web page before.
Everything I can find is written for people who have previous experience with (X)HTML 4 and CSS 2. Google finds lots of "what's new in version 5" articles written for people who are already familiar with the old technology.
I'm trying to teach an "uninitiated" someone the basics of web design with these newer languages. I think the timing is about right for HTML5 in 2012 so I don't want to waste her time learning (and complicating matters with) the old stuff. Can you recommend a plainly written introduction to the web landscape as it stands today, for a savvy surfer who's never touched a line of code?
I'm really looking for a free tutorial on the web, not a book or paid course. Bonus points if it's arranged in a series of lessons with little homework assignments at the end of each one. Also great if it's written for artists or print designers and not for, say, programmers or engineers. If I'm being overly specific, please recommend whatever you can think of that might still do the trick. I will be assisting my protege and I'm sufficiently skilled to do some hand-holding along the way; I'm just looking for a structured curriculum of sorts we can use as a road map.
Everything I can find is written for people who have previous experience with (X)HTML 4 and CSS 2. Google finds lots of "what's new in version 5" articles written for people who are already familiar with the old technology.
I'm trying to teach an "uninitiated" someone the basics of web design with these newer languages. I think the timing is about right for HTML5 in 2012 so I don't want to waste her time learning (and complicating matters with) the old stuff. Can you recommend a plainly written introduction to the web landscape as it stands today, for a savvy surfer who's never touched a line of code?
I'm really looking for a free tutorial on the web, not a book or paid course. Bonus points if it's arranged in a series of lessons with little homework assignments at the end of each one. Also great if it's written for artists or print designers and not for, say, programmers or engineers. If I'm being overly specific, please recommend whatever you can think of that might still do the trick. I will be assisting my protege and I'm sufficiently skilled to do some hand-holding along the way; I'm just looking for a structured curriculum of sorts we can use as a road map.
Response by poster: Those are some very good resources, axiom — thanks! I'm still looking for something that is purely about HTML5/CSS3, without toting along the baggage of older tech. Everything I've been able to find seems focused on unlearning things (table-based layouts, XHTML declarations, IE hacks, etc.) that are completely irrelevant to someone brand new on the scene. For this tutelage we're skipping the irrelevant transitional stuff and starting with a blank slate.
I really just need something that says "HERE is how you build a web page from scratch in HTML5. HERE is how you style it with CSS3. HERE are some exercises to practice with, and HERE are some quick reference cheat sheets with all the tags/attributes/selectors available to use." But everything I've found is compelled to muddy the waters with a bunch of legacy code that only makes sense in the context of previous web design experience. All the tutorials I've found that say they're for beginners really aren't.
I think we'll eventually get to JavaScript and jQuery, but that's for a more advanced lesson. Right now we're just sticking with static page design.
posted by The Winsome Parker Lewis at 11:48 AM on March 27, 2012
I really just need something that says "HERE is how you build a web page from scratch in HTML5. HERE is how you style it with CSS3. HERE are some exercises to practice with, and HERE are some quick reference cheat sheets with all the tags/attributes/selectors available to use." But everything I've found is compelled to muddy the waters with a bunch of legacy code that only makes sense in the context of previous web design experience. All the tutorials I've found that say they're for beginners really aren't.
I think we'll eventually get to JavaScript and jQuery, but that's for a more advanced lesson. Right now we're just sticking with static page design.
posted by The Winsome Parker Lewis at 11:48 AM on March 27, 2012
If your student still needs to support IE7 or IE8 at all, it's probably a mistake to overlook HTML4 as you need a javascript hack to get them to even understand the basic HTML5 structure tags.
That being said, while not strictly beginner-y (and they are books), I'm a fan of these from the A List Apart people: HTML5 for Web Designers (here's the First Chapter) and CSS3 for Web Designers (excerpt). The ebook bundle is pretty cheap.
posted by FreezBoy at 11:59 AM on March 27, 2012
That being said, while not strictly beginner-y (and they are books), I'm a fan of these from the A List Apart people: HTML5 for Web Designers (here's the First Chapter) and CSS3 for Web Designers (excerpt). The ebook bundle is pretty cheap.
posted by FreezBoy at 11:59 AM on March 27, 2012
Those are some very good resources, axiom — thanks! I'm still looking for something that is purely about HTML5/CSS3, without toting along the baggage of older tech.
It's not "older tech"; it's current tech. It's how things work right now, as opposed to how they might in the future.
HTML5 isn't a standard, and won't be for some time. CSS3 is fairly well-supported, but it's also fairly nonsensical if you don't know what came before it (and you'll have no idea why your style sheets don't work on many browsers).
Which is a slightly long-winded way of saying that what you're looking for doesn't -- and shouldn't -- exist.
posted by coolguymichael at 12:54 PM on March 27, 2012 [1 favorite]
It's not "older tech"; it's current tech. It's how things work right now, as opposed to how they might in the future.
HTML5 isn't a standard, and won't be for some time. CSS3 is fairly well-supported, but it's also fairly nonsensical if you don't know what came before it (and you'll have no idea why your style sheets don't work on many browsers).
Which is a slightly long-winded way of saying that what you're looking for doesn't -- and shouldn't -- exist.
posted by coolguymichael at 12:54 PM on March 27, 2012 [1 favorite]
I think perhaps I am writing what you're after. (Axiom's links are an excellent place to start, as are the Mozilla developer resources, so by all means check those out first - I humbly offer this as supplemental material.)
I've been teaching web development for over a decade - until recently, using XHTML 1.0 Strict. Next semester, I'll be transitioning to pure HTML5 in my classes. So I've gone through the entirety of the tutorial entries on my blog and updated them all to HTML5 (they include exercises and homework for my students, about ½ of whom come from a design background). You'll also find a lot of material on CSS, starting with basic concepts and building to complex layouts and interactive pieces. I also have curricula for HTML and CSS that might be a useful starting point.
I'd contradict coolguymichael's points above with a few of my own: HTML5 very much builds on XHTML, and it is a standard - you can even validate it at the W3C. (Coincidentally there's a succinct post on that and related myths at justcreative.) In much the same way, CSS3 builds on Levels 1 and 2 that came before it.
Because of this, I've attempted to write in parallel format: when an element is relevant to both XHTML and HTML5, I've used an HTML tag to classify the article; when it's exclusively XHTML or HTML5, I've used that instead, and the same with CSS and CSS3.
I hope this helps!
posted by Bora Horza Gobuchul at 2:22 PM on March 27, 2012
I've been teaching web development for over a decade - until recently, using XHTML 1.0 Strict. Next semester, I'll be transitioning to pure HTML5 in my classes. So I've gone through the entirety of the tutorial entries on my blog and updated them all to HTML5 (they include exercises and homework for my students, about ½ of whom come from a design background). You'll also find a lot of material on CSS, starting with basic concepts and building to complex layouts and interactive pieces. I also have curricula for HTML and CSS that might be a useful starting point.
I'd contradict coolguymichael's points above with a few of my own: HTML5 very much builds on XHTML, and it is a standard - you can even validate it at the W3C. (Coincidentally there's a succinct post on that and related myths at justcreative.) In much the same way, CSS3 builds on Levels 1 and 2 that came before it.
Because of this, I've attempted to write in parallel format: when an element is relevant to both XHTML and HTML5, I've used an HTML tag to classify the article; when it's exclusively XHTML or HTML5, I've used that instead, and the same with CSS and CSS3.
I hope this helps!
posted by Bora Horza Gobuchul at 2:22 PM on March 27, 2012
Check your mefi mail for some tutorials that do just what you're requesting: the latest HTML and CSS taught for the beginner. Not posted here due to conflict of interest concerns (it's not free.)
posted by brenton at 2:57 PM on March 27, 2012
posted by brenton at 2:57 PM on March 27, 2012
This tutorial looks like a pretty decent, very basic look at HTML5. The beginning goes through the major tags that have been around for a while, but it also talks about the newly established tags in HTML5, like <header> and <article>. It even has a short section on doctypes, to address your question title.
I wouldn't dismiss tutorials that were put together before HTML5, though. The basic idea of HTML hasn't changed, you just have a few more differently-sized screwdrivers to go in your toolkit. If you don't know what a screw is, or why you'd want to use a screwdriver, it's not really going to help to have the exact perfect size. When I was learning both CSS and HTML, I really liked the HTML Dog tutorials. Once you have the foundations down, it's really easy to learn the new stuff. Most of the new tags and attributes just make common design practices either easier to do or more semantically correct.
Oh, and as far as cheatsheets go? This page is pretty much the best thing ever.
posted by ashirys at 10:58 AM on March 28, 2012
I wouldn't dismiss tutorials that were put together before HTML5, though. The basic idea of HTML hasn't changed, you just have a few more differently-sized screwdrivers to go in your toolkit. If you don't know what a screw is, or why you'd want to use a screwdriver, it's not really going to help to have the exact perfect size. When I was learning both CSS and HTML, I really liked the HTML Dog tutorials. Once you have the foundations down, it's really easy to learn the new stuff. Most of the new tags and attributes just make common design practices either easier to do or more semantically correct.
Oh, and as far as cheatsheets go? This page is pretty much the best thing ever.
posted by ashirys at 10:58 AM on March 28, 2012
This thread is closed to new comments.
posted by axiom at 11:07 AM on March 27, 2012 [1 favorite]