⚙ COMPONENT PREVIEW — remove this label when pasting into your site

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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:
    BoxWhat to type
    HostYour domain name, e.g. yourdomain.com
    UsernameYour FTP username from Plesk or cPanel
    PasswordYour FTP password
    PortLeave this blank — FileZilla will figure it out
  2. 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. 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. 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. 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. 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. 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. 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. 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. 1 Go to the TextMate website Open Safari or Chrome and go to:

    https://macromates.com

    Click the Download button on the homepage.
  2. 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. 3 Move it to your Applications folder Drag the TextMate.app file into your Applications folder. This installs it properly on your Mac.
  4. 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. 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. 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. 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. 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. 1 Log in to Plesk Go to https://yourdomain.com:8443 and log in with your Plesk credentials.
  2. 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. 3 Your hostname Use your plain domain name as the hostname, e.g. yourdomain.com. No https:// or www.

If you have cPanel:

  1. 1 Log in to cPanel Go to https://yourdomain.com/cpanel and log in.
  2. 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. 1 Fill in the four boxes At the top of FileZilla:
    BoxWhat to type
    HostYour domain or FTP hostname
    UsernameYour FTP username
    PasswordYour FTP password
    PortLeave blank
  2. 2 Click Quickconnect Click Quickconnect. Accept any certificate prompt. The right panel will fill with your server's folders.
  3. 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. 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. 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. 3 Make your changes and save Follow the tutorial instructions. When done, press ⌘ Cmd + S to save.
  4. 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.

📘 Tutorial: How to Fix a Missing Title Tag

Your tutorial content starts here. The "Before You Start" section above collapses away once the user has set up their tools, so it doesn't get in the way on repeat visits.

Related Guides: Site Audit Guide  ·  Page Speed Guide  ·  HTML Checker Guide  ·  Meta Tags Guide
💬 Got a problem?