You’re looking to explore web development and have zero ideas how to get started? No problem – I’ve got you. In this article, I will give you a bird’s eye view of all the things you’ll have to get comfortable with; then, at the end, I’ll point you to a series of detailed learning plans for each of the items below. Knowing where you’re heading, understanding how it all fits together and then getting down to the nitty gritty should have you able to create some coding magic in record time. Are you ready?
Of course, there are as many opinions as there are web developers – and each one is as legitimate as the other. However, based on my experience, my research and the MANY chats with people who have transitioned to a web development career – this seems to be a reasonable way to go, a common denominator of sorts. Not only does it cover the undisputable basics, but each phase builds on the previous one, adding extra layers of complexity as you become more comfortable. It takes you from zero to comfortable enough to go out and add the missing pieces to the puzzle on your own. From newborn to a confident teenager – ready to explore the world and to take risks.
At each moment, there are plenty of other possibilities; you’re welcome to follow that little butterfly if and when it appears; if it feels right, it probably is! That said, it’s good to have a plan to stray from (and come back to!) – and this is my quest for this article.
Starting with the HTML / CSS / JS triad will give you the core building blocks of the web. You’ll get to understand how sites actually work and be able to create a well crafted, pleasing interactive site from scratch.
HTML (Hyper Text Markup Language) is a standardized markup language for creating webpages. You can use it to create the backbone of a site and to add the content (text, images, audio and video. HTML marks these up so they can be interpreted and displayed correctly by the browser.
CSS (Cascading Style Sheets) is a rule-based language used to style your HTML code; think layout, colors, fonts, and even animations. Without it, your HTML page would look bare, like text on a page. CSS specifies how your HTML elements are displayed on screen – how your information is visually presented to users.
Libraries and frameworks – key to optimising web development
Libraries are collections of pre-written, reusable ‘routines’ (or scripts) that a program can reference (instead of having to recreate it).
Frameworks are collections of tools and libraries providing a ‘preset’ way to organise your code – helping you streamline development and avoid the need to reinvent the wheel.
Version control, Git and GitHub
Version control is a system that help keep track of multiple versions of a same project (software, documents etc.) over time. It allows you to recall specific versions later, to compare versions ad identify differences etc.
Git is such a version control system, and GitHub is a cloud-based hosting service for managing Git projects (repositories).
Responsiveness, accessibility, technical SEO
These are more than simply trendy buzzwords – they are essential for building a successful website in the 2020s. Most peole use the internet on their mobiles – and responsiveness ensures that sites function properly on mobile devices. Accessibility refers to a set of good practices designed to ensure that people with disabilities can access your site. And technical SEO (Search Engine Optimisation) requirements are simply imperatives for making sure your site comes up in Google searches.
Command line is an interface that allows you to converse with your computer by typing commands instead of using your mouse to select options in a menu. You can thus navigate, view, modify, move and save files on your computer with simple word commands.
Here’s a more visual take on this content – I’m hoping that seeing it this way will give you a sense of the path ahead of you:
So, ready for to dive in? Use the learning plans below to get started:
- Learn HTML – study plan and resources
- Learn CSS – study plan and resources
(Come back soon for the following learning plans! Next up – Intro to JS)