Visual Studio Code

Getting to know the most popular Code Editor

Before diving into the world of Web development, it’s always an important step to get to know our tools.

Since, Visual Studio Code is the editor of choice for this course, take some time to familiarize yourself with the software that will help you build software.

Watch the following video, but try pausing once in a while and test the features described in the video in your version of VSCode.

Duration: Approx. 60~90 minutes

Live Server Extension Set Up

At this point you should be familiar with VSCode, be able to install and uninstall Extensions, configure various aspects and features of the application and work with code files. Also, you should have the Live Server extension installed on VSCode.

Take a look at the next video, in order to understand how you can work with the Live Server extension as we are going to use this setup a lot in the following lessons.

Duration: 2 minutes


Tip: If you are looking for a quick and easy way to position your application windows next to each other, for example having VSCode taking up the left 50% of your screen and the Browser taking up the other right half 50%, you can use some of the shortcuts presented in the videos below (Windows 10).

Launching from the command line (Mac)

Read the following guide on how to setup launching VSCode from the command line on a Mac.

Additional Resources

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 22.01.2021

CONTRIBUTORS:

Setting up Ubuntu/Windows Dual-Boot


IMPORTANT: You can skip this lesson.

Read this entire section before starting

Dual-booting provides two operating systems on your computer that you can switch between with a simple reboot. One OS will not modify the other unless you explicitly tell it to do so. Before you continue, be sure to back up any important data and to have a way to ask for help. If you get lost, scared, or stuck, we’re here to help in the Slack forum.

Step 1: Download Ubuntu

First, you need to download the version of Ubuntu you want to install on your computer. Ubuntu comes in different versions ("flavors"), but we suggest the standard Ubuntu. If you’re using an older computer, we recommend Xubuntu. Be sure to download the 64-bit version of Ubuntu or Xubuntu.

Step 2: Create a Bootable Flash Drive

Next, follow this guide to create a bootable flash drive so that you can install Ubuntu on your hard drive. If you don’t have a flash drive, you can also use a CD or DVD.

Note: You can use this method to try out different flavors of Ubuntu if you’d like. These images allow you to try out different flavors without committing to an installation. Be aware that running the OS from a flash drive will cause the OS to be slow and can decrease the life of your flash drive.

Step 3: Install Ubuntu

Step 3.1: Boot from the Flash Drive

First, you need to boot Ubuntu from your flash drive. The exact steps may vary, but in general, you will need to do the following:

  • Insert the flash drive into the computer.
  • Reboot the computer.
  • Select the flash drive as the bootable device instead of the hard drive.

For example, on a Dell computer, you would need to plug in the flash drive, reboot the computer, and press the F12 key while the computer is first booting up to bring up the boot menu. From there, you can select to boot from the flash drive. Your computer may not be exactly the same, but Google can help you figure it out.

Step 3.2: Install Ubuntu

If you would like to test out the version of Ubuntu on the flash drive, click ‘Try me’. When you have found a flavor of Ubuntu you like, click ‘Install’ and continue to the next step.

Installing Ubuntu is where the real changes start happening on your computer. The default settings are mostly perfect, but be sure to "Install Ubuntu alongside Windows" and change the allocated disk space allowed for Ubuntu to 30 GB (or more if you can).

For step-by-step instructions, please follow this installation guide from the creators of Ubuntu.

A note to those who are wondering why they’re being asked to install an entire new operating system

Why is everyone ‘forced’ to switch to Linux or macOS for development? Are there no web developers out there who use Windows as their main operating system?

The answer to that question is: well, not that many. One of the reasons is that Ruby (on Rails) and Node.js, popular backend technologies taught by The Odin Project and widely used in the larger web development community, are open source projects that explicitly expect to run on an open-source (UNIX-based) platform. And while Apple’s operating systems have all included the XNU kernel, originally based on the FreeBSD flavor of UNIX since the transition from System 9 to Mac OS X in 2001, Microsoft has only recently commited to embracing open source and providing more support for the way people approach web development today.

One of the biggest features added in Windows 10 was the Windows Subsystem for Linux (WSL), which is a Linux command line within Windows. Setting up a development environment inside WSL is not beginner friendly, though, which is why we choose not to recommend and/or support this approach. All instructions you encounter here will assume you’re running either MacOS or Linux. Using WSL with these instructions may cause problems we are not able to help you resolve.

We do have great support for Linux/MacOS if you get stuck, so please give it a shot!

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 21.12.2020

Setting up a Virtual Machine


IMPORTANT: You can skip this lesson.

If you are already using MacOS or Ubuntu, you can skip this section. Otherwise, follow the installation instructions.

Virtual Machine

Installing a Virtual Machine (VM) is the easiest and most reliable way to get started creating an environment for web development. A VM is an entire computer emulation that runs inside your current Operating System (OS), like Windows. The main drawback of a VM is that it can be slow because you’re essentially running two computers at the same time. We’ll do a few things to improve its performance.

Step 1: Download VirtualBox and Xubuntu

Installing a VM is a simple process. This guide uses Oracle’s VirtualBox program to create and run the VM. This program is open-source, free, and simple. What more can you ask for? Now, let’s make sure we have everything downloaded and ready for installation.

IMPORTANT

Once you have completed these instructions, you are expected to work entirely in the VM. Maximize the window, add more virtual monitors if you have them, fire up the Internet Browser in the Whisker Menu Whisker Menu on the top left of the desktop. You should not be using anything outside of the VM while working on The Odin Project. If you feel like you have a good understanding after using the VM for a while, and or want to improve your experience, we recommend dual-booting Ubuntu, which there are instructions for below.

Step 1.1: Download VirtualBox

Click here and download VirtualBox for Windows hosts.

Step 1.2: Download Xubuntu

There are thousands of distributions of Linux out there, but Ubuntu is undoubtedly one of the most popular and user friendly. When installing Linux on a VM, we recommend downloading Xubuntu 18.04. Xubuntu uses the same base software as Ubuntu but has a desktop environment that requires fewer computer resources and is therefore ideal for virtual machines.

Step 2: Install VirtualBox and set up Xubuntu

Step 2.1: Install VirtualBox

Installing VirtualBox is very straightforward. It doesn’t require much technical knowledge and is the same process as installing any other program on your Windows computer. Double clicking the downloaded VirtualBox file will start the installation process. During the installation, you’ll be presented with various options. Leave them in their default state unless you are certain about their behavior. As the software installs, the progress bar might appear to be stuck; just wait for it to finish.

Step 2.2: Prepare VirtualBox for Xubuntu

Now that you have VirtualBox installed, launch the program. Once open, you should see the start screen.

A new start. The VirtualBox start screen

Click on the “New” button to create a virtual operating system. Give it a name of “Xubuntu”, leave the “Machine Folder” as is, set the “Type” to “Linux” and be sure “Version” is set to “Ubuntu (64-bit)”. Continue by pressing “Next”, and choose the following options in the next steps:

The VirtualBox Create Virtual Machine window. Xubuntu should make the Version be Ubuntu (64-bit) automatically.

  1. Memory size: Use 2048 MB or more if possible. Ideally, this amount should be about half of your computer’s maximum memory. For example, if you have 8 GB of RAM, allocate 4096 MB (1024 MB to 1 GB) to your VM’s operating system. If you do not know how much RAM is available to you, please click here.

The VirtualBox RAM window. Please allow me to Google that for you.

  1. Hard disk: Click “Create a virtual hard disk now”.

The VirtualBox Create Hard Disk window 1. This is the default selection.

  1. Hard disk file type: Choose the VDI (VirtualBox disk image) option.

The VirtualBox Create Virtual Hard Disk window 2

  1. Storage on physical hard disk: “Dynamically allocated”.

The VirtualBox Create Virtual Hard Disk window 3

  1. File location and size: We recommend at least 20 GB for the virtual hard disk.

The VirtualBox Create Virtual Hard Disk window 4

After completing the last step, click the “Create” button. Your new virtual OS should now appear in the menu. With Xubuntu selected, click on the "Settings" button on the navigation bar, highlighted in red below.

The VirtualBox Home screen with Xubuntu

Click on the “System” tab and then the “Processor” tab. Increase the Processor(s) to 2. If this screen prevents you from increasing processors, you likely need to enable virtualization in your computer’s BIOS/UEFI settings. If you have a single core processor, you will not be able to change this setting.

The Xubuntu System Settings Processor window

If you have more than one monitor, you can create additional monitors by increasing the "Monitor Count" attribute in the "Display" tab. Please be sure to increase the "Video Memory" slider until it is in the green. All other settings should remain default.

The Xubuntu System Settings Display window

With all that complete, click "OK" to save the changes.

You cannot install Xubuntu without mounting the ISO you downloaded earlier. We will do that now. Click on the section labeled [Optical Drive] Empty to the right of the text labeled IDE Secondary Master under Storage at the main VirtualBox screen, while Xubuntu is selected. This will open up a dropdown menu, click Choose/Create a disk image….

The VirtualBox Home Screen again

The next window that opens, click on the Blue Circle with the Green Plus labeled Add, and locate your Xubuntu ISO file you downloaded earlier. Choose the ISO and click open.

The Xubuntu - Opticial Disk Selector screen

You should now see the ISO on the Disk Selector screen. Click it and hit the Choose button at the bottom.

The Xubuntu - Opticial Disk Selector screen but with an ISO loaded

You can now start the VM by right clicking on the icon in the menu and by clicking the large "Start" arrow at the top.

When the VM starts up, you’ll be asked to install Xubuntu. All of the default options can be left alone, including the Installation type ("Erase disk and install Ubuntu"). It may sound dangerous, but the VM can only see the "Hard Drive" of the VM. This is the beauty of VMs: the ability to separate the physical space of your computer across many VMs. While installing, be sure to take note of the password and username you chose, we will need these later.

The rest of the installation is pretty straightforward, but if you have any questions, you can find Ubuntu’s official installation guide for Ubuntu here.

Step 3: Install and Enable Guest Additions

Your regular operating system (Windows in this case) is called the Host, and all other operating systems that run as VMs are called Guests. To make working in your Guest OS easier, you need to install Guest Additions. It adds useful functionality to the Guest OS, such as full-screen guest mode.

While your VM is running, do the following steps:

  1. Click the Whisker Menu Whisker Menu Icon on the top left of the desktop.
  2. Type Software Updater in the text field that opens up and click on the item with the same name.
  3. Install all available updates. If there are no available updates, move on to Step 5.
  4. If the Software Updater is stuck waiting for an unattended upgrade to finish, reboot the VM and start again from Step 1.
  5. Open a terminal with ctrl + alt + t or opening the Whisker Menu and typing in Terminal (the shortcut is obviously faster).
  6. Copy and paste this into the terminal: sudo apt install linux-headers-$(uname -r) build-essential dkms. Enter your password when it asks you to. (note: Your password will not be visible in the terminal. This is a security feature to protect your password. Press Enter when done.)
  7. If you get the following errors: Unable to locate package build-essential and Unable to locate package dkms, paste in the following: sudo apt-get install build-essential and enter your password. Otherwise, move on to Step 8.
  8. Type Y when it asks you to and let it finish installing. Close the terminal when it is finished.
  9. Click Devices on the VM toolbar -> Insert Guest additions CD image in the menu bar.
  10. Wait for the CD image to mount, it will show the CD on the desktop as solid, not transparent, and a window will show on the top right of the VM screen saying it was successfully mounted.
  11. Double-click on the CD icon on the VM desktop.
  12. In the new window that opens, right click on the white-space or any file/folder, and click Open Terminal Here.
  13. In the newly opened terminal window, paste sudo ./VBoxLinuxAdditions.run and hit enter. You will know it is finished when it asks you to close the window.
  14. Once it finishes, close the terminal and the CD folder.
  15. Right-click CD on the VM desktop and click Eject Volume. It will not eject if the CD folder is open.
  16. Reboot your VM (which you can do by typing reboot and hitting enter in a terminal).
  17. You can now maximize the VM window, use the shared clipboard, and create additional displays, among many other useful features. These options are available on the VM toolbar under View and Device.

NOTE:

  • If upon trying to start the VM you only get a black screen, close and "power off" the VM, click "Settings -> Display" and make sure "Enable 3D Acceleration" is UNCHECKED, and Video memory is set to AT LEAST 128mb.
  • If you receive an error when trying to mount the Guest Additions CD image ("Unable to insert the virtual optical disk"), please reboot your host (Windows/OSX) operating system. Afterwards, ensure that there is no image file mounted in both Virtual Box as well as in the file system of the VM.

Step 4: Understand Your New VM

Here are some tips to help you get started in a virtual environment:

  • All your work should happen in the VM. You will install everything you need for coding, including your text editor, Ruby, and Rails inside the VM. The Xubuntu installation inside of your VM also comes with a web browser pre-installed.

  • To install software on your VM, you will follow the Ubuntu installation instructions from inside the Xubuntu VM.

  • All of the development that you’ll do related to TOP will be done in the VM.

  • We recommend going full screen (Edit > Full-screen Mode) and forgetting about your host OS (Windows). For best performance, close all programs inside of your host OS when running your VM.

  • If you added additional monitors in the "Display" tab of your VM settings, with the VM running, clicking "View" -> "Virtual Screen 2" -> "Enable". You can run fullscreen with multiple monitors, but it may ask for more "Video Memory", which you should have increased when adding more monitors. Upon exiting fullscreen, your secondary display may close. You can reopen it with these instructions.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 21.12.2020

Installing Node

Introduction

Node is a JavaScript interpreter that doesn’t run in the browser, there are many tools that require this to be installed. Testing frameworks and bundlers are two of many.

We’re going to install it using nvm (Node Version Manager), because it makes it easy to change node versions and upgrade node. There is another tool called npm (Node Package Manager) that you will use later to install the various libraries and tools used in javascript environment. It can be easy to confuse these two so read carefully!

Node is also very easy to install using nvm, so this should go quickly 🙂

Step 0: Prerequisites For Linux

To install NVM properly, you’ll need curl. Simply run the command below:

sudo apt install curl

Step 1: Downloading and Installing nvm

Step 1.1: Download and Install

Simply run this command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

This will install nvm

Step 1.2: Initializing nvm

In the terminal there should be some directions on how to initialize nvm, if not, (or you don’t feel like copying from the terminal), run these commands:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

You can verify nvm is installed by running the command:

command -v nvm

if this returns nvm: command not found close the terminal and re-open it.

On OS X you may continue to see the same message. If this happens, open your .bash_profile and add the following line of code:

source ~/.bashrc

For more information, view NVM’s github documentation.

Then try running the above command again. If you get anything else, you’re good to continue!

Step 2: Installing Node

Now that we have nvm installed: we can install Node.

Step 2.1: Installation

Run:

nvm install node

This will install the most recent version of node, and you’ll see a lot of output in the terminal. If everything worked, you should see something similar to this somewhere in the lines of output:

Downloading and installing node v12.6.0...

If not, close the terminal, re-open it and run nvm install node again.

Step 2.2: Setting the node Version

We need to tell nvm which version of Node to use when we run the node command. It’s easy, just run the following command:

nvm use node

Now when you run node -v you should see v11.8.0 or something similar.

If you see that, you have successfully installed node!

Material based on Erik Trautman | The Odin Project

Command Line Basics

Introduction

Feeling scared of the command line? You’re not alone. We have this image of developers staring intently at a black screen with white or green text flashing across as they wildly enter incomprehensible commands to hack into the corporate mainframe (no doubt while guzzling soda and wiping neon orange Cheetos dust off their keyboard).

Other terms that refer to the Command Line Interface (CLI) are: Terminal, Shell, Command Prompt, Bash.

That black screen or window is the command line interface (CLI), where you’re able to enter commands that your computer will run for you. While there’s no need for you to reenact the scene above, working with the command line is a critical skill for you to learn as a developer. The command line is like our base of operations, from which we can launch other programs and interact with them. It has a syntax of its own to learn, but since you’ll be entering the same commands dozens of times, you’ll quickly pick up the commands you need most.

In this introductory lesson to the command line, you’ll learn how to navigate around your computer and how to manipulate files and directories (also known as folders) directly from the comfort of the command line. You’ll soon see that this isn’t as difficult as you may think. The commands you will learn in this lesson are very straightforward, so don’t be intimidated by the prospect of using the command line for the first time.

Test Drive Your Terminal

Open a terminal on your computer.

  • Windows: Press Windows+s to open up the “Start” box. Type “GitBash” and then click “OK” to open the Git Bash Command Prompt.

Launch GitBash

  • Linux: open the programs menu and search for "Terminal". You can also open the terminal by pressing CTRL + ALT + T on your keyboard.
  • MacOS: Open your Applications > Utilities folder and find "Terminal".

Before we do anything, take a look at the following text:

$ whoami

whoami

This is a terminal command because it begins with a $. The $ is saying "Hey! Enter what follows in your terminal." This means that we must exclude the $ when entering any command. In the example above, we would only enter whoami in our terminal. This is a common indicator so make sure that you aren’t entering $ before a command. Now that you are aware of what $ does, take your terminal for a test run! Make sure your terminal is open, type the command mentioned above, and press enter on your keyboard.

It returns your username. Cool!

Why learn this now?

You will be making heavy use of the command line throughout this curriculum, and the upcoming installations project will require you to install many different software programs using the command line. Additionally, you will primarily be using Git within the command line (more on this later). As part of the bigger picture, you may well be using the command line on a daily basis in your career as a software developer, making it an indispensable skill in your toolset.

Learning Objectives

By the end of this lesson, you should be able to do the following:

  • Describe what the command line is.
  • Open the command line on your computer.
  • Use the command line to navigate directories and display directory contents.
  • Use the command line to create a new directory and a new file.
  • Use the command line to rename or destroy a directory and a file.

Practice

  1. Before diving into the command line lesson, you’ll want to know how to create a file. You can do so with the touch command.
  • Open your terminal and enter ls (the l is a lowercase L). ls will show you the files and folders in the current directory (or will show nothing if the current directory is empty).
ls
  • Create a file called test.txt by entering this in your terminal: touch test.txt.
touch test.txt
  • Now enter ls once again. You should see test.txt listed in the output. You can also create more than one file at once using the touch command.

  • Enter touch index.html script.js style.css and press the enter.

touch index.html script.js style.css
  • Then enter ls once more. You should see the files in the output. Here is a small way that the terminal reveals its power. How long would it have take to create all three of those files with your mouse? Thanks, terminal!

Conquering the Command Line

Now it’s time to take a break for 10 to 15 minutes, and then start reading the 1st chapter of Conquering the Command Line.

Serve yourself a hot cup of tea or coffee and dedicate the next few hours to discovering and using the Command Line. Make sure to test the commands mentioned in the book on your local terminal.

Read & Execute: Chapter 1 of Conquering the Command Line.

Use the Command Line Like a Pro

There’s something important that you need to know about programmers. Programmers are lazy. Like, really lazy. If they are forced to do something over and over again, odds are good that they’ll figure out a way to automate it instead. The good news is that you get to benefit from the many shortcuts they’ve created along the way. It’s time to learn how to use the command line like a pro (which is to say, in a really lazy way).

Watch the next video to learn about common terminal commands and shortcuts and then move on to the next section and read about the capabilities of the command line in more detail.

Duration: 12 minutes

First, you might have already noticed that copying and pasting inside the command line doesn’t work the way that you’d expect. When you’re inside the command line, you’ll need to use Ctrl+Shift+C(Mac: Cmd+C) to copy and Ctrl+Shift+V(Mac: Cmd+V) to paste. For example, to copy and paste commands from your browser into the command line, you’ll highlight the command text and use Ctrl+C as usual and then paste it in your terminal using Ctrl+Shift+V. Test it out!

Second, you need to learn about tab completion. Seriously, this tip will save you so much time and frustration. Let’s say that you’re in the command line and that you need to move into a folder that’s far away, something like ~/Documents/FrontEndDevelopment/Web-Development-101/javascript/calculator/. That’s a long command to type out, and everything needs to be exactly right in order for it to work. Nope, we’re way too lazy for that! Basically, by hitting Tab, the command line will automatically complete commands that you’ve started typing once there’s only one option. For example, it’s pretty common to have a Documents folder and a Downloads folder in the home directory. If you’ve typed cd D and then press Tab, the command line will let you know that it’s not sure which one you want by showing you the different options that match what you’ve typed so far:

$ cd D
Documents/ Downloads/
$ cd D

But once you’ve typed in a little bit more, it will complete the name for you, making it possible to write out the full file path above by typing as little as cd Doc[tab]O[tab]W[tab]j[tab]cal[tab] (depending on what other folders exist on your computer). Test it out, and get comfortable with how this works. You’re gonna love it.

Third, there’s a really handy shortcut for opening everything within a project directory: . Once you’ve installed a text editor, you can use this shortcut to open up an entire project and all of its files in one go. For example, if you have VS Code installed, you can cd into the project directory and then type code . (with the period) to open up all of the project files. This shortcut is also commonly used with Git (which is covered in detail later on) with commands like git add . to add all of the files inside of a directory into Git’s staging area.

Exercise

In this exercise, you will practice creating files and directories and deleting them. You’ll need to enter the commands for this exercise in your terminal. If you can’t recall how to open a terminal, scroll up for a reminder.

  1. Create a new directory in your home directory with the name test.
  2. Navigate to the test directory.
  3. Create a new file called test.txt. Hint: use the touch or echo command.
  4. Navigate back out of the test directory.
  5. Delete the test directory.

That’s it–you’re done with command line basics! If you commit to doing most things from the command line from here on out, these commands will become second nature to you. Moving and copying files is much more efficiently done through the command line, even if it feels like more of a hassle at this point.

Live Session

Watch the live session recorded on 24.12.2020, where George Stamoulis goes through some of the basic Bash terminal commands alogn with a few tips.

Duration: 90 minutes

Part 2 of Bash terminal with George Stamoulis:

Duration: 137 minutes

Another great resource is this video made by one of our students Kiuri Waddington Negrao that shows how to create a Bash script that initializes a project directory, creates some basic boilerplate for web development and initializes it as a git repository. All this running on a Windows machine:

Duration: 11 minutes

Additional Resources

Bash aliases are essentially shortcuts that can save you from having to remember long commands and eliminate a great deal of typing when you are working on the command line.

  • The online book Learn Enough Command Line to Be Dangerous is a great resource for mastering the command line. Chapter 1 is free and provides a good introduction to command line tools. The rest of the book is not free and goes into more depth than you really need at this point, but feel free to purchase and read the rest of the book if you like.

  • ExplainShell.com is a great resource for if you want to deconstruct a particularly strange shell command or learn how Bash works through guess-and-check.

  • Unix/Linux Command Cheat Sheet contains a list of important commands that you can refer to regularly as you become familiar with using Linux. You can print it out so you can have a physical copy with you when you’re not at your computer.

  • Command Line Flashcards by flashcards.github.io.

  • Video Series from LearnLinxTv contains 24 videos explaining the basics of the command line. Videos are brief enough for beginners but, at the same time, are detailed enough to get started and light your inner curiosity.

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, clicking the small arrow to the left of the question will reveal the answers.

What is the command line?
    • The command line is a way to interact with the computer using specific words called “commands”.
How do you open the command line on your computer?
    • On Windows: Press Windows+s to open up the “Start” box. Type “GitBash” and then click “OK” to open the Git Bash Command Prompt.
    • On Linux: Open the programs menu and search for “Terminal”. You can also open the terminal by pressing CTRL + ALT + T.
    • On Mac: Open your applications folder and find “Terminal”.
How can you navigate to a particular directory?
    • You can use the cd command to change directories.
Where will cd on its own navigate you to?
    • On Linux and Mac, it will navigate you home.
Where will cd .. navigate you to?
    • It will navigate you “up” one folder, that is, into the parent of the current directory.
How do you display the name of the directory you are currently in?
    • On Linux and Mac, use the pwd (print working directory) command.
How do you display the contents of the directory you are currently in?
    • On Linux and Mac, use the ls command. Use ls -l to display the files in a list.
How do you create a new directory?
    • You can do this using the mkdir command.
How do you create a new file?
    • On Linux and Mac, use the touch command, e.g., touch new-file.txt.
How do you destroy a directory or file?
    • On Linux and Mac, use the rm command. To destroy folders, use rm -r or rmdir.
How do you rename a directory or file?
  • On Linux and Mac, use the mv command, e.g., mv folder/old-file.txt folder/new-file.txt.
    • Material based on Erik Trautman | The Odin Project
      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

      UPDATED: 11.01.2020

      CONTRIBUTORS:

      Code Editors

      Introduction

      A code editor is by far the most used developer tool regardless of what type of developer you are. A good code editor can help you write better code with real-time code checking, syntax highlighting, and automatic formatting.

      Why can’t I use Microsoft Word?

      Rich text editors, such as Microsoft Word and Libre-Office Writer, are great for writing a paper, but the features that make them good at creating nicely formatted documents make them unsuitable for writing code. A document created with these rich text editors have more than just text embedded in their files. These files also contain information on how to display the text on the screen and data on how to display graphics embedded into the document. In contrast, plain text editors, such as VSCode and Sublime Text, don’t save any additional information. Saving only the text allows other programs, like Node’s interpreter, to read and execute the file as code.

      Code Editors

      You can think of code editors as specialized web development tools. They are highly customizable and offer many features that will make your life easier. There is nothing worse than spending 2 hours trying to figure out why your program isn’t working only to realize that you missed a closing bracket. Plugins, syntax highlighting, auto-closing of brackets and braces, and linting are just a few of the benefits of using a code editor. There are many text editors out there to choose from, but we suggest starting with VSCode.

      VSCode is an excellent free code editor. It has outstanding add-on support and great Git integration. VSCode is the most popular code editor among students and moderators, so support is easy to find in the community.

      Which editor you use is generally a matter of preference, but for the purposes of this course, we are going to assume you’re using VSCode, mainly because it’s free, it’s easy to use, and it works pretty much the same on every operating system. If you want to use something else, do it. However, using something other than VSCode may make it more difficult to get help in the chat room.

      As a reminder, if you’re using a virtual machine, you should install your text editor of choice on your VM. You’re welcome to also install it on your host (i.e., your Windows main OS), but you’ll want to be sure that you have this critical tool inside your VM.

      Opening VSCode from the Command Line

      On Windows and Linux, you can open VSCode from the command line by typing code, and you can open folders or files by adding the name of the location after it: code my_first_app/.

      MacOS Users:

      MacOS can do this too, but you need to set it up. After installing VSCode, launch it any way you’re comfortable with. Once it’s running, open the Command palette with CMD + Shift + P. In the little dialog that appears, type shell command. One of the choices that appears will be Shell Command: Install 'code' command in PATH. Select that option, and restart the terminal if you have it open.

      Regarding Security Warning:

      A message may show, warning the user that VSCode is not trusted software. This is an expected message. VSCode can be trusted, therefore it is safe to ignore this warning.

      WSL Users:

      Although you just installed Ubuntu on your computer, you should still install the Windows version of the code editor you choose. You will edit the files in your Projects directory with the code editor, and WSL will be able to read these files. If you are using VSCode, be sure to install the "Remote – WSL" extension when prompted. This extension will allow you to directly access your Linux files. Once installed, select the green icon in the lower left corner to connect to WSL.

      Material based on Erik Trautman | The Odin Project
      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

      UPDATED: 25.10.2020

      Installation Overview

      Introduction

      The first step for building any website is having the right tools. For us, that means setting up a development environment for writing good code.

      Many online development courses use in-browser code editors or "sandboxes," which give you the tools and programs needed to accomplish the task at hand and nothing else. You’ll use some of these sandboxes throughout the early stages of course since they’re great for getting started quickly. However, the best way to set yourself up for long-term success is to operate in a real development environment.

      We won’t lie to you: installing packages, editors, and even entire operating systems can be very frustrating. However, having the experience of setting up a development environment to run the code you’ll write is an invaluable real-world skill you’ll carry with you for the rest of your career.

      The Installation Plan

      In the following sections, we’ll go over the steps for setting up your environment. These sections are the most important steps in the entire curriculum. Please take the extra time to double check what you’re typing or you may cause more headaches for yourself down the road.

      In the next few lessons, we will walk through these installation steps together:

      • installing the operating system (OS) of your choice;
      • installing a code editor;
      • creating an SSH key (a personal "password" that will identify you to GitHub, Heroku, and many other sites you’ll be using); and

      At the end of this section, you’ll be up and running with many of the tools you need to write and run code! It may seem like a lot of steps, but we’ll get through it as painlessly as possible together! If anything goes wrong, remember to use these steps:

      • Parse the terminal output for the actual error.
      • Google, Google, Google.
      • Never be afraid to ask for help!

      OS Options

      "Woah, woah, woah! I like my OS just fine the way it is!"

      Don’t worry! We’re not asking you to get rid of what you’re comfortable using. You’ve probably learned a lot of tips and tricks for your favorite OS and don’t want to lose everything you have on your computer. However, most OSs are developed with non-technical folks in mind, so they hide or make it difficult to use many of the languages and frameworks we’ll need to install. Having to work around these difficulties causes many new developers to give up before they’ve even started their journey to full-stack nirvana.

      Modifying or dual booting a computer to work with the tools you’ll need will make it much easier to start programming, can help create a distraction-free environment, and will look good on your resume. Take a deep breath, and let’s look at your options.

      Mac

      If you’re using a Mac, you’re in great shape. Most professional developers rely on Unix-based systems for their coding. By installing just a few programs, you will be up and running with your education in no time!

      Linux

      Linux is a free and open-source operating system that works well with all programming languages. Most development tools are written to work natively with Linux. Your tools will likely be updated more often, have more information available for troubleshooting, and just plain run better on Linux. We’ll be using Ubuntu, one of the most popular and user-friendly distributions available, or the lighter weight alternative Xubuntu. If you don’t use a Mac, we recommend that you use Linux. It’s that simple.

      Virtual Machines and Dual-Boots

      IMPORTANT: Setting up a Virtual Machine or Dual-boots on your computer is an advanced process. Make sure to proceed to these steps, only if your instructor told you to. If you are planning to go through the process yourself, make sure you’ve discussed it with your instructor.

      A virtual machine is an emulation of a computer that runs within your existing OS. It allows you to use another operating system inside of a program on your current operating system (e.g. Running Linux inside of Windows). Virtual machines are as simple to install as any other program and are risk free. If you don’t like Linux, you can easily remove the virtual machine. Virtual machines are a great way for new developers to get started quickly.

      • Watch this video on Virtual Machines to achieve an overview of how they work.
      • If you need further clarity, read this article for more information on virtual machines.

      Dual-booting means installing two operating systems on your computer, which can give you the option to boot either Linux or Windows when your computer first starts up. The advantage of dual-booting over a virtual machine is that the OS can use all of your computer’s resources, resulting in much faster operation. There is some risk to installing a dual-boot system because you’re changing your hard drive partitions, but the risk is very low. You’ll be okay as long as you take your time and read the instructions.

      Dual-booting can be as easy as inserting a flash drive and clicking a few buttons. The benefits of dual-booting cannot be understated. You will allow Linux to access the full capabilities of your hardware, have a clean and distraction-free environment for coding, and learn the platform used by many senior developers and servers around the world.

      Windows 10 with the Subsystem for Linux

      You’re probably familiar with Windows for one reason or another. For many people, it is their OS of choice. Windows is easy to use and comes pre-installed on most computers. Unfortunately, some languages, such as Ruby, were created with the assumption that they’ll be used on Unix-based (Mac or Linux) systems and do not easily run on Windows.

      It is possible to develop with the Windows Subsystem for Linux (WSL), but it is highly discouraged. If you go this route, you’ll end up spending many hours on Google trying to fix the many problems you’ll encounter. For your sanity, we recommend installing a virtual machine instead of using WSL.

      Online Editors

      Finally, there are a variety of online code sandboxes that can be quite handy when you’re away from your main system or prototyping some code before committing it.

      These sites can be used to complete small exercises or to sketch out a concept you don’t quite understand. However, you shouldn’t use these sites as your main development environment.

      Material based on Erik Trautman | The Odin Project
      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

      UPDATED: 25.10.2020