Publishing your site

Congrats on all of your great work in this course! I want you to have a space to put things on the real web, and for you to know how to set up your own domain name and server if you want to have your own site in the future.

If your final project is ready, please get the files ready to upload to the server. If you don't want to publish your final project to the site, please find some web page to upload. You can always remove it after class if you don't want it to be seen!

File Transfer Protocol

Please download and install Cyberduck. Cyberduck is a free FTP (and much more) client.

FTP stands for File Transfer Protocol. It is a common way for us to upload our site files to a web server. A web server is just like our local webserver, except it is always turned on, and it is connected to a real domain. Any files we upload or edit via FTP to our webserver will instantly be reflected on the live website.

There is also a fancier new type of FTP called SFTP: Secure File Transfer Protocol. It's effectively the same thing but with added security. Depending on the web host, we will use SFTP or FTP.

To access an FTP server we need a few pieces of information:

  • The "host", or the URL of our server (where it is on the internet)
  • A username
  • A password
  • A port (usually it's 21, the web host will tell you what to use here)

Let's purchase a web server and domain, and set up an FTP account we can use to access the server.

I will create a subfolder for each of you that you can update however you want! Then, take your project folder, or if it's not ready, any page you've made in the course, and please upload it to a subfolder.

Site structure

Let's look at how the files on a webserver are navigated on a browser.

website.com file structure 
1server_root/
2├─ index.html
3├─ script.js
4├─ style.css/
5├─ henry/
6│  ├─ clock/
7│  │  ├─ index.html
8│  │  ├─ style.css
9│  │  ├─ style.css
10│  ├─ grid/
11│  │  ├─ index.html
12│  │  ├─ style.css
13│  │  ├─ script.js
  • the server_root folder is the top level folder on our server. It's just like the folder we assigned to our local website with all of our files.
  • going to website.com will take the user to index.html on line 2.
  • going to website.com/henry/clock will take the user to index.html on line 7 and show henry's clock page.
  • To link to henry's clock page from the top index.html page, all we need to do is include a link like this: henry's page
  • Within your subfolder, you can create as many extra folders as you want, and link between them as you wish.
  • If you don't link to a page, it will still exist but nobody will see it. This is a great way to share things with friends without revealing it to the public :)

Tada!!!!!

Your site should be on the real web now! Take a look at it in all of it's glory.

One last thing: the mobile version!

Try looking at your site on your phone. Does it look weird? Often when making a webpage on the desktop, we forget that our site will be frequently access via mobile devices. I want to leave you with one last CSS trick to get your pages looking great on phones with minimal extra code: Media Queries!!

Media Queries

Here's a media query:

Media query for mobile 
1@media(max-width: 480px){
2  .content {
3    max-width: 300px;
4  }
5}

In lines 1 and 5, we are wrapping CSS rules in a media query. In english, line 1 is saying:

On screens smaller than 480 pixels wide (which tends to be all mobile devices), make sure the element with the class content is only 300 pixels wide.

A few adjustments like these can take your site that already looks good on a desktop and make a page look great on phones too. It is standard practice to use 480 pixels as the width to target phones, so I recommend you use it here. However there are tons more options for targeting devices here.

Here is a more intense media query:

Intense media query 
1@media (min-width: 500px) and (orientation: landscape) {
2  .mobile-menu-hamburger-button {
3    display: none;
4  }
5}

CSS here will apply to screens at least 500 pixels wide, when the screen is landscape, meaning The height is smaller than the width. We can completely hide and show elements based on the screen size. This way, we can add helpful user interface elements that are only needed on the phone version of our site, and hide them when the user is on the desktop.

Try to adjust your site for mobile, if needed!

Please take some time now to edit your site on the live server. In Cyberduck, if you right click a file, you should be able to edit it in a basic text editor through Cyberduck. Also, Cyberduck allows you to edit your files in your text editing program of choice, if you prefer that.

Wrapping up...

With this final lesson, you are all ready to be great creative web designers and programmers. In this course, you've learned:

  • HTML, and the important HTML elements
  • How to style your HTML with CSS
  • Javascript programming principles: syntax, variables, functions, global objects like Math, and window
  • Using the specialized third party JS library Paper.JS
  • How to run a local web server on your computer, and create + edit webpages locally
  • How to upload your site to a live web server and make changes to a live site
  • How to adjust your existing site to shine on mobile devices

As far as I'm concerned, that's all you need to know to express yourself and share your skills and ideas with anyone you want!

THANK YOU EVERYONE!!!