Code Zhandwa

What would you do, if you are asked to teach someone Web Development? JavaScript, HTML and all. I recently faced such a situation and thought it would be nice to share what I came up with.

1. Start with w3schools

There is no better place to begin than w3schools. I used it myself, and I still go there every now and then to reference something or the other. The tutorials are designed for the absolute beginners and explain every section in just the right way. It’s the first place I recommend anybody to start with who wants to learn about web development. Considering that web development in today’s world is not as vanilla as it used to be - I would begin with the following on w3schools:

• HTML -> DOM -> CSS -> JavaScript

HTML is again the most obvious. Knowing the DOM is next as you will probably be using it the most in JavaScript. CSS is critical to know because most web 2.0/AJAX stuff requires you to manipulate CSS via JavaScript.


One thing to remember here is not to do any assignments other than the ones present on w3schools. Even looking at any assignments beforehand will make you think about them and you may end up skipping some topics, which can come back to haunt you later. Trust me on this one.

2. Create a website

Yeah. There is no better way to learn than to start experiencing. So, I would recommend you make a simple site. Nothing fancy. A simple, 2 column  website with links on the left and content on the right - and do this using only CSS and HTML. No JavaScript should be used here and don’t use tables for layouts.

3. Mod the website with JavaScript

Make the links on the left fade in and fade out. This will enable you understand CSS manipulation and JavaScript timeout features. From this point onwards everything in the site should be added via JavaScript. Creating almost every single HTML element in the page using JavaScript will enable a good hold on DOM parsing, attaching events, etc.

4. Get the Holy Grail

Time has come to get the holy grail of web development. Install Mozilla Firefox followed by Firebug. Open up the website you just created and use Firebug’s inspect tool to inspect your HTML code. Put a breakpoint in your JavaScript code and see how the DOM looks. Use watch expression to check out how JavaScript behaves.Firebug is probably the best way to understand what you learnt in Step 1, 2 and 3. It will provide you with details of how the DOM looks like, how JavaScript behaves and what objects contain which attributes and properties.

5. Back to w3schools

Go back and learn the AJAX tutorial. Understand how it works across browsers. Use Firebug to see how request are made in the background and how the response comes back. Here you may slow down and also look at how HTTP headers look like. If you want to indulge deeper, you may as well read more about them.

6. Convert your website into an AJAX powerhouse

Whatever you designed in step 3, should now be AJAX-ified. Convert all link clicks to load content on the right pane using AJAX. No page refreshes and show a proper loading icon when an AJAX request is made.

7. JSON

This may not be an absolute requirement, but I would say you learn it right now. JSON is the preferred response type in most AJAX calls, so understanding how it looks and behaves is extremely important from a long term perspective.Convert your AJAX responses from Step 6 to return JSON objects. Parse them and show your content. modify your content to have multiple headings and paragraphs.

8. More Assignments

This is the time I would really start doing some hardcore coding. I usually ask people to extend on what they have already done:

• Create a fluid three column layout with a header and footer - which works across all browsers.
• Put some links in the left panel, the right panel and the footer.
• Create navigation controls in the left panel using unordered lists and CSS.
• Use JavaScript Timeouts and CSS to animate the navigation panel.
• Make all clicks on the navigation panel load complex data through AJAX and JSON.
• A search box at the top of the navigation panel should filter the links in the panel, as you type.
• Clicking any links in the footer should open a popup inside the same page - positioned dead center of the page. Turn the background gray. - ala Lightbox type effect. No popup windows.
• Clicking any link on the right panel should open actual popup windows.
• Try loading content from a different domain using AJAX calls (Cross Domain Issues and Scripting).




9. Pick up a JavaScript library

The last thing is to pick up a JavaScript library, if you are allowed to ;). In my case the requirement was of jQuery (thankfully). Check it out and then redo all the previous steps using the Javascript library/framework.

As of now, I don’t know how effective this would be to get somebody started with. I will keep updating this post, each time I think that I shouldn’t have done that.