I work in a department that has very little IT support, and as web development is constantly in a state of change, I need to do my own research to stay ahead of the curve. One of the best free* sites to learn about all things related to web development is www.w3schools.com. Our department also has unlimited access to www.lynda.com, but that’s not available for some. Plus, www.lynda.com gets bogged down in lessons and tutorials which can go on for hours, when sometimes a quick brush-up or how-to is all that’s needed. This allows me to get right back into my web page and implement my new idea. The site w3schools has quick, clear, easily defined answers which allow me to explore within each development tool. It has both tutorials and reference lists for HTML, CSS, JavaScript, SQL, PHP, and JQuery. The site also includes a section on web certificates, and contains an interactive color picker. What am I talking about? This site is very interactive! Not only can you read about each tool/technique, but also with its sandboxing of examples, you can try out the tools for yourself and see live results. If that’s not enough to get you started, there are over a thousand examples to peruse in your own time. This website makes it so easy that a very beginner to an advanced web designer can utilize it to its greatest potential. Best of all, it is constantly being updated. A very active and knowledgeable forum rounds out the website, so when you are still confused about actions and code writing, answers are just a click away.

* to obtain Web Certificates from this site, there is a fee involved. All other resources are free.

w3s

As you can see, the site is very well laid-out and easy to navigate. Going into the HTML section:

w3s_html1

It’s kind of hard to see in this example, but on the left side menu, you have a step-by-step html guide (starting at the very basic and moving progressively to more advanced techniques,) to HTML. In the middle of the page, is examples, and a “Try It Yourself” button. When you click on the “Try It Yourself” button, it opens to the sandbox:

w3s_sb1

Entering new code in between the <h1></h1> tag, and clicking on See Results box:

w3s_sb2b

This makes learning intuitive and fun. Each sandbox page opens in it’s own window, so going back to where you were is as simple as closing the window. Let’s go back to the HTML page. Further down the HTML page, you can see:

w3s_html2

There are links to HTML examples, or take a HTML Quiz (more than likely to help one prepare for the Web Certification that the site provides.) Clicking on the HTML Tag Reference link takes you to:

w3s_html_tagref (2)

This is very handy, as it shows all the HTML tags and also which are new or not supported in HTML5. I find the references pages very helpful when I’m updating my pages, especially as I move over to HTML5. Again, you can then use the left vertical menu to go to the specific page your interested in (this one being HTML; the other reference pages match the tool you are exploring.)

I have only dipped into the very basics of the website. The thing with this particular website is that it can get overwhelming and/or addictive. There is so much useful information here that I find myself spending way too much time on it, getting distracted from my own work. In that way, it is like www.lynda.com, but then I do not have to sigh my way through parts of a tutorial that I don’t need. Here, I can jump around and fiddle on code until I feel I understand it completely. It’s not the only site available that offers tutorials and sandboxing, but www.w3schools.com is about as thorough a website on learning these tools that I have discovered.

Advertisements