What you need and why
Your website files live on a computer called a server —
not on your own computer. To edit them, you need two free tools:
-
1
Notepad++ — your text editor
This is the program you use to open, read and edit your website's code files.
Think of it like Microsoft Word — but for code. It colour-codes everything
so the file is much easier to read than a plain text editor.
-
2
FileZilla — your file transfer tool
This is the program that connects your computer to your server so you can
download files, edit them in Notepad++, and upload them back.
Think of it like a bridge between your computer and your website.
Part 1 — Install Notepad++
-
1
Go to the Notepad++ website
Open your web browser (Chrome, Edge, Firefox — any of them) and go to:
https://notepad-plus-plus.org/downloads/
This is the official website. Do not download it from anywhere else.
-
2
Click the latest version
You will see a list of versions. Click the top one — it will say something like
Notepad++ 8.x.x.
The exact number does not matter, always pick the one at the top of the list.
-
3
Download the installer
On the next page, scroll down until you see a list of download links.
Click the one that says npp.x.x.x.Installer.x64.exe —
this is the standard Windows installer. A file will download to your
Downloads folder.
-
4
Run the installer
Open your Downloads folder and double-click the file you just downloaded.
Windows may show a warning asking "Do you want to allow this app to make changes?"
— click Yes.
Then click Next on every screen
until the install finishes. You do not need to change any settings.
-
5
Check it works
Click the Windows Start button (bottom left of your screen), type
Notepad++ and press Enter.
A dark or white editor window should open with a blank tab.
That means it installed correctly. You can close it for now.
💡 Tip: Notepad++ is completely free and safe. It has been around since 2003
and is used by millions of web developers worldwide.
Part 2 — Install FileZilla
-
1
Go to the FileZilla website
In your browser, go to:
https://filezilla-project.org/download.php?type=client
Make sure you are downloading FileZilla Client —
not FileZilla Server. The Client is the one you need.
-
2
Click the Download button
Click the big green Download FileZilla Client button.
A pop-up may appear asking which version — choose
FileZilla (the free one, not Pro).
The installer file will download to your Downloads folder.
-
3
Run the installer
Open your Downloads folder and double-click the FileZilla installer file.
Click Yes on any Windows security prompt,
then click I Agree on the licence screen,
then Next on every screen after that.
Do not change any options.
-
4
Open FileZilla
Click the Windows Start button, type FileZilla and press Enter.
A window will open with two panels side by side. The left panel is your computer.
The right panel is your server (it will be empty until you connect).
At the top there is a toolbar with four boxes: Host, Username, Password, Port.
Part 3 — Connect FileZilla to your website
To connect, you need your FTP login details. These come from your hosting control panel
— either Plesk or
cPanel.
Follow the section that matches what your host gave you.
If you have Plesk:
-
1
Log in to Plesk
Go to your Plesk login URL — it usually looks like
https://yourdomainname.com:8443 or your host will have emailed it to you.
Log in with your Plesk username and password.
-
2
Find your FTP credentials
In Plesk, click on your domain name, then look for
FTP Access in the menu.
You will see an FTP username listed there.
The password is the same one you use to log in to Plesk,
unless you set a different one for FTP.
-
3
Find your hostname
Your hostname is simply your domain name — for example
yourdomain.com.
Do not include https:// or www.
in front of it when typing it into FileZilla.
If you have cPanel:
-
1
Log in to cPanel
Go to https://yourdomain.com/cpanel and log in.
Your host will have emailed you the login details when you signed up.
-
2
Go to FTP Accounts
In cPanel, scroll down to the Files section
and click FTP Accounts.
You will see your main FTP username listed there.
-
3
Get your FTP hostname
Click Configure FTP Client next to your account.
You will see a box showing your FTP hostname — it usually looks like
ftp.yourdomain.com. Copy this exactly.
Now connect in FileZilla:
-
1
Fill in the four boxes at the top of FileZilla
At the very top of FileZilla you will see four boxes. Fill them in exactly like this:
| Box | What to type |
| Host | Your domain name, e.g. yourdomain.com |
| Username | Your FTP username from Plesk or cPanel |
| Password | Your FTP password |
| Port | Leave this blank — FileZilla will figure it out |
-
2
Click Quickconnect
Click the Quickconnect button to the right of the four boxes.
FileZilla will connect. A message may appear asking about the server certificate —
click OK or Trust to continue.
-
3
Find your website files in the right panel
The right panel now shows your server's folders.
Look for a folder called httpdocs (Plesk) or
public_html (cPanel) — double-click it to open it.
This is where all your website files live. You will see files ending in
.html, .css,
.js and folders for images.
⚠️ Important: Do not delete, rename or move any files you don't recognise.
Only edit the specific file the tutorial tells you to work on.
Part 4 — How to edit a file and save it back
You will follow these same four steps every single time you need to edit a file on your website.
Memorise this process — it never changes.
-
1
Download the file to your computer
In FileZilla, find the file the tutorial tells you to edit.
Right-click it and choose Download.
The file will appear in the left panel (your computer).
Make a note of exactly which folder on your computer it saved to —
usually your Desktop or Downloads folder.
-
2
Open the file in Notepad++
Open Notepad++. Go to File → Open at the top menu.
Find the file you just downloaded and click
Open.
The code will appear in the editor. It might look confusing at first —
that is completely normal. The tutorial will tell you exactly what to find and what to change.
-
3
Make your changes and save
Follow the tutorial instructions to make your changes.
When done, press Ctrl + S on your keyboard to save the file.
The tab at the top of Notepad++ will stop showing a red dot when it is saved.
-
4
Upload the file back to your server
Go back to FileZilla. Find the file on the left panel
(your computer). Right-click it and choose Upload.
FileZilla will ask if you want to overwrite the existing file — click
OK or
Overwrite.
Your changes are now live on your website.
💡 Always keep a backup: Before editing any file, right-click it in FileZilla and
download a copy to a safe folder on your computer first. If anything goes wrong you can re-upload
the original.
✅ Setup complete — you are ready to follow the tutorial below.
What you need and why
Your website files live on a computer called a server —
not on your own Mac. To edit them, you need two free tools:
-
1
Notepad++ — your text editor
Notepad++ is a Windows-only program, so on Mac we use
TextMate — it does exactly the same job.
It colour-codes your code so it's much easier to read and edit.
If you already have Visual Studio Code or BBEdit installed, those work too.
-
2
FileZilla — your file transfer tool
FileZilla is available for Mac and works identically to the Windows version.
It connects your Mac to your server so you can download files, edit them,
and upload them back.
Part 1 — Install TextMate (free code editor for Mac)
-
1
Go to the TextMate website
Open Safari or Chrome and go to:
https://macromates.com
Click the Download button on the homepage.
-
2
Open the downloaded file
A .tbz file will download to your Downloads folder.
Double-click it. Your Mac will extract a file called
TextMate.app.
-
3
Move it to your Applications folder
Drag the TextMate.app file into your
Applications folder.
This installs it properly on your Mac.
-
4
Open TextMate
Go to your Applications folder and double-click TextMate.
macOS may show a warning saying it was downloaded from the internet —
click Open to continue.
A blank editor window will appear. Setup complete.
💡 Already have a code editor? If you have Visual Studio Code, BBEdit or
Sublime Text installed, you can use those instead — they all open HTML files the same way.
Part 2 — Install FileZilla on Mac
-
1
Go to the FileZilla website
In your browser, go to:
https://filezilla-project.org/download.php?type=client
Click the big green Download FileZilla Client button.
Choose the free version (not Pro).
Make sure the download says macOS.
-
2
Open the downloaded file
A .app.tar.bz2 file will appear in your Downloads folder.
Double-click it to extract it. You will get a
FileZilla.app file.
-
3
Move it to Applications
Drag FileZilla.app into your Applications folder.
Open it from there. If macOS shows a security warning,
go to System Settings → Privacy & Security
and click Open Anyway.
-
4
FileZilla opens
You will see the same two-panel layout as on Windows.
Left panel = your Mac. Right panel = your server (empty until connected).
The four boxes at the top are: Host, Username, Password, Port.
Part 3 — Connect FileZilla to your website
The connection process is identical to Windows.
Get your FTP details from Plesk or cPanel — follow whichever matches your hosting.
If you have Plesk:
-
1
Log in to Plesk
Go to https://yourdomain.com:8443 and log in with your Plesk credentials.
-
2
Find FTP Access
Click your domain name, then find FTP Access in the left menu.
Your FTP username is listed there. The password is your Plesk login password
unless you set a separate FTP password.
-
3
Your hostname
Use your plain domain name as the hostname, e.g. yourdomain.com.
No https:// or www.
If you have cPanel:
-
1
Log in to cPanel
Go to https://yourdomain.com/cpanel and log in.
-
2
Find FTP Accounts
Scroll to the Files section and click
FTP Accounts.
Click Configure FTP Client to see your hostname —
it will look like ftp.yourdomain.com.
Connect in FileZilla:
-
1
Fill in the four boxes
At the top of FileZilla:
| Box | What to type |
| Host | Your domain or FTP hostname |
| Username | Your FTP username |
| Password | Your FTP password |
| Port | Leave blank |
-
2
Click Quickconnect
Click Quickconnect.
Accept any certificate prompt. The right panel will fill with your server's folders.
-
3
Find your website files
Double-click httpdocs (Plesk) or
public_html (cPanel).
Your website files are inside.
⚠️ Important: Do not delete, rename or move files you don't recognise.
Only touch the specific file the tutorial tells you to edit.
Part 4 — How to edit a file and save it back
These four steps are the same every time — for every tutorial, forever.
-
1
Download the file
In FileZilla, right-click the file you need to edit and choose
Download.
It will save to the folder shown in the left panel —
navigate to a known location like your Desktop first so you can find it easily.
-
2
Open the file in TextMate
Open TextMate. Go to File → Open.
Find the downloaded file and click Open.
The code appears in the editor, colour-coded and readable.
-
3
Make your changes and save
Follow the tutorial instructions. When done, press
⌘ Cmd + S to save.
-
4
Upload back to your server
Back in FileZilla, find the edited file in the left panel.
Right-click it and choose Upload.
Confirm overwrite when prompted. Your changes are live.
💡 Always keep a backup: Before editing, download a copy of the file to
a safe folder on your Mac first. If something breaks you can re-upload the original.
✅ Setup complete — you are ready to follow the tutorial below.