Using the Terminal and VS Code for Project Management

Welcome to the first lesson in your journey to becoming a full-stack web developer! We'll begin by setting up your professional toolkit, focusing on two of the most fundamental tools you'll use every single day: the command-line terminal and the Visual Studio Code editor.

Your goal is to build a complete e-commerce application, and mastering your tools is the first step toward that. In this lesson, we will focus on how to use the terminal and VS Code together to create, navigate, and manage the files and folders that make up a project. This foundation will make every subsequent step, from writing code to deploying your application, much more efficient.

Why Bother with the Command Line?

Before we dive into specific commands, it's worth understanding why developers rely so heavily on a text-based terminal when modern computers have such intuitive graphical user interfaces (GUIs). In short, the command line offers greater control, speed, and access to a vast ecosystem of development tools that don't have a graphical counterpart.

To get a better sense of these benefits and clarify some common terms, let's start with a short video.

Command Line Crash Course For Beginners | Terminal Commands

Watch the "Command Line Crash Course For Beginners" video from Traversy Media. It provides a great overview of the terminal's role in a developer's workflow.

Please watch the first two sections. First, focus on the section explaining why you should learn the command line. Then, watch the explanation that clarifies the differences between the terminal, command line, and shell. This will help you understand the terminology we'll be using.

Core Commands for File System Operations

Now that you have a conceptual understanding, it's time to get hands-on. We'll learn a handful of essential commands for navigating your computer's file system and managing directories (folders) and files. While you watch, I encourage you to open a terminal on your own computer and follow along.

Command Line Crash Course For Beginners | Terminal Commands

Continue with the "Command Line Crash Course" video. The following segments demonstrate the most common commands you'll need.

Watch the following three segments, and try to run the commands yourself: Navigating the File System: This part covers pwd (to see where you are), ls (to see what's in a directory), and cd (to move between directories). Creating and Deleting: This segment introduces mkdir (to create directories), touch (to create empty files), and rm (to remove files and directories). Pay close attention to the warnings about using rm -rf! Copying and Moving/Renaming: This final part covers cp (to copy) and mv (to move or rename). Don't worry about memorizing every command and its options right away. The goal is to build familiarity.

A quick tip for efficiency: as you start using the terminal more, you'll appreciate shortcuts that save you from typing long file or directory names. The most important one is Tab Completion.

Command Line Basics | The Odin Project

The Odin Project has an excellent article on command-line basics. We'll focus on the section that discusses productivity shortcuts.

In the article, find the section titled "Use the command line like a pro". Read the part about tab completion. Practice this as you work through the commands; it will save you a tremendous amount of time and prevent typos.

Your Development Environment: VS Code

The terminal is where you'll run commands, but you'll write your code in a specialized text editor. For this course, we will use Visual Studio Code (VS Code), a free, popular, and powerful code editor from Microsoft. You mentioned you already use it, which is great.

For a quick refresher on its interface and how to manage files, this video provides a concise tour.

VS Code for Absolute Beginners

Watch this "VS Code for Absolute Beginners" video from Coder Coder to get familiar with the main parts of the user interface.

Focus on these two parts: A tour of the user interface, including the Activity Bar, Sidebars, and Panels. A walkthrough of the Explorer sidebar for managing files and folders.

Bringing It All Together: The Integrated Terminal

One of VS Code's most powerful features is its integrated terminal. It allows you to open a terminal panel directly inside the editor, placing your code and your command line side-by-side. This creates a seamless workflow where you can edit files and run commands without ever leaving the VS Code window.

Getting started with the terminal - Visual Studio Code

The official VS Code documentation provides a clear guide on how to use the integrated terminal.

Please read the first section, "Run your first command in the terminal". The keyboard shortcut `Ctrl+`` (Control-backtick) is the fastest way to open and close it.

Now, let's see it in action.

VS Code for Absolute Beginners

Return to the "VS Code for Absolute Beginners" video.

Watch the section on the integrated terminal. This will show you how to open, create, and manage multiple terminal instances within VS Code.

Hands-On: Setting Up Your Project Structure

It's time to apply what you've learned to set up the directory structure for our e-commerce project. This exercise will solidify the workflow of using the terminal inside VS Code.

Open your standalone terminal (not inside VS Code yet).
Your terminal usually starts in your "home" directory. It's good practice to create a dedicated folder for all your development projects. Create one named dev (or projects, if you prefer).
```
mkdir dev
```
Navigate into that new directory.
```
cd dev
```
Now, create the main folder for our course project. We'll call it ecommerce-store.
```
mkdir ecommerce-store
```
Navigate into the project folder.
```
cd ecommerce-store
```
This is the key step: open the current folder (.) in VS Code by typing:
```
code .
```
VS Code should launch, with the ecommerce-store folder open in the Explorer sidebar. If this command doesn't work, you may need to install it from within VS Code. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), type Shell Command: Install 'code' command in PATH, and press Enter. Then try code . again.
Now, open the integrated terminal in VS Code (Ctrl+``). Notice that the terminal's working directory is already set to your project folder, ecommerce-store`.
From the integrated terminal, let's create the two main subdirectories for our full-stack application: one for the frontend (client) and one for the backend (server).
```
mkdir client server
```
You should see these two folders appear instantly in the VS Code Explorer sidebar.
Let's create the basic files for our storefront. First, navigate into the client directory.
```
cd client
```
Now, create the three core files for a simple webpage.
```
touch index.html styles.css app.js
```
Again, these files will appear in the Explorer under the client folder. You can now click on index.html in the Explorer to open it and start coding.

You have successfully used the terminal and VS Code together to scaffold a new project—a fundamental skill for any developer.

Conclusion

In this lesson, we established the "why" and "how" of using the command line and VS Code, two cornerstones of a modern development workflow.

Here are the key takeaways:

The terminal provides a powerful, text-based way to interact with your computer, essential for running development tools.
Core commands like pwd, ls, cd, mkdir, touch, and rm allow you to navigate and manipulate your file system efficiently.
VS Code is a versatile code editor that integrates seamlessly with the command line via its integrated terminal.
The code . command is a quick and effective way to open your project folder and start working.

You've now created the basic folder structure for your e-commerce store. In our next lesson, we will build upon this by initializing a Git repository. You'll learn how to track changes to your project, write meaningful commit messages, and share your work on GitHub, moving us one step closer to a professional, collaborative workflow.