Web Development: A Beginners Guide — Lesson 2: Tools of the Trade
Welcome Back if you missed the 1st post, find it here Web Development — Beginners Guide: Part 1
In the previous lesson we covered what a website is and the languages used to create one. In this lesson we will start to explore the tools you will be using to create some wonderful websites.
Command Line
Before you run away thinking “I don’t know how the command line works”
The terminal is not something hidden behind the scary door, it may seem that way at first but it is not.
spend five minutes in the terminal playing around with the basic commands such as `cd` to change directory and `touch {file.txt}`
to create a new txt file.
note: the {file.txt} should be replaced with the name and extension of the file you are creating. for example ‘touch hello.txt’ will create a text file named hello.
Lets start with the Terminal or Command Prompt. If you are on Linux or MacOS this will be the Terminal, which you can open by clicking on the icon, or on Mac by pressing `CMD + Space` to open spotlight and typing `Terminal` most Linux distributions have a shortcut like `CTRL + ALT + T` or `SUPER + T` note: super is the Windows Key.
A lot of developers like to use a terminal replacement app such as iTerm or Hyper. I prefer to use the standard terminal that comes with my OS.
If you are on Windows you can use `CMD.exe` or `Powershell` though I would recommend downloading Microsoft’s new Terminal App
If you are still a little terminal shy, no need to fear I will make sure to include all the commands I run to setup a project in each tutorial so they are easy to follow along with.
I will also have another post that will detail more advanced commands and perhaps one to teach you how to begin with shell scripting to automate processes, for now CD and Touch should suffice.
Text Editor
This is one of the old aged debates, which text editor should you use? VSCode? Sublime? Notepad? Atom? Or maybe even vim?
Notepad or other default text editors on Linux and Mac are great for starting a quick simple project to throw some HTML in and see what happens however managing files and projects with multiple folders and assets can become unwieldy.
Let’s take a look at options
Visual Studio Code
That is why a Text Editor is recommended, if you are a Microsoft fan then by all means go for VSCode, I enjoy using it. It’s feature rich, built on Electron so it’s made with web technologies such as JavaScript anything you need it to do it’s able to thanks to extensions and you can theme it however you like. It has excellent git integration*
* note: We will cover git later, but in short it is a Version Control System, a life saver if you’ve made a change that breaks everything.
Sublime Text
Similar to VSCode, except much older and it’s coded in C instead of Electron, this means it runs a little faster. It has a very similar theming system and the option to add plugins as well, many themes and plugins that are available for VS are also available for Sublime and Atom.
Atom
I used this for a little while and enjoyed it while I did however after moving to other text editor I can see a visible difference in speed. Nevertheless a feature packed text editor, described as a hackable text editor it has a plethora of options for you to change and tweak to your liking. Plus the icon is ridiculously cute.
Vim
Ah the famous/infamous vim, possibly the marmite of text editors, it’s notoriously difficult to start working with however renowned to be incredibly efficient and customizable. Also vim (or vi) is usually installed on most Linux Distrobutions, so if you will be working with a lot of servers then it’s handy to know the basics anyway. I have two ways of thinking with this editor, either wait until you understand the command line a little better before giving this a go, or just dive in feet first and learn it from the start. Another major upside of vim is how lightweight it is, on my MacBook it runs at 0.0% cpu usage when idle, and while testing with a bunch of emmet commands I managed to get it up to 1.24% but your mileage may vary.
Brackets
The first text editor I installed, I learnt a lot of what I know about HTML and CSS using this editor. This editor introduced live preview to the text editor world allowing your browser window to reload as soon as you press save on a file, this made developing and making minor changes and bug fixes a dream.
But which one?
Honestly, it doesn’t matter all that much. You can argue over your favourite one and there are many othres including Caffeine for MacOS, which I have been considering trying for a while now and eMac’s which is comparable to vim. Really it’s down to you to test some of them and enjoy figuring out which you prefer. If you would like to see direct comparisons with user input see stackshare just google `stackshare vscode vs emacs` and it will bring up a nice comparison of features that each editor has and what users say each is good for.
Web Browser
I won’t spend too long on this topic as you likely already have a favourite, just make sure you have an up to date web browser such as Chrome, Firefox, New Edge etc. as this will allow you to fully utilize new HTML, CSS and JS technologies as they are released.
That’s all you actually need to start web development. There are many other tools that will make things quicker but I would highly recommend learning with just a text editor web browser and the default terminal application.
Thanks for reading lesson 2! Click the link below to start lesson 3, in which the actual code typing begins.
