Anyone approaching modern web development is immediately confronted with a blizzard of confusing terms and technologies: REST, AJAX, adaptive design, FTP, and much more. In the face of all that information, it’s very easy to become lost and intimidated. While there’s no denying that there are many disciplines and specializations in web development, the big picture can very easily be explained with cake.
Preparation
To make an apple pie from scratch, you must first create the universe- Carl Sagan
Just as a baker works best in a clean, well-organized kitchen, so the best web development takes place with a clear purpose, defined by the answers to two questions: who are you making the site for, and why?
Preparation also involves setting up the right tools in place to create a productive, efficient workflow.
Content
To make a cake you need ingredients: flour, salt and eggs. In web development, those ingredients are content: the text and images you wish to share. Before starting the development of any site, you should have as much content as possible prepared beforehand.
Many web designers start from the opposite end, trying to make a design first and then attempting to shoehorn content into the structure. This is akin to planning a meal without having anything in the cupboard, and then at the last moment pouring eggs and flour into a pan and hoping it will form a cake.
Users come to website for content, not a design. Making a website with content that is poorly planned but well designed may make something that looks good, but that remains unappealing. Time spent writing text and editing pictures – sourcing and refining the best ingredients possible – gives you a far better idea of the scale and structure of what you are about to create, and will provide the best possible result.
When everything is ready, it’s time to design your creation.
Design
Once you understand the purpose of your site and have the content ready, you can design the pages. Site design takes in typography, color theory and information architecture to create a well-organized, attractive and useful online experience for the visitor.
It’s difficult to design a site without knowing the technical challenges and limitations of the medium. For that reason, I tend to reference design issues as I teach, rather than as individual lessons.
HTML
The basic cake: a simple sponge cake, let’s say – is HTML, which serves to “bake” your content into a format that makes sense to browsers. It’s the first language you’ll learn in web development, and the most important: every website you see, no matter how complex, is written in HTML.
Wrapped around your content, HTML forms the base level of your site. It won’t look terribly exciting, but it will have all the basic functionality and features – headings, paragraphs, lists, links and images. As simple as this is, it is also foundational: a half-made base will endanger the stability and success of any multi-tiered baked masterpiece you wish to create.
In HTML, a well-formed page is based on two principles: accessibility and validation.
Accessibility is the equivalent of placing a Lazy Susan under the cake, so that everyone can partake of your work: it allows equality of access to your content. Basic accessibility isn’t difficult or complex, but must be integrated into your development process: left by itself, accessibility becomes an afterthought, or ignored entirely.
Validation is akin to the rules of physics: the heat of the oven, the reactions of sugars and enzymes in the ingredients. Working within the rules creates something that can be consumed by browsers, while ignoring them usually produces disaster.
HTML comes in various “flavors”: XHTML, HTML 3.2, HTML5, and so on. In the past I have recommend that serious students start with XHTML 1.0 Strict, if they have time. While leaner and stricter – think French haute cuisine – learning XHTML provides a better, more disciplined foundation for web development skills. If you’re after immediate results, you could learn HTML5 instead: looser, broader, more “anything goes”. The downside is that the language is far newer, and not to the “taste” of every browser (indeed, no browser yet supports the complete HTML5 specification), and thus more likely to confound and frustrate your expectations.
CSS
CSS is decorating your cake, the presentation of your site. If the base layer (your content, wrapped in HTML) is poorly formed, no amount of icing or decoration will make it better. CSS controls the color, layout, and design of your site: increasingly, it is also used in areas such as animation. CSS is learned after HTML, for the same reasons that you can’t form a cake out of pure icing.
Combining good content and design skills while using HTML and CSS to create an accessible, valid site will give you a complete work, in the sense of the site’s presentation in the browser. What the web pages may lack is functionality, scalability and efficiency, which are the domains of the next three technologies.
JavaScript
JavaScript is used for client-side behavior: broadly speaking, actions that are beyond the scope or capability of HTML or CSS. For example, HTML will mark up a table of data on a web page, and CSS can be used to present that tabular data attractively, but allowing the user to sort that information – changing the order of rows in the table – is beyond the ability of both.
There tends to be a great deal amount of confusion around JavaScript among new web developers. Part of this lies in its closely shared portmanteau with Java, to which it is wholly unrelated; partly it is the fact that many of the features people assume they need the technology for (image galleries, animation, interactive navigation) are best achieved with CSS. This confusion is added to by the popularity of JQuery and AJAX: the former is a framework for JavaScript (i.e. a series of syntax shortcuts), the latter a way of merging JavaScript with a server-side language such as PHP.
JavaScript forms a second tier on your cake, but it is important to note that it is an optional one. You can learn PHP first instead, if you wish.
PHP
PHP is a server-side technology. Leveraging it allows your site to scale from less than a dozen pages to several hundred, if that is your ambition, through the use of server-side includes. It is also secure, allowing confidential storage and retrieval of user data.
PHP is not the only server-side language, but it is the most popular one. Other possibilities include ASP.Net, Perl and Ruby.
To this point, everything that we have been making can be created with nothing more than a text editor and a browser, but in order to run PHP or any other server-side technology you must have access to a server.
MySQL
The final step to all of this is storing information into a database. This information may include customer data, such as login verification, order history and passwords, or the content of the site itself. Again, MySQL is not the only database capable of achieving this, merely the most popular.
MySQL is also the most advanced and, arguably, the most complex of these technologies, and is best approached last.
A “fully featured” modern site will be a large vertical slice through all these cake layers, but it is entirely possible to make a good site with just informative content, organized pages, and HTML.
Photographs by Food Thinkers, Graceful Cake Decoration and Solo, used with permission and licensed under Creative Commons.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
