Additional Setup
In this section, I will go through relevant settings that will be helpful when coding in any language.
1. Font-type
The first time I began coding, I never thought that I would have to choose a good font for myself. Obviously, whenever you install a code editor, it comes with a predefined font to use - which is usually a system-specific font such as Consolas.
It is important to have the right font when coding as it will greatly help you in your workflow, to identify errors easily, to type faster, and it's easy on, and pleasing to the eye.
Therefore, what font should you choose? I don't know the answer to this because there are hundreds, even thousands of fonts out there. Just go to Google fonts and you will see for yourself. I will advise you, however, that whatever font you choose, make sure it is monospaced.
Monospace fonts
A monospace font is a font type whose characters occupy the same amount of horizontal space: meaning whatever you type in is always going to be uniform. This ensures readability of your code.
I said I can't choose a font for you to write code in. This is true. I can, however, give you suggestions based on my experience, and how the fonts make me feel. (Yes, fonts can make you feel things).
- Consolas (Usually the default on Windows machines)
- Cascadia Code (Shipped with Windows 11)
- Menlo (Usually the default on MacOS)
- Source code pro
- Roboto Mono
- Courier
- Incosolata
- IBM Plex Mono
- Fira Code
- MonoLisa
Here (opens in a new tab) is a link to get the fonts if you're having trouble.
2. Formatter
You are also going to need a formatter for your code. There are some people who don't use any formatter, but I highly recommend it because it uses the language rules to properly format your code. For example, if you're coding in C++, the formatter is going to use C++ rules when formatting the code, as well as general good practices when coding, which can sometimes be lost on us when we get in the zone.
The most popular formatter by far is Prettier which you can easily install and configure if you're using Visual Studio Code. Make sure you have it set to be the default formatter, and your editor is also set to Format On Save so that things actually work as you expect them to work.
I have uploaded my settings.json (opens in a new tab) file to GitHub for your reference. All you need to do is check the setting you want and add it in your own settings.json file.
3. Live Server Preview
When coding in HTML and you want to preview what you have built, all you need to do is open your .html file using a browser and voila!
The gotcha with this method is that every time you make a change in your file, you have to manually reload the page so that the changes take effect. Now, this might be tolerable if you have a small app, or if you don't mind reloading the page every time. However, there is a way to improve your workflow so that you skip the mousebutton click.
In VSCode, there is an extension called Live Server. Once you install it, right click on your .html file and then click "Open With Live Server". This will launch a development server on http://localhost:5500 which supports Hot Reloading. Hot Reloading means that, whenever you make a change in your code and save, it will automatically reload the webpage for you so you don't have to do it manually.
Let's begin
Now that we have all that out of the way, we can safely begin typing away. And we are going to begin in the next module with a simple HTML program.