Learning path map
Detailed Content
💻 The Terminal
The text window where you talk directly to the computer. No menus, no clicks: just you and the machine.
A text window where you type commands and the computer responds. CMD and PowerShell are the ones on Windows; shell (Bash/Zsh) is on Mac and Linux; “console” is just another name for the same thing.
Almost every developer tool (Git, deploys, servers) is operated through text. Learning the terminal is like learning to speak the computer’s native language.
You type a command, and it responds. The $ (or > on Windows) means "I'm waiting for you to type." All the names point to the same idea.
The step of finding and opening the terminal on your system: Windows + R and “cmd” on Windows, Cmd + Space and “Terminal” on Mac, Ctrl + Alt + T on Linux.
If you don’t know how to open it, nothing happens. Each system has its own way, but the result is the same: a window waiting for your commands.
On Windows, use PowerShell (modern). On Mac and Linux, Terminal is already installed. When you open it, you see the prompt with your username.
The three navigation commands: pwd (where I am), ls (what’s here) and cd (go to another folder).
In the terminal, you can’t see the folders; you ask for them. These commands are your map: without them, you’ll get lost in any project.
cd .. goes back one folder, cd ~ goes to the home directory. Press Tab to autocomplete names and avoid typos.
The commands for working with files: mkdir create a folder, touch create a file, cp copy, mv moves/renames, rm deletes.
It’s the terminal’s "right-click > New Folder," only faster. You can set up an entire project structure in seconds.
BE CAREFUL with rm: deletes permanently, with no trash and no Ctrl+Z. Check the path first. mkdir -p create nested folders all at once.
Two ways to put content in a file: the nano edits right in the terminal; the code opens the file or folder in VS Code.
Creating an empty file is just the beginning; you need to write to it. Knowing both methods covers everything from quick edits to entire projects.
In nano, ^O save and ^X exit (the ^ is the Ctrl key). code . opens the entire current folder in VS Code.
A hands-on exercise: build the folder and file tree for a website (index.html, style.css, img folder, pages folder) using only the terminal.
Practice ties it all together. When you build a project without leaving the terminal, the commands become automatic and you gain confidence.
Combine mkdir + touch + cd. Check the result with ls -R. This structure is the foundation of the Trail 1 project.
🌿 Essential Git
Git is an infinite Ctrl+Z for your code. Every saved version is kept forever, and you'll never lose work again.
A system that saves snapshots (versions) of your project over time. You can view an old version or go back to it at any time.
It puts an end to the chaos of “project-final-2-NOW-IT-WORKS.zip.” You can experiment without fear because every good version is saved and nothing gets lost.
Each saved version is a "commit" with a message. The history is a timeline. Git is the most widely used tool for this worldwide.
The step of downloading and installing Git on your computer: the official installer on Windows, brew on Mac, package manager on Linux.
Git doesn't come ready to use on every system. Installing it once (and configuring your name and email) gets everything ready for the rest of the course.
Check with git --version. Configure git config --global user.name e user.email just once.
The workflow for saving your work: git init initializes Git in the folder, git add selects what to save and git commit saves the version with a message.
It’s the heart of Git. You’ll repeat add e commit dozens of times a day to save your progress.
add = "gets it ready"; commit = "saves it for good". The commit message (-m) explains what changed. Make small, frequent commits.
The inspection commands: status shows what changed just now, log shows the commit history and diff shows line by line what was changed.
Before saving, you need to see what changed. These commands are your eyes: they keep you from accidentally committing the wrong thing.
Use git status all the time. git log --oneline give a clean summary. git diff shows the "before and after".
Branches are parallel copies of the project. You create a branch to test something new without changing the main version, then merge it if it works.
Lets you experiment without fear: if the idea doesn’t work, discard the branch and the main version stays intact.
git branch nome create, git checkout (or switch) swaps, git merge joins. main and the main branch.
A text file called .gitignore that lists what Git should ignore: passwords, temporary files, large folders like node_modules.
Without it, you could upload passwords to the internet or clutter the history with junk. It’s the first security protection for every project.
One line per pattern to ignore. *.log ignore all logs; .env protects secrets. Create the .gitignore before the first commit.
☁️ GitHub and Pages
GitHub is where your code lives in the cloud: backup, collaboration, and, with GitHub Pages, your site published for free.
Signing up for GitHub, the world’s largest site for storing code. The free account covers everything you need in this course.
GitHub is the "portfolio" for people who code. Recruiters look at your profile, and it's where your site goes live through Pages.
Choose a professional username (it becomes part of your site's address). Verify your email to unlock all features.
A Personal Access Token (PAT) is a special password that GitHub generates for the terminal to use instead of your regular password.
GitHub no longer accepts your regular password in the terminal. Without the token, you can't send (push) your code to the cloud.
Generate the token in GitHub settings and copy it immediately (it only appears once). Treat the token like a password: never share it.
The bridge between your computer and GitHub: remote points to the repository in the cloud, push sends and pull downloads the changes.
It’s what turns local Git into an online, collaborative backup. Without push, your code never leaves your machine.
git remote add origin connects once. git push starts, git pull goes down. origin is the nickname for the remote repository.
GitHub Pages is a free service that turns a repository with HTML into a public website with its own address on the internet.
It’s the simplest free way to put a website online. In just a few clicks, anyone in the world can access your project.
Enable it in the repository settings (Pages tab). The address is usuario.github.io/repo. Each push automatically updates the site.
AI assistants that write and complete code for you inside the editor: GitHub Copilot and tools like Codex.
AI speeds up the work considerably: it suggests commands, explains errors, and writes entire snippets. If you know how to use it well, you can get more done faster.
AI suggests; you decide and check. Clearly describe what you want (a clear prompt). Use it as support while making sure you understand what the code does.
An exercise that brings it all together: create a repository on GitHub, connect it to the local project, and send (push) the code for the first time.
Doing the full cycle once takes away the fear. After that, deploying any project becomes a routine that takes just a few commands.
Sequence: init → add → commit → remote add → push. Use the token (PAT) to authenticate.
🚀 Project: Landing Page
Time to put it all together: you build a landing page from scratch and put it online in minutes, with its own address.
The first step of the project: create the local folder, connect Git, and create the corresponding repository on GitHub.
Every professional project starts with a well-organized repository. Starting right prevents rework later on.
Combine what you've learned: mkdir + git init + GitHub repository + remote add. Have a .gitignore from the start.
HTML is the language that defines the structure of a page: headings, paragraphs, images, and links, organized in "tags".
It’s the skeleton of every website on the internet. Without HTML, there’s no page. Knowing the basics is enough to create a real landing page.
Tags come in pairs: <h1>...</h1>. The visible content goes inside the <body>. Start with the index.html.
CSS is the language of style: colors, fonts, sizes, spacing, and positioning. It transforms raw HTML into a beautiful page.
A landing page needs to attract visitors. CSS is what separates a dull page from a professional, pleasant-looking one.
CSS selects an element (selector) and applies rules. Put the styles in style.css and link it to the HTML with the <link>.
The step of pushing your landing page to GitHub and enabling Pages, making the site accessible at a public address.
It’s the "live" moment: your work stops being a file on your computer and becomes a real website anyone can visit.
Do push with the index.html in the root, enable Pages and wait a few minutes. Each new push updates the site automatically.
Change the default address usuario.github.io through a custom domain you buy, such as seunome.com.
A custom domain looks professional and is easier to share. It's an optional extra, but it adds a lot of value to the project.
Buy the domain from a registrar, point DNS to GitHub, and configure the "Custom domain" field in Pages. HTTPS is free.
The exercise that wraps up the track: create, style, version, and publish your own landing page, from the first command to the live site.
Delivering a complete project proves you've mastered everything: the terminal, Git, GitHub, and Pages, working together.
Bring the 4 modules together in a single workflow. At the end, you'll have a public link to share and the foundation ready for Track 2.