Learning how to code is easily the best thing I've done with my time as an adult, but navigating the quagmire of tutorials and courses is a big challenge. I was fortunate enough to figure out how to learn completely for free, at least well enough to land my first role, but it wasn't without its pitfalls. With the benefit of hindsight and work experience, I thought I'd collate some free resources that I've found helpful, starting with some web fundamentals and setting up your development machine.
An overview
Before we get started, I watched a video recently that I thought was great both for motivation and a reality check which I recommend watching.
Mistakes That Prevent Self-taught Developers From Landing A Job by DonTheDeveloper.
How the web works
In order to learn how to code properly, you must first understand how the internet works, what programming languages are, the different programming languages that exist and why they exist.
Throughout your coding journey, I recommend keeping the MDN documentation bookmarked and accessible at all times. This is one of the best resources for learning about all things web development and will prove extremely useful as a reference manual as you progress through your learning and career. Whilst one can learn how to code on this platform alone (the same goes for other resources I will reference later), the point of this guide is to cherry pick what I think are the best parts of all the available free tools and resources. I also recommend bookmarking W3 Schools for similar reasons!
The first resource I’d like to recommend is the free online course provided by Harvard University called CS50’s Introduction to Computer Science. If you would like to go through this entire course, it wouldn't be a waste of time, however, I only recommend watching the first lecture; Lecture 0 which passionately talks about what code actually is.
The second resource is the following MDN articles: How Does The Internet Work? and How The Web Works.
Once you’ve completed Lecture 0 and read the 2 MDN articles, you’ll hopefully be excited to get into some coding and have some solid foundational knowledge to better prepare you for your learning journey.
Some Terminology
There is no shortage of terms and acronyms in the world of software development and there are lots that you will need to learn - but don’t worry, they’re not as complicated as they sound. Here are a few definitions to hopefully make the set up process a bit easier.
Web Browser
You should already be familiar with web browsers, but they are one of the main tools for a web developer and are more capable than you may realise. Examples of web browsers include Google Chrome, Mozilla Firefox, Microsoft Edge and Apple's Safari.
Code Editor / Text Editor
Whilst we can use any text editor to write code (yes, even Notepad or TextEdit), it makes life extremely difficult. A code editor is basically a text editor with extra features like language specific syntax and error highlighting, multi-line editing (where you type and edit multiple lines at once and feel like Neo), the ability to easily click through to other areas of your codebase and more. A code editor is the place where we write and edit all of our code.
Terminal
A terminal provides a Command Line Interface (CLI) to interact with your computer. Although it may seem archaic at first when compared to a GUI (Graphical User Interface), once you get used to it, you’ll realise how quick and powerful it can be. Using the terminal, we can run our code, browse, create, edit and delete files, run programs, install and manage applications and utilities and much, much more. Typically speaking, a software developer will live between their code editor and terminal. The code editor to write and edit code, and the terminal to execute commands.
Bash
Bash is the CLI language that we use in a Unix terminal. It actually stands for ‘Bourne-Again-SHell’. You can find out more about it here.
Zsh
An alternative to Bash. This is now the default shell shipped with MacOS. You can read more about it here.
IDE
An IDE (or Integrated Development Environment) is the software that developers use to build software. At its core, it will provide a platform which integrates a code editor with a terminal, but also provides and integrates other tools to make development easier. Arguably, the most widely used IDE is Microsoft’s VSCode but another popular suite of developer tools and IDEs comes from JetBrains.
NB: There is an argument about whether or not VSCode qualifies as an IDE, but my opinion is this: at its core, VSCode is a text editor with a built-in terminal panel but through the use of extensions, we can get an IDE-like experience without the need to learn and buy different tools when we use different languages. My advice would be to spend less time worrying about whether VSCode is an IDE, and more time learning and trying different tools until you find something you like!
Package Manager
A package manager installs, updates, configures, and removes software packages. In the context of a package manager in the terminal, you can think of it like a CLI App Store where you can search for, download, install and uninstall open source apps (yes, even desktop ones with GUIs!). Popular package managers are Homebrew for the Mac and Chocolatey for Windows.
Setting up your development environment
You don’t need a powerful or new computer and you can run MacOS, Windows or Linux, but if you want to develop for iOS or the Mac, you will need a Mac. If you’re worried about the age or spec of your computer, you should only run into hardware limitations once you start working on larger projects, or need to use virtual machines and emulators. Until then, most computers are up to the task.
If you’re looking to buy a new machine and you want a hard and fast recommendation, I recommend any Apple Silicon Mac. In my experience, this will provide you with the most flexible and powerful platform for most development tasks, but do not let this be a barrier to entry as it’s by no means a requirement for learning and for working!
Now let's get set up.
MacOS
Terminal
MacOS already ships with a built-in terminal, aptly named ‘Terminal’. You can launch it by searching in Spotlight, searching in Launchpad, opening the ‘Other’ folder in Launchpad, or by going to the ‘Utilities’ folder in your Applications folder. Whilst the built-in terminal on MacOS is more than sufficient, I recommend downloading and installing iTerm 2 which will give you really useful features that will make your life easier.
Next, I recommend installing a package manager called Homebrew, arguably the most popular package manager for the Mac. You should read the documentation and play around with it to get a feel for using the terminal and a package manager, however you will learn these things as we go. If you would like to learn more about using Homebrew, I think the first ~4minutes of this video is great.
Windows
Terminal - WSL
Earlier I mentioned that we could configure Windows to use something called WSL (Windows Subsystem Linux). WSL allows you to install a Linux distribution, such as Ubuntu, Debian, or Kali, as an application in Windows. Once installed, you can open a Linux terminal and run commands, scripts, and tools as if you were running them on a native Linux system.
In order to install WSL, follow the official install guide and make sure it’s configured to WSL 2 and Ubuntu. Once installed, you will be able to open Ubuntu like an application which will open an Ubuntu terminal.
Terminal - PowerShell
As an alternative to WSL, you can use Windows’ built in terminal, PowerShell which you can search for and launch from the Start menu. I recommend installing the package manager Chocolatey, reading the docs and having a play around to get a feel for using it.
As to why you would choose the hassle of getting WSL set up; PowerShell doesn’t have Bash or Zsh, which the majority of the developer community uses due to nearly all servers running Linux and MacOS being ‘Unix-like’.
Terminal - GitBash
A great half way house (and my recommendation if you're not going to set up WSL) is GitBash. GitBash brings bash-like commands to Windows, and is what I personally use on my Windows machine, as I find it a good compromise between performance and a Bash-like experience.
MacOS & Windows
VSCode
I recommend using VSCode as your IDE as it’s currently amongst the most used, fully-featured and it's FREE! You’ll also find that a lot of online tutors will use VSCode which will make it easier to follow along. To install it, follow these instructions.
If you’re using WSL, I recommend running VSCode inside WSL which you can do by following these instructions.
Sublime Text
Alongside VSCode, I also recommend installing Sublime Text. Whilst there is an overlap in functionality between the two, I find that having a no nonsense code editor on hand can be beneficial as a scratch pad, or to quickly open files that you may want to access outside your current project.
Web Browser
I recommend Google Chrome for development, but it’s also important that you have multiple browsers installed to test web apps in browsers that your users are likely going to use, like Safari or Microsoft Edge. I personally use Firefox as my main browser and Chrome or Firefox Developer Edition for developing on as, in my opinion, they have certain superior features.
Click here to install Firefox or here to install Firefox Developer Edition (or both if you’d like!).
Node.js
Put simply, Node.js enables you to run JavaScript on your computer (or a server). It's a more advanced subject which we'll go through later, but for now, just know that you should install it! To install it, you can use your package manager, or download the installer.
Git
Git is the standard version control system (VCS) for software developers. It’s an essential tool to learn and will be one of (if not the) most used tool in your arsenal. There are 2 ways to use Git - the first is via the terminal and the second is via a GUI. Learning how to use Git via the terminal is an essential skill, so you should get used to that first. However, GUI Git clients can be useful to visualise a repository, especially when you get stuck. It can also be handy whilst you’re learning so you can see what’s going on and what your commands are doing!
To install Git, follow this guide written by Atlassian. For MacOS users, I recommend installing Git via the Homebrew package manager. For Windows, I recommend installing GitBash (if you haven’t already done so).
For Git GUI tools, I recommend the VSCode plugin, GitGraph which works conveniently within VSCode alongside the built in Git tools already available. Alternatively, 2 other popular choices are SourceTree and, my personal favourite, GitKraken.
A scratch pad
Throughout your learning (and beyond) you’ll probably want to try some things out to see how they work outside of your codebase. Rather than setting up a whole new project just to try a couple of quick things, there are some apps that allow you to do just that!
For browser based apps, check out and bookmark Code Sandbox and Codepen.
For desktop based apps, check out RunJS and the VSCode extension Quokka.js.
Customisation
Setting up VSCode
Out of the box, VSCode has a lot of features but we can extend and customise its functionality and appearance through the use of ‘extensions’ via the VSCode Marketplace. It’s a good idea to have a play around just to get a feel for it before continuing, but you will become extremely familiar with it as you learn. Check out this video by Tech With Tim to give you a comprehensive beginner’s overview of some of VSCode’s core features and concepts.
The extensions I recommend installing to get you going are:
- Live Server which lets you easily run your code in a browser with automatic refresh on save, which means you don’t have to refresh the browser every time you make a change to your code.
- Prettier which lets you configure rules to set how your code is formatted, and automatically formats your code on save based on your formatting rules.
My favourite extensions for aesthetics that you may want to check out:
- VSCode Icons
- GitHub Theme (I'm a long-term user of GitHub Dark Dimmed)
- Dracula Theme
Some utility extensions I use:
- Sort Lines which lets you sort lines of code in various formats
- Todo Tree which lets you add ‘to do’ comments to your code and view them all in one easy to access
- Spell Checker - if you only install one utility extension from this list, choose this one.
Of course there are a seemingly limitless amount of extensions available (and more are being added every day), but you will figure out which ones you need as you go. VSCode also does a good job of recommending extensions when you open up different file types. For example, if you were to open a Python script (a .py file) you’d likely get a popup asking if you’d like to install some python specific extensions if you haven't got them installed already.
Customising your terminal (WSL & MacOS)
You can completely customise the look and feel of your terminal, as well as set up your own shortcuts (called aliases) or even your own scripts to get your common tasks completed more efficiently. You’ll get more into this side of things as you go, but if you like customising and tweaking things, I'd have a look at Oh My Zsh and watch this video on how to get it set up.
Now go take over the world by writing your first app!
Top comments (0)