The following guide came about after I was tasked with transferring my Web Development expertise into two VB developer colleagues. No mean feat in the one month I have left at my current place of work. Ultimately it’s possibly a futile task, but it’s worth a shot.

Web Development is not just collection of related technologies. It’s a state of mind, and in that respect it is very much like Yorkshire.

What follows is aimed at existing developers (VB or otherwise) looking to move into Web Development. The advice I offer is that of best practice in the field of Web Development. The books suggested are generally those which I have read myself that or that come highly recommended by friends and colleagues of mine.

What is a Web Developer?

A web developer is a software developer or software engineer who is specifically engaged in the development of World Wide Web applications, or distributed network applications that are run over the HTTP protocol from a web server to a web browser. Many web developers are also skilled in related areas such as web design, information architecture, usability engineering, web content management systems, web server administration, database administration, software engineering, project management, network security, and search engine optimization.

Developers often specialize in either front-end or back-end work. Frontend developers tend to focus on the client-side and typically work with technologies such as markup languages, ECMAscript and its variants (JavaScript, JScript, ActionScript), CSS, and the DOM. Backend developers usually focus on the interaction between server-side frameworks using Perl, Python, Ruby, PHP, JSP, or .NET and databases. Some back-end developers maintain databases directly on their web servers, while in other situations the backend developer calls data, managed by a database administrator, on an external system.

- Wikipedia

In my experience the statement about specialization comes into play more within larger organisations. Small to medium enterprises tend to look for generic web developers with a grounding in one or maybe two server-side frameworks as well as an understanding of (X)HTML / CSS and JavaScript. Generally speaking, most web developers begin their careers within smaller organisations, and while it is not always the case, you will tend to find a large degree of overlap between front-end and back-end web developers for this very reason.

The Right Tools for The Job

There was a time when the in thing was to use a WYSIWYG editor to design and develop websites. Those days have gone (Microsoft please pay attention! Visual Web Developer 2008? OMGWTFDONOTWANT!!*). Dreamweaver, whilst it’s design view should be used for nothing more than ridicule, is a perfectly adequate syntax highlighting code editor for web development. It also has the benefit of it’s built in FTP client which is very handy. What you use to edit your code is entirely a personal preference. Something with syntax highlighting and brace matching will save you time by helping you to work faster. Some options include:

• Notepad++ – Windows – Open source syntax highlighting code editor, many plugins available including an FTP client (compatible with Wine.. sort of)
• Aptana Studio – Windows/Mac/Linux – Eclipse based editor with an invaluable PHP debugger plugin as well as working nicely with html/css/javascript right out the box
• Notepad – Windows – included with any copy of Microsoft Windows (There’s no reason that, at a push you can’t ply your trade with this trusty tool)
• Dreamweaver – You should be familiar with it if nothing else. For some reason your employer might INSIST that you use it.

Mozilla Firefox is an excellent developer’s browser, and with the following plugins installed is close to a perfect development environment.

• Web Developer Plugin
• Firebug
• Firecookie
• ColorZilla
• HTML Validator

For testing in multiple versions of Internet Explorer in Windows, IETester is an invaluable tool. IEs4Linux is handy for linux based development environments but there’s not substitute for running virtual machines with differing OS/Browser setups to cover all bases. It is also a good idea to invest in a Mac of some description for testing purposes.

* To avoid confusion, the budding Web Developer should attempt to learn lolcat

First Things First

Your first task is to forget everything you think you know about Web Development. Forget Dreamweaver (for now). Please forget Frontpage. Don’t even THINK about cranking up Visual Studio, it isn’t a web development tool despite what Microsoft might tell you. To be sucessful in web development whether you plan to move into front-end or back-end development or even if you just want to be a competent web designer you need to start from the ground up. That’s HTML and CSS.

Knowing (X)HTML inside out is not an option. You cannot skip this step. CSS guru status is possibly optional for those in a soley back-end role where presentation and layout are the consideration of a front-end developer. Even so, I would argue that there’s no excuse for not learning at least the basic principles of CSS. Whether you’re a designer designing for the web, a front-end developer implementing the designs of others, or a back-end developer providing the business logic behind someone else’s front-end, you should always strive to fully understand the medium in which you’re working and the way in which your design patterns impact on others.

It is possible to grasp the fundamentals of designing for the web in XHTML and CSS in a fairly short space of time. I know this from experience after watching a colleague of mine, a talented graphic designer, learn web design from the ground up simply by reading and trial and error over the course of several months. Of course, it goes without saying that the intricacies of cross browser compatibility can take years to fully master, and in this respect there is no substitute for the wealth of experience gained over time fixing one mind numbing IE6 bug after another, over and over and over again, until your eyes start to bleed and what’s left of your brain trickles out of your nose. One year and a bit later Rick is still a talented graphic designer but one who makes my life all the more bearable by chopping up his own designs and turning them into perfectly semantic valid XHTML and CSS. All it takes is patience and a thirst for knowledge.

The Fundamentals

Broadly speaking a page on the World Wide Web consists of

• Markup – HTML or XHMTL – The bare-bones of the page structure and it’s content
• Style - CSS – colors, fonts, layout etc
• Client-side logic – JavaScript – how the page deals with complex user interaction.

Marking it up

The only possible starting point is to learn to write markup. Markup is what defines the structure of the pages which make up the web. A common misconception, and one that’s more commonly held by those already within the IT industry is that there are many different technologies for displaying pages on the web. Whether the url of your page ends in .html, .asp, .php or one of a multitude of other extensions, the page that you see is your web browsers interpretation of some (X)HTML markup (hopefully) in conjunction with some CSS. The important thing to remember is that no matter what technology is used on the server-side to generate a web page, the web page is self never amounts to anything more than some HTML and CSS. We’ll touch on JavaScript later on but for now we’ll pretend that it doesn’t exist. So I have to say sorry to all you .NET developers but I’m afraid that ASP.NET pages really aren’t some kind of magical in-browser .NET application. It’s an illusion created by Visual Studio, Some poorly auto-generated HTML forms and a heap of really bad old-school JavaScript.

The standards for (X)HTML markup are set out by the W3C (World Wide Web Consortium). As a Web Developer you should strive for as much as much of your (X)HTML to validate against the doctype you specify; and you should ALWAYS declare a doctype (or the sky catch fire). You should validate your markup regularly during development and before release. Having a HTML validator built into your browser (such as Firefox) saves a lot of time in this respect. One of the best resources for learning the fundamentals of HTML and CSS is htmldog.com, whether you’re a total n00b or you’re halfway proficient in the basics already they seem to have tutorials and reference to suit. W3Schools is also a very good (but ugly) source of quick reference for pretty much all web technologies including HTML, CSS, JavaScript and most major server-side languages.

If you’re planning on heading down the .NET route of Web Development (and there’s nothing wrong with that), it’s imperative that you fully understand the concepts of semantic, valid HTML, pure CSS layouts as well as good JavaScript practices before you even open Visual Studio. That way you’ll have a solid understanding of which features of ASP.NET to take advantage of and which you need to avoid like the plague.

It is one thing to understand HTML, it is quite another to write semantic HTML and express context and meaning through markup. I would suggest reading up on the subject of semantic markup before going any further as a solid understanding of these principles will make the transition into the dark world of CSS much less painful.

Reference:

www.htmldog.com – HTML and CSS Tutorials
www.W3Schools.com – Web Technologies Reference Guides
www.w3.org/Consortium – About the W3C

Books:

HTML Mastery

Cascading Style Sheets

Style on the web is achieved using Cascading Style Sheets. An in depth guide to CSS is beyond the scope of this article but if HTML is the cake then you can think of CSS as the icing. CSS allows you to take your plain, u-nstyled, semantic markup and skin it anyway you choose without affecting it’s content or structure. Every presentational element of a website design can be achieved using CSS and CSS should be your only method of styling markup.

CSS support across browsers is inconsistent. Different browsers will render valid CSS in wildly different ways to each other, and it is in dealing with these cross browser issues that the skill and experience of the front-end developer really comes into play. Be prepared for hours of nail-biting CSS debugging action. There is no substitute for learning from your mistakes. It takes time to smooth your way through the minefield of browser incompatibilities but resources like quirksmode.org are a godsend providing explanations of common CSS bugs, workarounds and accepted means of circumventing certain issues (Mostly Microsoft Internet Explorer ones).

Reference:

www.quirksmode.org – CSS Bugs and Hacks
www.positioniseverything.net - More CSS Bugs and Hacks

Books:

CSS Mastery
CSS The Definitive Guide

Client-Side Logic

It is almost impossible to develop a modern web application without employing at least a small amount of client-side code in the form of JavaScript. But what is JavaScript? JavaScript is not Java, and if you say it is I will hurt you. JavaScript is not like Java. It isn’t even a stripped down version of Java.

JavaScript is the name erroneously given to the implementation of the ECMAScript scripting language which is built into almost all modern web browsers.

JavaScript is what allows the developer to deal with complex user interaction. Broadly speaking, any kind of interaction between the user and the page which involves more than simply moving the user to another page is probably controlled by JavaScript.

Each web browser implementation of ECMAScript varies slightly and this can catch out even the most experienced JavaScript developer. Many open source projects have sought to level the playing field with comprehensive cross browser libraries which attempt to provide solid cross-browser APIs for common programming tasks. These libraries commonly referred to as as ‘frameworks’ allow developers to focus on writing their application rather than on the multitude of cross-browser issues their application faces; and I cannot be more clear when i say that “You really really need to use a JavaScript framework of some description or you’ll go clinically insane”

JavaScript Frameworks

• jQuery – The Write Less, Do More JavaScript Library
• MooTools – a compact JavaScript Framework
• Prototype – Easy AJAX and DOM manipulation
• Dojo – the JavaScript Toolkit

Some of these JavaScript frameworks make it possible by means of plugins to work on client-side logic with very little in-depth understanding of JavaScript. jQuery for example has a simple enough basic usage that designers with little to no programming experience are often able to integrate fairly complex interface logic unaided via plugins. Should you wish to develop anything more complex than what is available as a plugin you will need to learn JavaScript. For this you will need books. JavaScript is often dismissed as a ‘toy’ language or simply as a very basic scripting language but it is in fact a very powerful language in it’s own right and can take some effort to master.

One thing all these frameworks have in common is AJAX. AJAX is the acronym of Asynchronous JavaScript and XML. To an extent AJAX is little more than a marketing term, like “Web 2.0″. Generally speaking, AJAX is a term mostly misunderstood by the vast majority of people who use it. The term AJAX is commonly used to refer to any form of JavaScript based rich user interface (another acronym commonly banded about is RIA – Rich Internet Application). In essence AJAX is the name erroneously given to any means by which modern web applications communicate asynchronously with a web server to provide a rich user interface. This communication doesn’t have to be XML, in fact more often than not it isn’t XML. The underlying technologies behind an AJAX request are way beyond the scope of this article. The best way to learn more about AJAX is by choosing a JavaScript framework and using it.

Reference:

A concise history of ECMAScript
JavaScript Tutorials
en.wikipedia.org/wiki/AJAX – Sums it up better than I ever could

Books:

Learning JavaScript

AJAX hacks (never read but looks to be a great little primer)

Server-Side Logic

The Server-side is where your web applications get down to business. This is where you connect to databases, manipulate data and make decisions based on user input. You could say this is the “real programming”, but that would be to the detriment of all your hard work on the client-side.

A front-end developer need not learn a server-side language, though it is good practice to understand at least the basics of the server-side language of any project you’re working on. Back-end developers it goes without saying should be proficient in at least one server-side language as well as SQL and database design principles. There are as many choices of server-side framework as you care to choose but your best option is to pick one and learn it inside out. Popular frameworks include.

PHP – Arguably the most ubiquitous open source server-side language of all time – That doesn’t make it the best though
Ruby on Rails – Favoured by cool kids with slick hairdos
JSP – Favoured for “Enterprise Solutions” and by those with smart beards
ASP – Also known as Classic ASP – Most commonly VBScript or JScript – Although defunct as a language, many developers will find themselves supporting ASP web apps for many years to come. It’s a valuable skill to have
ASP.NET – ASP’s big brother – Most commonly VB.NET or C# – Very powerful yet most usually favoured by those who don’t know what they’re doing

Databases

As a back-end developer you will need to be proficient in SQL (structured query language) which is often but not always pronounced “sequel”. SQL is the language in which almost all Database systems accept queries. The basics of SQL are the same from system to system, but each database system has it’s own slightly varying syntax. Popular relational database systems include:

• MySQL – Open Source – Most popularly partnered with PHP
• PostgreSQL – Open Source – slightly less popular than MySQL
• Microsoft SQL Server – Most commonly used with ASP(.NET)
• Oracle – if you’ve got money to burn

Reference:
www.w3schools.com/sql – Basic SQL tutorial

Books:
SQL in a Nutshell

Final Thoughts

So hopefully this has given you some new directions to spin off in on your journey into web development. Hopefully it’ll help you avoid some time-consuming pitfalls, maybe it won’t, and maybe that’s half the fun.