Transition into Tech
Roadmap: Getting started with web development 1

Roadmap: Getting started with web development

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.

HTML / CSS / JavaScript – the building blocks of web development

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.

JavaScript (JS) is a scripting / programming language used to enhance your HTML code by making websites dynamic and interact. If a website does anything more than just display information, if you get to interact with the information in any way – fill out interactive forms, stop/play a video, look at photos in a slideshow etc. – chances are JavaScript was used in building the site.

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

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:

Roadmap: Getting started with web development 2

Download this infographic in .pdf

So, ready for to dive in? Use the learning plans below to get started:

(Come back soon for the following learning plans! Next up – Intro to JS)

Add comment

Want weekly inspiration and tips on how to rock your transition into tech? Sign up here!

*


Check your Tech Terms – do you know all these?

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.