Would you recommend starting from HTML5 & CSS3 for beginners?I am a middle school student trying to dive into the world of web designing and developing.
I have been interested in (using) the web since I was little, but now I want to be in the "creating" side. After researching about web design and development, I believe it is better to start from markup languages before script languages. And I was wondering, should I start from learning the new HTML5/CSS3 or should I stick with current version of HTML/CSS first? Are HTMl5/CSS3 something that beginners should definitely avoid? Or it doesn't really matter which one I start with? And it would be also great if you can recommend me a good book on HTML(5)/CSS(3) or a website about them!
ACCEPTED]
For the most parts (and especially if you start learning), it holds, that HTML 4 is a subset of HTML 5 and likewise CSS 2 of 3. Therefore my suggestion is to start learning the ‘old’ techniques first. This is especially motivated by the fact that the HTML5 and CSS3 specifications are way larger than their older counterparts. (In the News: This just in: "HTML" is the new "HTML5" [1].)
There is another problem with HTML5 tutorials: They pop up like daisies on a soft spring morning, which is per se a good thing. But as rookie you will have difficulties to decide if a given document aims at beginners or, more likely indeed, at people with experiences in (X)HTML, who want to learn the differences. It is easier to get confused by such an HTML5 intro, than by an HTML4 tutorial (there was not really a big difference between HTML 3 and 4, apart from paradigms [table-based layout, font tag, stuff like that was discussed then]).
Everyone is different in her/his learning behaviour, so let me summarize the way I came to web development.
I didn’t have anything in mind with web development until I was a Physics undergrad student. Then I thought: ‘Well, it would be nice to have a customized start page for my browser.’ It was 2004, and iGoogle wasn’t invented back then. That’s it. You have a small project and you start to work on it.
I had the luck, that in the German speaking world there is a great resource for getting started with HTML: SelfHTML [2]. Unfortunately, the site hasn’t had much updates since back then and their English counterpart went even out of business. Please don’t use the aforementioned W3Schools [3]. However, I can’t point you to any good English tutorial apart from the specifications (see below). You might have luck finding a good course in the School of Webcraft [4], which is a joint venture of Mozilla and P2PU.
After finishing my browser start page, I created a homepage for our RPG group. It was several HTML pages and I quickly found out about CSS, and that you can have a single stylesheet to apply to more than one HTML pages. This is where I first started to think about the structure of the many files that had accumulated (in terms of ‘in which folder comes which file’).
Apart from that, you will find, that you have to learn a lot more accompanying technologies:
I wanted a private area for our group and learned about HTTP Authentication.
Having files lying in sub-directories brings you very fast to the matter of URLs and relative and absolute paths.
For our FAQ section I wanted to have some interactivity: Clicking on a question should display the previously hidden answer. That was my entry point to JavaScript. My experience is, that I benefit now much from having learned ‘real’ and basic JavaScript and not just copy and pasted jQuery snippets that I googled. (Well, it was Prototype, back then).
The next logical step is to move from static HTML files to something generated on the server. I took a very good beginner’s course in PHP and MySQL (it’s IMHO the simplest server-side technology to get started with) and got a bit of PHP-enabled web space at our university. A good ‘Hello World’ project was a guest book for the RPG website back then (well, today you’d just throw in a Disqus link).
Now I came to the frontiers of tutorials and references. I first really looked in and began to read the original specifications. It started with the official PHP manual and went on to the HTML 4 specification, single definitions of CSS properties in the W3C’s CSS 2 spec and so on. In hindsight this is another point I’d like to emphasize: read the specs as soon as possible. There will be parts that you don’t understand yet, but there is no better source than the source.
From there on it was a constant learning with many new technologies that require at least a bit of attention, but sometimes also a fundamental understanding: the DOM [5], CGI [6], SVG [7], XML [8], the difference between XHTML and HTML [9], Regular Expressions [10], Python [11], mod_rewrite [12], nginx [13], XSLT [14], PDF [15], RSS [16], RDF [17], Bash [18], SSH [19], Git [20], SVN [21], XSS [22], Unicode [23], Web Fonts [24], Dublin Core [25], JSON [26], SQLite [27], ... (all links go to Wikipedia).
Finally you will come to a stage, where you need to specialize. The range goes roughly from "I’m a designer. I don’t touch no nasty code ever." to "B2B JSON is the best thing since JBoss and Hibernate. Good, that I don’t need Photoshop for this." I’m still trying to follow the naive approach to keep up to date in as many areas as possible, but I can foresee, that this strategy won’t be successful for long. In less than 5 years from now (and even today) you will find job descriptions for ‘canvas developers,’ ‘multimedia markup strategists,’ ‘cross-platform user experience experts,’ ‘specialists for legacy Flash code and table-based HTML Email templates,’ ‘offline cache security gurus,’ ‘web storage database engineers’ and so on. However, having at least a basic understanding in areas around your main interest will help to keep you flexible enough for new ideas and approaches (and, more important, old and tested ideas and approaches to problems you think are new).
Please, I don’t want to discourage you, when I say, that there’s a lot more to learn than HTML and CSS. I see it more as a wonderland of opportunities and technologies that lie at my finger tips to be used to create cool stuff. And the more you learn, the more powerful your projects will be.
When you have found a direction, that interests you most, you should start learning the backgrounds of your chosen path. This might seem a bit contradicting to what I said above about keeping a broad overview, but it is more a completion.
For example, if you tend to be a back-end developer, start looking into different algorithms, parser theory, cryptography, profiling code, building compilers and so on. The topics you encounter there might have no direct relation to your day-to-day problems, but they build the foundation of what you use today. As such, many problems were solved before, that re-occur today in slightly different form.
If you become a markup specialist, look into text-manipulation tools. The Unix tools like sed, awk and grep have got a bad name as being old, arcane cruft, but this is totally unjustified. They, too, solve problems, that you will face in your work.
For becoming a web designer you have to get into color theory, typography (both macro and micro), grid theory (which existed way before the web) and, at least, basic psychology.
The problem is learning from the wrong resources. I’d suggest, if you are in doubt, ask here on StackOverflow for opinions (better perhaps, ask over at chat.stackoverflow.com [28]. And basically, the closer to the source a doc is, the better.
A personal warning: Leave your hands from WYSIWYG editors and such, like Dreamweaver. You may use an IDE or any editor with additional support (Eclipse comes to mind), but my travel went the other way round (from GoLive to Notepad++ [29] to finally Vim [30]). That’s a matter of taste. But if you have the slightest thought, that the software hides something from you or auto-creates anything that you haven’t told it explicitly to, leave it alone.
A basic measurement is, if your software let’s you choose the encoding of the file (ISO-8859-1, UTF-8, ...) and if or not to put a BOM [31] in front of an UTF-8 file.
Again, don’t get discouraged, if you get completely confused by any of the following resource. There are documents linked here, that professionals use as daily references.
W3.org [32] - The website of the W3C, the organization, that standardizes HTML and CSS
developer.mozilla.org [33] - The developer resource of Mozilla, the Firefox organization. There are some good tutorials on HTML, CSS and cutting-edge web development, too, and IMHO the best JavaScript reference currently available online.
msdn.microsoft.com [34] - The HTML/CSS docs from Microsoft
Safari Reference Library [35] - Very Apple and Safari centered, but may have the one or other good reading, too.
Opera Web Curriculum [36] - Thanks to @What’s answer for this one. Opera’s Web Curriculum is a good summary of important technologies.
WebPlatform [37] is a joint venture of a lot of big players on the web [38], that "aims to become a comprehensive and authoritative source for web developer documentation." It's backed by the W3C.
Validator [39] - A validator checks your code for errors. The one here is from the W3C and is one of the most important tools in a web developer’s toolbox.
HTML5 Boilerplate [40] - A project that is aimed to allow fast bootstrapping of web sites and web applications based on HTML5, jQuery, and so on. It’s worthwhile to read through the source code, since there are lots of best practices bundled together
A List Apart [41] - THE publication aimed at web developers and people around them. A lot of useful and important methods and practices to work with HTML and CSS were published here.
Dive into HTML5 [42] - the website accompanying the book of the same name. It’s especially targeted to teaching HTML5, so perhaps it’s from time to time hard to follow for a newbie. But it’s well-written and accurate.
CSS Zen Garden [43] - "A demonstration of what can be accomplished visually through CSS-based design." This site shows astonishing examples of HTML 4 and CSS 2 in action.
24 Ways [44] - The web developer’s Advent calendar. Very interesting articles of well-known people are collected in packs of 24 each year.
quirksmode.org [45] - A site dedicated to browser and compatibility tests. If your page looks all different in Firefox, IE and Opera, you should stop here.
History of the WWW [46] - a nice to read introduction of the W3C, how the early years of the web (up to 1995) went by
zvon.org [47] - If you look through the ‘references’ and ‘tutorials’ sections, you will find stuff, that is not easy to follow but therefore it’s quite accurate
Jacob Nielsen’s Alertbox [48] - Although not un-criticized this page offers a huge set of usability studies by Jacob Nielsen.
Periodic Table of HTML Elements [49] - A very nice and intuitive display of all elements in HTML5
CSSPlay [50] - Stu Nicholls’ playground for many cutting-edge CSS tricks.
HTML5 Rocks! [51] - HTML5 features, tutorials, resources and more.
w3.org/TR/html4 [52] - The official HTML 4 specification with description of all elements and attributes. Might be useful, but defer to HTML5 specification for most up-to-date reference on how modern browsers interpret them.
WHATWG.org [53] is where the most active and live version of the HTML5 specification exists.
w3.org/TR [54] - A list of all specifications under the roof of the W3C (mostly related to XML, HTML and CSS)
w3.org/TR/CSS2 [55] - The official CSS 2.1 specification
CSS3 & others [56] - The current work being done on Stylesheet standards.
ECMAScript Specification [57] - ECMAScript is the name of the standardized version of JavaScript. Frankly, I hardly ever looked in it. Mostly I use the reference on mozilla.org [58]. There is an annotated web version at es5.github.com [59].
Likewise [60] for the DOM. The official specifications lie scattered at the W3C, but in the dark ages Netscape and IE implemented their own versions.
RFC 1738 [61] - defines, how URLs are composed
RFC 1945 [62] - defines HTTP 1.0, the transmission protocol that delivers pages over the internet. RFC 2616 [63] defines its successor HTTP 1.1
php.net [64] - The homepage, together with the official documentation, of PHP
Unicode Consortium [65] - If you leave the ASCII world and enter multi-language terrain, you will inevitably make acquaintance with UTF-8 and Unicode. Better be friends with them ASAP.
Smashing Magazine [66] - I often find interesting articles about web design and frontend development here
JSFiddle [67] - This site let’s you play around with HTML, CSS and JavaScript and shows you the result instantly. Perfect for testing and if you want to share short snippets of code (e.g., for a StackOverflow question)
XAMPP [68] - A simple way to create an Apache[*] (web server), MySQL and PHP environment on Windows or Mac OSX
Microformats.org [69] - This is a bit advanced: Microformats try to express machine- and human-readable data at once in HTML. It sounds scarier than it really is, and from looking at how they try to accomplish things, you can learn much of how HTML elements and attributes should be used.
CSS Resetr
[70] - CSS resets are quite en vogue since ~2007. These are small CSS stylesheets, that revert most of the default styles browsers give to elements (like the large, bold text and the margin of h1 elements). CSS Resetr let’s you play with different reset stylesheets of certain fame. I list it here, because it may give you a nice insight in what CSS rule affects which elements.
FontSquirrel @font-face generator
[71] - That’s a nice way to play with the @font-face property of CSS 2.1. Look at the source, that gets generated for inspiration. Apart from that, you can use the
Google WebFonts Directory
[72] for production.
When can I use... [73] - Shows in charts CSS3 and other properties that are cutting-edge, and the browser versions that support them.
FireBug [74] - If you develop in Firefox, you won’t go ever without this addon. Trust me (and thousands of others).
The Elements of Typographic Style Applied To The Web [75] - A website, that expresses the hints and the wisdom of "The Elements of Typographic Style" (Robert Bringhurst, warmly suggested reading) in terms of CSS and applied to web technologies.
A list of all HTML elements in all (relevant) HTML standards [76] by Jens Meiert, member in the HTML working group.
Actually, I’ve never used a book to learn HTML or CSS. But then, HTML 4 and CSS 2 are much more light-weighted than their newer counterparts. Quite blindly I can suggest books published by O’Reilly. The dozen or so (bash, Python, XSLT, ...) I have from them are all well-written and technologically correct.
HTML5 For Web Designers [78] by Jeremy Keith
CSS3 For Web Designers [79] by Dan Cederholm
jQuery: Novice to Ninja [80] by Earle Castledine, Craig Sharkie
PHP In Action [81] by Dagfinn Reiersol, Marcus Baker and Chris Shiflett
Smashing CSS [82] by Eric A. Meyer
The Web Designer’s Idea Book Vol. 2 [83] by Patrick McNeil
Designing Brand Identity [84] by Alina Wheeler
I am constantly learning new things and improving and deepening my knowledge of already learned technologies. If you start with HTML and CSS, and if you want to do it seriously, you will find many problems on your road. You’ll see code, where you have no clue, what it does, or how it even is valid. After some time you will have your first experience with security and its holes (and I’ll wish you these to be soft and not related to credit card details ;-) ).
But if you keep your eyes open, utilize often and early the "view Source" menu item, and ask questions (here, as a comment below an interesting blog post, ‘ask Google’), you will be a the top of people, who build the way the world is experiencing its information. And, over all, it’s fun!
[*] I remember, that one of the things that costed most of my time when setting up a web server for the first time, was figuring out, which web address to enter at the location bar. Usually, it’s http://localhost.
Interesting question.
I think the main point is that for the foreseeable future, whatever you create must be backwards compatible. Creating websites always involves providing fallbacks and backwards compatibility on several layers.
As such, I do believe it helps to build up your knowledge from the bottom. Start with bare bones HTML 4. Add some CSS 2. Move on to add HTML 5 and CSS 3 elements, see what they offer and how they degrade. Add some Javascript. Add more Javascript using HTML 5 APIs, make sure it degrades. Add some careful server side processing. Start to build up your knowledge about server side programming and build more and more complex things...
There's nothing wrong with picking up HTML5 and CSS3 as you learn the languages. Whatever the generation of HTML and CSS, still one of the most important things to remember is to know how, and when, to use the different HTML elements and CSS styles. For example, it isn't appropriate to use <p> to mark up a navigation list; you would use <nav> (HTML5) in conjunction with <ul> and <li> instead.
Also bear in mind that, because HTML5 and CSS3 are relatively new and continuously-developing technologies, you'll face more browser inconsistencies with them than with the long-standing HTML ≤ 4.01 and CSS ≤ 2.1 specifications. More often than not, it's these browser inconsistencies that can stump some beginners (I speak from personal experience); however, if you know your stuff you should be able to handle them just fine.
You should probably start with HTML4 - HTML5 isn't implemented fully in all major browsers yet, so there's still a lot of vendor prefixes and inconsistencies.
Opera has an excellent and comprehensive tutorial [1] for learning about HTML/CSS and web standards, which also covers HTML5 (which is covered after everything else - looks like Opera recommends leaving it until after you've learnt HTML4).
[1] http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/There are some good answers here, but it's also easy to get overwhelmed. My approach many many years ago was to re-do a site I liked which was well made. You can look at their css, scripts and most often their html. That way you can ease into it in a practical way.
If you at the same time use the resources in one of the great large answers here as resources, and learn about float layouts, xhtml and css2 first and foremost, you will have a great platform to expand on.
I'd recommend learning html 4.1 first, and, from that base-point, then learn html 5. This is mainly because of the lag between a standard reaching candidate/recommendation stage and being properly implemented.
As for CSS 3; much as with CSS 2, there will, again, be a delay between recommendation and implementation (though the familiar story of IE being partially, if at all, compliant should, however, be a thing of the past from IE 9 onwards).
I would actually recommend starting directly with html5.
Why use:
<div id="header">
when you can use:
<header>
and make it work in almost all browsers except IE with javascript disabled?
html5 gives you more possibilities to structure your page semantically without hardly any drawbacks.
The obvious drawbacks are IE without javascript and the absence of local validator plugins (I miss the HTML validator plugin for firefox when using the new elements...). A third drawback could be that a lot of html5 books assume html knowledge, but that could just be the books I use.
Truthfully, I think the best way to begin is to dive in with a small project, something you enjoy and want to create. So, using HTML5 or CSS3 would depend on what you need, and if you need the elements those bring into play. Otherwise, your basic page/site/app is going to be founded on and built with earlier, standard, HTML and CSS anyway.
Since Daniel already pointed you to W3Schools, always the best, I'll suggest you also try SitePoint [1] for some really good in-depth tutorials for everything from html to css to php to javascript - pretty much any web tech you could need, for beginners all the way up to professionals.
[1] http://www.sitepoint.comWell this is a very thought out question, and I'm glad you are taking an interest in these things. I see no reason why you couldn't start with HTML 5 or XHTML. This is now a personal choice.
Just a thought, HTML 5 is great and "the future" but also note the increasing mobile browsing trend, these mobile browsers are more or less "older" versions of html, so basically you might need to do both. It is not that different actually, just you get new stuff with the 5th version.
So I'd say start with XHTML and work up to html 5.
W3school is a great place to find tutorials and basic understanding.
Okay, well you were like me. I would recommend diving into the world of HTML 4 because, although a bit messy, will teach you the basics and is also the most widely supported. Sure, you can go use some nice CSS3 properties, but do not rely on it to do everything, because as of now, it isn't too widely supported. Later you might want to try delving into the more advanced HTML5 and maybe some JavaScript.
==MAP==
Basics » HTML 4.01 » CSS2.1 » HTML5 + CSS3
Hopefully that helps.
It's a good idea to learn HTML5/CSS3 directly, but it's always better to know the basics of HTML/CSS.
It would help you to understand the differences between the two, and pros/cons of using each one. So you can understand how web development has progressed over the years.
www.should be added. The W3C decided to go explicitly with it in XML namespaces, because they argue, that in future there may be other, yet unknown services over HTTP as well. - Boldewyn