As I progress in my path as a designer, I realized that it was probably time that I learned to make my own website. My instinct was to jump right into using Adobe Dreamweaver, but I remember an old boss telling me that most people have problems with that software because they don’t learn the basics (HTML/CSS) first. I figured that I might as well be as successful as possible and learn these web languages like he always said I should. I read lots about HTML.
I perused a ton of websites and books, but I kept finding that by the time I got to the more advanced sections, I’d already forgotten the basic stuff. Even worse, what little I did retain, I wasn’t really able to put to practice, because I’d only seen it in theoretical settings. Then I found w3schools.com. This is a free site teaches you a huge scope of web languages, but rather than just reading, you’re able to interact with a “try-it-now” program, putting what you’ve just learned to practice.
Getting Started at W3Schools
W3School’s home page can be a bit overwhelming, but in a generally good way. The sense of overwhelm comes from the sheer amount of resources that are available on the site. The site has all the basics, so if you’re a beginner, there’s plenty to work with. I’ve personally worked through the HTML and CSS sections, and now I have a great base to work with.
W3Schools Home Page
For the more advanced user, there are a huge variety of options. Browser scripting seems to be the next level, with tutorials like JavaScript and AJAX. Huge sections of XML tutorials, server scripting and web services/development round out the site. Unfortunately, some of the less popular tutorials don’t seem to have the interactive feature, but the site is constantly growing.
If you’re like me, and don’t always know where to start, the intro page for each tutorial will tell you the previous skills you need to learn that language.
XML Introduction Page – Pre-Requisites
HTML Tutorials
HTML is the most basic tutorial that they offer. It’s a great place to start, obviously, as it’s required for every other tutorial on the site. As with every tutorial, they have a sidebar of all the sections for that particular tutorial. Sections for HTML include things like Elements, Fonts, Style and Tables. There is also an advanced section with tutorials on Meta, Scripts, Layout and more.
HTML's Get Started Page
Each section of the tutorial will typically be comprised of 3 sections. There will be parts to read that explain how things work. There will be a review section at the end that goes over all the tags/elements in that lesson. Finally, and most importantly, there are “try-it-now” examples.
HTML's Table Lesson
“Try-it-now” examples are what makes W3Schools unique. Typically, with other courses, you’d read the section and then move on, quickly forgetting what you’ve learned. The “try-it-now” examples for the table section alone include:
- Basic Table Creation
- Table Borders
- Tables Without Borders
- Table Headings
- Table Captions
- Table Cells that Span More Than One Row or Column
- Tags Inside a Table
- Cell Padding
- Cell Spacing
- The Frame Attribute
A try-it-now example opens up in a new window, and consists of an editor on one half and a viewer on the other. The page will default to an example created by W3Schools that demonstrates whatever that lesson is. You can view their code, as well as the final result. You can also edit the code, try to replicate whatever they’ve created, or make something completely new and instantly see what is created.
Table Borders – Try It Now Example
Other Tutorials
As you’ll see, the tutorials all tend to follow the same general format. The introduction page will tell you the necessary skills to complete that tutorial. Lessons will be arranged into a beginning section, then advanced, followed by sections that come from similar languages but aren’t quite the same (e.g. the XHTML section in the HTML tutorial). Lessons will always have a reading section, and a review section. Some scripting languages will have try-it-now examples.
Javascript – Try It Now Example
Unfortunately, not every tutorial has a “try it now” section. PHP lessons, for example, has detailed examples, but no try-it-now sections.
PHP Lesson – No Try It Now Examples
More Features
In addition to the huge number of tutorials, W3Schools has a ton of other resources. Most languages they have tutorials for have an additional reference section. HTML references, for example might include a tag list or a color picker.
HTML References
W3Schools is a free site, and they have pledged to remain that way. However, in order to make money they have offered a variety of certifications. For $95, you can be certified in:
- HTML
- CSS
- JavaScript
- jQuery
- XML
- ASP
- PHP
If you’d like to test your skills, without paying for the certification, they have a variety of quizzes for all of the different tutorials offered.
HTML Quiz
My Thoughts
I personally think that W3Schools is a fantastic site. If you’re the type of person that needs to learn in an interactive way, this site is definitely for you. After a long period of frustration, W3Schools has been nothing but good for me. Their tutorials go into great detail, and I feel like I’m really retaining the information for once. As I’m getting into more advanced tutorials, I’m sure that I’ll wish for more tutorials to have the try-it-now examples, but even without that, they’ll still be a fantastic resource.