Files, Folders, Editors & Terminals
The everyday tools developers use to organize and run their code.
What you'll learn
- Explain how files and folders form a hierarchical structure
- Identify the role of a code editor versus a terminal
- Recognize common terminal commands for navigating folders
Prerequisites
Explanation
Almost everything a computer stores lives inside a file system: a hierarchy of folders (directories) containing files, starting from a root folder and branching downward — much like the outline of this course, where a track contains courses, and courses contain lessons.
A path describes where a file lives in that hierarchy, such as projects/portfolio/index.html. Paths can be absolute (starting from the root of the drive) or relative (starting from wherever you currently are).
Two tools you'll use constantly:
- A code editor (like VS Code) is a specialized text editor for writing and reading source code, with features like syntax highlighting and error checking.
- A terminal (also called a command line or shell) lets you type text commands instead of clicking — to move between folders, create files, run programs, and install tools. It looks intimidating at first, but it's just a very fast, precise way to tell your computer what to do.
Common terminal commands you'll meet early: listing what's in a folder, moving into a folder, creating a new folder, and running a program. Every operating system's terminal has its own dialect (PowerShell on Windows, bash/zsh on macOS and Linux), but the underlying ideas — current folder, paths, commands, arguments — are universal.
Example
A tiny page representing a project's file listing as structured HTML — the same hierarchical idea as folders on disk.
<!doctype html>
<html>
<body>
<h1>project-portfolio/</h1>
<ul>
<li>index.html</li>
<li>styles.css</li>
<li>images/
<ul><li>avatar.png</li></ul>
</li>
</ul>
</body>
</html>Guided exercise
Guided exercise
Represent a project folder named 'my-app' containing 'index.html' and a nested folder 'scripts' with 'app.js' inside it, using nested <ul>/<li> elements.
Checks: Contains a nested <ul> representing a subfolder · Mentions app.js inside the nested list
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Independent exercise
Independent exercise
Model a two-level folder tree for a project called 'blog' with at least 3 files total spread across at least 2 folders, using nested lists.
Checks: At least two nested folders · plus 1 hidden check
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Common mistakes
- Typing a relative path from the wrong current folder — always check where you are before running a command.
- Confusing a code editor's file explorer with the actual on-disk file system; they should stay in sync, but the editor is just a view.
- Being afraid of the terminal — it cannot do anything you didn't type; commands are just text with well-defined meaning.
Knowledge check
Takeaway
Files live in a hierarchy you navigate with paths; editors let you write code, terminals let you command your machine directly.
Summary
File systems organize files into nested folders reachable via absolute or relative paths. Code editors are for writing code; terminals are for issuing precise, fast commands to navigate and run things.
References
Your notes
Notes save automatically.
Finished this lesson?
Mark it complete to track your progress and schedule a future review.
AI tutor
The optional AI tutor isn't enabled in this deployment. All lessons, exercises, quizzes, and search work fully without it.