First Steps in Web Development
By: Jonathan Beckett
Tags: Teaching, Web Design, Programming, WordPress, Web Development

HTML

The foundation of all web pages. We started in a simple text editor and wrote HTML by hand — rather than look at any legacy dialects, we went straight for HTML 5, learning the basics of pages with headings, paragraphs, lists, tables, and so on. I debated with myself about teaching her what “block-level elements” were at this point, and decided to do so in the end, purely to illustrate some of the problems tables cause.

Integrated Development Environments

After writing the first pages in a text editor, we switched over to Visual Studio Code, and looked at some of the toys an integrated development environment brings to the party — such as syntax highlighting, projects, and extensions to preview HTML while editing it. We both agreed that code completion is both a blessing and a curse.

The File System

By this stage, we had several files and had already begun playing with hyperlinks and images. I tend to think a basic knowledge of the filesystem is essential, in order to explain how you might organise files, and how to reference them from within a portable structure. We looked at building folder structures, saving files within folders, moving files with folders, and perhaps the most important result of doing so — absolute and relative paths. Being able to see the project folder structure in Visual Studio Code while writing relative paths in HTML helped enormously.

Web Browsers

While previewing the HTML we worked on, we looked at different browsers — primarily Google Chrome and Firefox — to see how each browser differed in terms of the debugging experience. I always find it quite entertaining when people realise how much is going on inside a web-browser — that it’s almost an operating system in its own right. This was all really about getting used to the “View Source”, and “Inspect Element” features before getting involved in either CSS or JavaScript later on.

File Transfer

By chance I have a Raspberry Pi sitting on the network at home, so installed a web server on it — as a precursor to explaining file transfer. We looked at common file transfer protocols, and the popular applications for each — primarily focusing on FileZilla because it’s the most obvious application to teach and use. We transferred files from a local working directory, up to the server, and downloaded them back down again.

Remote Access

Again using the Raspberry Pi, we used SSH to connect to and navigate around the files on the webserver via the command prompt in a terminal. My daughter has Elementary OS installed on her laptop (an Ubuntu Linux derivative), so this was pretty straightforward. I also showed her how you might use PuTTY on a Windows machine to do the same thing. Just for laughs at one point, I fired up a 20-year-old iMac that usually lives under the desk, and we connected from her laptop to the Raspberry Pi, and then to the Macbook — explaining the tunnel we were creating as we went.

CSS

Returning to our HTML files, we started writing CSS — first directly in the HTML files, and then as separate files, in separate folders, referenced by the HTML. After preparing everything and uploading to the webserver, everything started to fall into place — an inter-connected group of files being fetched from the web server by the browser and interpreted into page designs on the screen. We looked at the basics of the “Document Object Model”, how to affect common styles, and began looking at techniques to achieve a “responsive” result within the browser.

JavaScript

We didn’t cover a lot of ground with JavaScript, because it’s almost a bigger subject than HTML, CSS and web servers, but we did look at simple scripting to affect the Document Object Model on the fly — and to react to interaction throughout a page. Again, we worked initially within script tags before moving the script to discrete files, stored in folders, and referenced by the HTML files. I chose to stick to ES6, even though we hardly touched any of its features. This was all about explaining that the browser can execute code on the fly to manipulate the behaviour and appearance of a page. We kept well away from frameworks — I’m something of a believer that people should learn basic JavaScript before throwing a framework the size of an Elephant on top of it to borrow three or four functions.

Graphics

Having struggled somewhat through the introduction to JavaScript, the mood brightened enormously while playing with graphics files — explaining the various formats and their attributes in terms of design and performance. We looked primarily at GIMP, and how you can reduce the size of a digital photo, crop it, and export to formats preferred by web browsers.

Web Servers and Scripting Languages

This was more a demonstration on my part than a tutorial. I showed my daughter how a text file renamed with the “PHP” file extension could be interpreted by the server, and output programmed HTML back to the browser. This was a lightbulb moment about how the majority of the internet works — that there is a balancing act between processing on the server through languages like PHP and processing within the browser through JavaScript and DHTML.

Content Management Systems

Finally, we arrived at WordPress. I demonstrated installing WordPress on the Raspberry Pi, before hand-holding her through the new user path at wordpress.com — explaining the concept of software as a service along the way. Did we really want to run a web server when we could have as much freedom as we needed in a managed service run by somebody else (and somebody else that would know more about the service that we ever might)?

Version Control

Finally, we took a very brief look at source control — in the shape of Git. We spun up a new repository, and then added and committed the files we had played with so far. To prove the point we deleted some files “by accident”, and then pulled them back into existence. Again — version control is a huge subject, but it served to round off the journey — of creating files, deploying files, and storing backups of those files.