How to Upload Your Website with FileZilla: A Beginner Guide

You have built a webpage on your computer. How do you make it available at a website address? You upload its files to a hosting provider, then check the public page in a browser. This guide takes you through one small practice upload using FileZilla Client.

If you arrived from Lesson 18: Save and publish, keep your finished HTML file nearby. We will use a new practice folder so you can learn the process without replacing an existing homepage.

Understand the journey

From your computer to a public website
1. Your computer 2. Your hosting space 3. Your browser
Local files: index.html, images, CSS and JavaScript FileZilla uploads a copy into the correct website folder Visitors open the page using its HTTPS address

Local means on your computer. Remote means on the hosting server. Uploading copies files from local to remote; downloading copies them the other way. FileZilla transfers files—it does not create your website or provide hosting.

No hosting account yet?

You can complete the local part of Lesson 18 now: download your HTML, open it and test it. A file on your computer is not automatically a public website.

To follow the upload steps, you need hosting that lets you upload HTML files through SFTP, FTPS or a file manager. Some website-builder plans do not offer this access. A domain name is the address; hosting stores and serves the files. Your provider may also supply a temporary website address. Ask the provider which folder that address points to and whether HTTPS is ready.

You do not need to create a Playcode123 visitor account. The connection details below belong to your own hosting service.

1. Prepare one project folder

Create a folder called my-website on your computer. Put a copy of your finished page inside it and name that copy index.html. Make sure the actual filename is not index.html.txt. Keep your original download as a backup.

my-website/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── photo.jpg

This is an example structure. If your CSS and JavaScript are already inside the HTML, you do not need separate css and js folders. If your page uses an image, include that image and preserve the path used in the HTML. A Sandbox HTML download does not bundle linked images.

For example, <img src="images/photo.jpg" alt="Herbs on a windowsill"> expects a file called photo.jpg inside an images folder beside index.html. Match spelling and capital letters exactly.

Open index.html in your browser. Check the text, images, links and buttons. Only put website files in the upload folder; keep private notes, passwords and backup archives elsewhere.

2. Collect the hosting connection details

Find these in your provider’s control panel or ask its support team:

  • Server/host: the file-transfer server address, which may differ from your website address.
  • Protocol and port: use the combination your provider specifies. Prefer SFTP when available; FTPS is another encrypted option. SFTP and FTPS are different protocols.
  • Username and authentication: the file-transfer login, which may differ from your control-panel login.
  • Website root folder: the folder connected to the domain you want to use. Names such as public_html, htdocs or www are examples, not a rule.
  • Public address: the HTTPS address that serves that folder.

Do not guess the remote folder when your account hosts several websites. Keep passwords out of screenshots and messages.

3. Connect with FileZilla Client

  1. Obtain FileZilla Client from the official FileZilla website.
  2. Open File → Site Manager, then choose New Site. Give the entry a useful name, such as “My practice website”.
  3. Enter the provider’s host, protocol, port and login details. Use its instructions for password or key authentication.
  4. Choose Connect. Check any server identity information against your provider’s instructions before trusting it.
  5. Wait for the remote directory listing. If login fails, recheck the supplied details or contact your provider.

Once connected, FileZilla normally shows Local site on the left and Remote site on the right. The transfer queue and results appear below. Names and layout can vary slightly by version.

4. Open a new practice folder on the server

On the right, open the website root folder specified by your provider. Look at its contents before making changes. If it already contains a website, leave those files in place.

Right-click in the remote file area, choose Create directory, and create a folder named practice. Open it. If that name already exists, choose a new unused name, such as practice-2, and use that name in the website address too.

Example only: the host says /public_html serves https://example.com/

Local:  my-website/index.html
                    ↓ upload
Remote: /public_html/practice/index.html
                    ↓ open in a browser
Public: https://example.com/practice/

The server folder name public_html does not appear in this example’s public address. Your provider’s mapping may differ. The reserved address example.com is a placeholder—replace it with your own website address.

5. Upload the contents of your project

  1. On the left, open my-website so you can see index.html and its supporting folders.
  2. On the right, confirm that you are inside the new practice folder.
  3. Select the intended files and folders on the left. Right-click and choose Upload, or drag them to the right.
  4. Wait for the queue to finish. Check Failed transfers as well as Successful transfers. An empty queue alone does not prove success.
  5. If a replacement prompt appears unexpectedly during this first upload, cancel that transfer and check the destination folder.

Upload the contents of my-website into practice. Uploading the outer folder itself would add another level, such as /practice/my-website/.

6. Open and test the public page

Visit your actual equivalent of https://example.com/practice/. Many hosts automatically show index.html for a folder; you can also test the full address ending in /practice/index.html.

  • Confirm the address starts with https://, not file:///.
  • Check images, styling, navigation and interactive buttons.
  • Try a private browser window or refresh if an older version appears.
  • Open the public address on your phone and check readability.

A successful upload means the files arrived. This browser check tells you whether the website works. An HTML contact form also needs a working receiving service to send messages; uploading the form alone does not add that service.

If something does not work

What you see What to check
Page not found / 404 Confirm the public address, remote folder and exact filename. Check for an extra project-folder level.
Text appears but images or styling are missing Upload the supporting files and compare their paths and capital letters with the HTML.
The old page still appears Confirm the changed file reached the correct folder. Refresh and check any hosting cache.
Login or transfer fails Read FileZilla’s message log. Verify protocol, port, login and folder permissions with your provider.
A certificate warning appears Check the address and ask your provider to resolve the HTTPS configuration before sharing the page.

Updating your page later

Edit and test the local copy first. Keep a backup of the current remote files before replacing them, then upload only the files you intentionally changed. Recheck the public page after each update.

Lesson complete: you should have a working local copy and, if you have hosting, a tested public practice page. Return to Lesson 18 to check your result. For help understanding folder paths, read Website Paths, Folders & File Names Explained.

Reference for connection setup: WordPress documentation: Using FileZilla.