1

FWDP 1000 – Day 6

Course: Web Development 1
Instructor: Jonathon Leathers
 2

Morning Review
 Download the files.
 Edit styles.css to follow the styling best practices from the
Day 5 slides.

We will go over this in 15 minutes.

If you have not already done so, please install FileZilla.

 3

Agenda
 Introduction to FTP
 Pointing a Domain
 SSL Certificates
 Lab Time
 4

Introduction to FTP
 5

File Transfer Protocol

FTP is a common way to move files from your device to a
web server.
It requires a web server (a hosting account) and an FTP
client (an application).
I will use SiteGround as my web server and FileZilla as my
FTP client.
 6

Login to SiteGround
Login to your SiteGround account and click on Websites.

Click on “Site Tools”.

 7

SiteGround Site Tools

SiteGround’s “Site Tools” page is where
you manage your websites.
You will be here most often during the
Content Management Systems course.
Click on “Site” to begin.
 8

Create an FTP Account

Under “Site”, click
“FTP Accounts”.

Fill in the Account Name and Password Fields.

I recommend using a generated password.
 9

Create an FTP Account

Copy the FTP Account Password before you click “Create”.
Open a notepad or text file and paste the password.
 10

Change FTP Home Directory

After clicking “Create”, scroll down to find the account.
Click on the three dots and choose “Change Home”.
 11

Change FTP Home Directory

Click on the public_html
folder then click “Select”.

This will make FileZilla always start in the public_html folder

when connecting to your server.
 12

FTP Credentials
Click on the three dots and choose FTP Credentials.

You can also change your FTP password here if you need to.
 13

FTP Credentials
The popup modal will contain
the information you need to add
to your FTP client.

In our case, we will use FileZilla.

 14

FileZilla – Site Manager

Open FileZilla and click on File  Site Manager or the Site
Manager icon in the top left.
 15

FileZilla – New Site

In the popup modal, click on the “New site” button.
 16

FileZilla – New Site

Give your New Site
a name.
Then fill in the three
fields on the right:
 Host
 User
 Password
Click “Connect”.
 17

FileZilla – Connect to Server

Once you click “Connect”
you may get a pop-up like
this one.

If you can, check the two

boxes at the bottom.

Click “OK”.
 18

FileZilla – Correct Home Directory

If you set your home directory to
public_html then you should see
a Default.html file immediately.
Instead of seeing public_html as
the folder name you will just see a
forward slash.
This is where you will upload your
This file can be deleted.
landing page and future projects.
 19

FileZilla – INCORRECT SETUP

If you did NOT set your home directory
to public_html then you will have to
click into directories to find the
public_html folder.
You only need access to the
public_html directory and risk
breaking things if you go elsewhere.
Go back and change your home directory!
 20

FileZilla – Interface

Local files Server files

and folders and folders
 21

FileZilla – Uploading Files

Use the left side of the screen to navigate to your files and
folders on your computer.
Use the right side of the screen to navigate to where you
want to upload those files and folders to the server.
To upload files and folders… double click items on the left or
click and drag them to the right side.
 22

FileZilla – Updating Files

When you make additional changes to your files, you will still
need to upload those files through FileZilla.
Complete the work on your local version of the website (the
files on your computer).
Once you are done, then you can upload all of the completed
files and “Overwrite” what is on the server within FileZilla.
 23

FileZilla – Connect to Server

Now that your server information is saved in FileZilla…
…in the future, click on the dropdown arrow and choose your
site to connect to the server.
 24

Directories and URLs

The public_html folder is equivalent to the homepage URL.

Directory: public_html
URL: https://example.com/

Directory: public_html/styles/styles.css
URL: https://example.com/styles/styles.css

Directory: public_html/country-website
URL: https://example.com/country-website/
 25

FileZilla – Upload Landing Page

Your landing page Any additional

should be an folders should also
index.html file and be uploaded into
uploaded directly the public_html
to the public_html folder.
folder.
 26

FileZilla – Upload Projects

Your Country Website and all
other projects or assignments
that you want to upload should
be in their own folders.
On the server, these will be
“sub-directories” of the
public_html directory.
 27

Index.html
The homepage for all of your projects should be index.html.
If a user navigates to a directory/folder, the server looks for
an index.html file.
If I have a directory of “country-project” with an index.html file
in it, then these URLs are the same…
https://example.com/country-project/

https://example.com/country-project/index.html
 28

Pointing a Domain
 29

Quick note…

Please follow along but wait to do the steps after I finish.

 30

Change Nameservers
The simplest way to point a domain to a server is to change
the nameservers (DNS).
Copy the nameservers from your hosting account and paste
them into your domain registrar account.
 31

Step 1 – Copy Nameservers

First you need to get the nameservers from your hosting
provider.
They will look something like this…

ns1.siteground.net
ns2.siteground.net
 32

Step 1 – Copy Nameservers

Login to your SiteGround account and click on Websites.

Click on the three dots and choose “Server Details”

 33

Step 1 – Copy Nameservers

In the popup modal, copy both
URLs (ns1 and ns2).

You will paste these URLs into

your domain registrar account.
 34

Step 1 – Copy Nameservers

The nameservers can also be found inside “Site Tools”.
 35

Step 2 – Paste Nameservers

Login to your domain registrar and find where to paste in the
nameservers.

You will replace the current nameservers with the new

nameservers.
 36

Step 2 – Paste Nameservers

Check the documentation for your domain registrar for how
to change the nameservers in your account.
Here are some common domain registrars:
Hover - https://help.hover.com/hc/en-us/articles/217282477--Changing-your-domain-nameservers

NameSilo - https://www.namesilo.com/Support/NameServer-Manager

GoDaddy - https://ca.godaddy.com/help/change-nameservers-for-my-domains-664

NameCheap - https://www.namecheap.com/support/knowledgebase/article.aspx/767/10/how-to-change-dns-for-a-domain/

Domain.com - https://www.domain.com/help/article/domain-management-how-to-update-nameservers
 37

Step 3 – Set Primary Domain

After pointing the domain to the SiteGround server, you may
need to add the domain to your SiteGround account.
Click on the three dots. Choose “Change Primary Domain”.
 38

Step 3 – Set Primary Domain

Enter your new domain and click “Confirm”.
 39

Step 4 – Wait…
It can take up to 48 hours for your nameserver records to
propagate to the various DNS servers on the internet.
Realistically it is much quicker and you can start checking
after 30 minutes…
https://www.whatsmydns.net/ or https://intodns.com/
Once it shows the new nameservers, check your URL in the
browser.
 40

Step 5 – Update FileZilla

You may need to update the Hostname and Username fields
in FileZilla.

For example…
Host: example.sg-host.com to mydomain.com

User: jonathon@example.sg-host.com to jonathon@mydomain.com

 41

FileZilla – Exporting Site Manager

To add your FTP information to FileZilla on another
computer, Export your FTP credentials then Import them.

Save the .xml file and use the Import feature to open it.
 42

FileZilla – SFTP Connections

If you want to use SFTP instead of FTP, this guide will show
you how to set that up with SiteGround and FileZilla:
https://www.siteground.com/kb/how_to_establish_sftp_connection_to_hosting_with_filezilla/

If you are using another hosting provider, check their

documentation for the steps.
 43

Caching
 44

What is caching?
A cache is a temporary storage of data to speed up a request
in the future.

On the web this means when you visit a webpage, it will be

faster if you visit it again before the cache has expired.
 45

Caching Levels
There are multiple levels of caching that happen on the web:
 Browser – Chrome, Firefox, etc.
 Router – The device that connects your device to the
internet that you unplug when it stops working.
 ISP – Telus, Shaw, Rogers, Bell, etc.
 Server – SiteGround, Bluehost, etc.
 46

Caching is great… and annoying

As a web developer caches are annoying because you will
make changes and want to see those changes
immediately…
…but the web wants to make things fast.

So, we can turn off caching in some places and clear caches
in other places while developing our sites and apps.
 47

Browser Cache
The browser cache is the easiest cache to clear. A hard
refresh on your browser is usually sufficient.

Windows: Ctrl + F5
Mac: Cmd + Shift + R

This tells the browser to delete the temporary data (HTML,

Images, CSS, etc.) it has stored for the page you are on.
 48

Browser Cache
The browser cache can also be disabled by having your
browser’s developer tools open and checking the box to
Disable Cache.

Firefox

Chrome
 49

Server Caching
Caching is extremely important to speed up your websites
once they are completed.
But while being developed, it should be disabled.

I recommend you disable all caching

in SiteGround while in the FWD program.
Re-enable it after you finish.
 50

SiteGround NGINX & Memcached

NGINX Direct Delivery and Memcached can be disabled.

Click on each tab and then, toggle OFF.

 51

SiteGround Dynamic Cache

Dynamic Cache cannot be disabled.
If you upload files to the server and clear your browser cache
but do not see the updates, click on the broom icon under
Dynamic Cache to clear the server cache.
 52

ISP & Router Cache

You can try to clear your Router’s cache by restarting it. It
works sometimes but generally is not needed.

You cannot do anything about your Internet Service

Provider’s cache. This is why you have to wait for domain
names to propagate for instance. Using another network or a
VPN is a workaround.
 53

SSL Certificates
 54

Securing Sites with HTTPS

Every website you upload to a server should be using
HTTPS instead of the unencrypted HTTP.

Let’s look at why this is needed and how to do this...

 55

HTTP
HTTP is not encrypted and is able to be read and
manipulated by a third-party.

For example:
 Intercepting a form submission on a website.
 Injecting malware or advertisements on a website.
 56

HTTPS
HTTPS adds another step before transmitting data: the
handshake.
The handshake verifies that the server and browser are both
who they claim to be using TLS/SSL Protocols and
Certificates.
Then data is transmitted in an encrypted connection.
 57

Why You Need HTTPS

Security: Encryption of data between the server and the
browser.

SEO: Google uses HTTPS as a ranking factor.

Performance: Every major browser requires HTTPS to use

HTTP/2.
 58

Let’s Encrypt
Let’s Encrypt launched in December 2015.

It’s a service that generates free and auto-renewing TLS/SSL

Certificates.

Many hosting providers use Let’s Encrypt:

https://community.letsencrypt.org/t/web-hosting-who-support-lets-encrypt/6920
 59

SiteGround – SSL Manager

Click on Security,
then SSL Manager. Select your domain.
Choose “Let’s Encrypt”.
Click “Get”.
 60

Force HTTPS
Once the SSL Certificate is installed, you can begin to access
all of your sites from https:// now.
Toggle HTTPS Enforce ON to force all traffic over https.
 61

Other Hosting Providers

If you are using another hosting provider, you will need to
check their documentation to see where to create your free
SSL certificate.
If they do not offer a free SSL certificate, find a better hosting
provider.
Once you have created the certificate, if they do not offer an
option to force HTTPS on the server, you can do this
manually.
 62

Force HTTPS – Manually

1. Create a .htaccess file.
a. Note: This is a hidden file so you will need to show hidden files to
see it on your computer.

2. Add this code to the .htaccess file:

https://gist.github.com/jtleathers/3da9bf64c623ccf143794c7344b4d2ac

3. Upload the edited .htaccess file through FTP to your

public_html folder, which should be the root directory.
 63

Recap
My domain is https://jonathonleathers.com/ and when users
go to that URL it should load my landing page. How should I
upload my landing page to make that work?
a) Upload my "landing-page" folder from my computer into
public_html on the server.
b) Upload the files/folders in my "landing-page" folder from
my computer into public_html on the server.
 64

Recap
True or False: Once a file has been uploaded through
FileZilla, it will automatically be updated on the server when
you make changes to it on your computer.
 65

Lab Time for Projects

 66

Projects
No assignment today.

Use the rest of the day to work on your Projects:

 Landing Page – Due June 7 by 11:59pm
 Country Website – Due June 18
 67

Peer Review
Before submitting your Landing Page, consider asking a
classmate to look at the page and your code.
Do the same for them.
Give each other suggestions and see if you can find any
issues with the code, design, functionality, accessibility, etc.
 68

Finding Code Online or using AI

Myself and your other instructors will expect your work to be
your work. But that doesn’t mean you can’t use online tools.
Websites and tools like Stack Overlow, GitHub Copilot, Chat
GPT can be very helpful…
…but ultimately you still need to know the basics to know
whether the code is good or bad. Do not rely on AI tools
during the FWD program, save that for your careers.
69