Don't like this style? Click here to change it! blue.css
See the Pen Canvas Paintball Gun by Gregory Orton (@ortonomy) on CodePen.
So far we've built demo sites using codepen, it is a fast and painless way to practice your craft.
Edit on Codepen the above paintball gun codepen (by Gregory Orton). Click "export" then
"export .zip". Unzip and look in the dist folder. You will see the following three files:
Identify how the first file index.html imports the other two script.js and style.css and even two third party files:
https://jspm.dev/@popmotion/popcorn and https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
Your browser receives the contents of the file index.html and then starts fetching other files in order to complete the ensemble.
Learning hosting with Glitch.com
Go to https://glitch.com/ Create a new project, make it a "hello-webpage" and replace the contents of
index.html, script.js, and style.css with the files from the paintball zip/gist. Click the button to "show" and select "in a new window", it will give you a URL.
Create a new file called "secret.txt" and put some text in it, now add secret.txt to your URL and view through a browser. Enter your URL in a browser on your mobile device and still experience your creation.
I want to spend a little minute on telling you how URLs work from a developer's perspective.
Everything (data, files, pages, images, etc.) should be reachable using a URL (universal resource location)
A specific url in your browser can be broken down into "protocol://subdomain.domain.top_level_domain/path?url_parameter=value". As an example, when I view this page in my browser I see: "https://websec.prof.ninja/hosting/" which would mean that I am using the http(s) protocol ((secure) hyper-text transfer protocol) the top level domain "ninja" the domain "prof" and the subdomain "websec".
When you have a web host your "domain name" will be pointed to a directory which will have files. When a browser (or whatever) makes a request to a URL the "server" will try to find a file from within that directory to respond with/send to the requester. For instance in the folder you are currently viewing I have a file named "andy.html" which tells you a simple truth, if you visit https://websec.prof.ninja/hosting/andy.html then my server will check to see if that file exists and if so it will send the file down to your browser which will render it (using the HTML protocol). If you try to visit a file which doesn't exist then you will get a 404 error (or some other 4** error depending on the configuration of the server). For instance try accessing nofilehere.html.
Test it out On your glitch project make three files, "a.txt", "b.html", "c.php" and load those pages in your browser with a URL.
A web server is just a normal computer which has a constantly listening program that wants to handle HTTP requests. There are many programs which can run on a computer waiting for requests. Apache is the most common program which waits for requests and serves up files. NGINX is another popular server, and NodeJS (or flask or rails) can act as a server too.
Most of the time when you have a public web server there will be a folder which is "hosted" at a given domain name. This site has a folder named "public" which has all of the files I want to be available to the internet at large. Often the hosted folder is referred to as "/". Inside the folder "public" is a folder named "class3" (the folder you are currently looking at). Everytime you add to the "path" at the end of a domain name you will be heading deeper and deeper into the nested folders. For instance "/class3/folder1/folder2" will be resolved by looking inside of "public" for a folder named "class3" and inside of that for a folder named "folder1" and inside of that for a folder named "folder2".
When you navigate to a folder which exists you will sometimes see an index of that folder's contents.
Folders in URLs: Create a file named "folderA/folderB/hi.html" and inside of that make a folder named "folderB". Inside of "folderA" also make a file named "banana.txt" and one named "apple.html". Now go to the URL for "folderA".
This is the default behavior for viewing a folder. If however I were to put a file named index.html then the server would show you the "index" file rather than the folder's contents.
You can use this trick to display a file without having to use a file extension. For instance if I wanted the url for my blog to be "prof.ninja/blog" but my blog was a big long file I could make a folder named "blog" with a file inside of it named "index.html". Now my grandma would only need to remember the url "prof.ninja/blog" rather than "prof.ninja/blog/index.html"
Try it: Inside of "folderB" put a file named "index.html" then visit the URL for "/folderA/folderB".
I suspect with a little extra time in the class compared to previous years I can run through several ways I've hosted stuff in the past.
WARNING: I did not practice ahead of time, I'll be googling live, I'm being vulnerable with you.
Let's see how many ways I can host a simple static site: