Chapter 01 — Front-End Fundamentals

The Terminal

Before you write a line of HTML, you need to get comfortable in the terminal. Almost everything in this series runs through it. The sooner it feels normal, the better.

Open Terminal. On macOS it’s in /Applications/Utilities/. On most Linux distributions you can get to it with Ctrl+Alt+T, or find it in your application launcher. When it opens, you’re sitting in your home directory. That’s the starting point for everything.


Who are you and where are you

Two commands to start. Neither one does anything to your filesystem. They just tell you things.

bash~/tutorials/
whoami

This prints your username. On a machine named after your dog, on a shared work server, on a VPS you just spun up, whoami tells you who the system thinks you are. It’s a small command, but it matters when you’re working in environments where user permissions and file ownership are relevant (and in web development, they often are).

bash~/tutorials/
ls

ls lists the contents of your current directory. Run it now and you’ll see the familiar top-level folders: Desktop, Documents, Downloads, and so on. This is your home directory.


Make a project folder

You’re going to create a folder for the project you’ll be building throughout this series. Pick a location that makes sense to you. A common convention is to keep all your development projects in a folder called dev or projects in your home directory. That’s what we’ll do here.

bash~/tutorials/
mkdir tutorials

mkdir stands for “make directory.” You’ve just created a folder called tutorials in your home directory. Run ls again and you’ll see it.

Now move into it:

bash~/tutorials/
cd tutorials

cd stands for “change directory.” You’re now inside tutorials. If you run ls here, you’ll get nothing back. The folder is empty.


Build out some structure

Let’s add a few subdirectories to work with:

bash~/tutorials/
mkdir src
mkdir dist
mkdir docs
mkdir notes

You can also do this in one line:

bash~/tutorials/
mkdir src dist docs notes

Run ls again. All four folders are there.


Remove what you don’t need

You don’t actually need notes for this project. Let’s remove it.

bash~/tutorials/
rm -r notes

The -r flag stands for “recursive.” On its own, rm removes files. To remove a directory and everything inside it, you need -r. Since notes is empty, it would also work with rmdir notes, but rm -r is the habit worth building because directories are rarely empty in practice.

Run ls one more time. Three folders: src, dist, docs.

A word of caution: rm is permanent. There’s no trash, no undo, no recovery prompt. What you delete is gone. Get used to pausing for a half-second before you run it.


Move around

You’re currently inside tutorials. Here’s how to navigate up and back down.

To go up one level, to your home directory:

bash~/tutorials/
cd ..

.. means “the parent directory.” Run ls here and you’ll see tutorials in the list alongside your other home directory folders.

To go back into tutorials:

bash~/tutorials/
cd tutorials

To go directly into a subdirectory from here:

bash~/tutorials/
cd tutorials/src

To go up two levels at once:

bash~/tutorials/
cd ../..

Each .. is one level up. Chain them with / to climb multiple levels in a single command.

One more useful shortcut: no matter where you are in the filesystem, this takes you straight home:

bash~/tutorials/
cd ~

~ is shorthand for your home directory. You’ll see it used often.


What you now know

You can orient yourself in the filesystem (whoami, ls), create folders (mkdir), move into and out of them (cd), and delete what you don’t need (rm -r). That’s enough to work with. In Chapter 2, you’ll initialize a Git repository inside the tutorials folder and start tracking your work.