Full Stack Development - Lesson 1

Welcome! This is the first lesson in Full Stack Web Development course of Dibimbing.id. In this course we assume you know absolutely nothing about writing code. We do assume that you have a basic grasp of how to operate your computer: how to browse the Internet, how to operate your operating system, how to use a keyboard and mouse, etc.


Before we get started, we need to set you up with all the necessary tools you're going to need to get up and going. I use macOS to write code on but nearly everything I'm going to suggest has Windows equivalents and some have Linux equivalents as well. While I'm not a Windows or Linux dev (or least haven't been for a long time) I'll try to make sure we get you in with some good tools. What's important here is that you find what works for you.


My Recommendation: Firefox / Chrome.

I like both Firefox and Chrome as they just keeps getting better. The developer tools are amazing and the team behind them are amazing too.

That being said, Edge or Safari are all very good browsers with great dev tools too. If you feel comfortable with one of these already, stick with it. If you're using Safari, make sure you enable dev tools.

The Editor

My Recommendation: Visual Studio Code

It's a fantastic editor that has a lot of convenient features and helpers. To me it's the right balance of minimalism and helpers. It works in particular really well with front end development as well, and since the editor itself is JavaScript-based, if you ever feel like adding a new feature or plugin to it, you'll already know the correct language to do so. It's free, open-source, and works well on Mac, Linux, and Windows. And perhaps one of the best features of VSCode is it has a huge amount of available plug ins.

If you're not feeling VSCode, two other editors that are similar in their offering are Sublime Text 3 and Atom. Both are great.

I'm going to simply state there are two more tools you could use: vim and emacs. These are tools that you use in the command line / terminal and use just the keyboard, no mouse. These tools have a very difficult learning curve but once you're productive in them they allow you to go very fast. My advice for you is: don't, especially right now as you're learning to code. If you want to revisit it later then you could do that. But just know that it is indeed quite difficult.

The Terminal

You're going to learn to use a terminal during this workshop. There are two things to worry about when talking about the terminal, and I'll try to help you tell the difference between the two: the shell and the terminal emulator.

The terminal emulator is the actual window in your operating system; it itself doesn't execute or understand your commands you're sending to it. The shell is the code running inside of the terminal emulator. This shell can be swapped out to whatever shell you want to run. Unlike the things I recommended above, these various terminal emulators and shells vary a lot more by operating system.

For the terminal emulator, it doesn't matter a whole lot which one you use. I personally use iTerm2 but you can just as easily use the default Mac Terminal.app. For Windows, I'm told the Hyper also works well as well as cmder. If you're on Linux, I'd say just use whatever the OS's default emulator is. You can use any one of these and this workshop will function entirely the same.

For the shell, we are going to use zsh. You don't need to install it unless you're using Windows (then use these steps to enable it). It's 99% already there on your computer unless you're using some obscure flavor of Linux. Whenever you open your Mac terminal, it'll be running zsh by default unless you've changed it.

Reading Material

Some resources that will help you understand our first lesson deeper: