When you type a URL, that URL gets turned into the address of a computer. Your computer then asks that computer for a specific file. The web server then looks up the file and returns the file to your computer.
For example, when you request example.com/foo.html your computer looks up example.com, it then connects to it and asks it for the file named foo.html. If you type in example.com/bar/foo.html, you computer would ask or foo.html inside of directory bar.
Chances are that the HTML file will also reference other files, typically images, or scripts, or styles. Your computer will then connect to the server and request the other files as well.
Some files that a server might send over
Is a specific domain that tells the browser to skip the domain lookup process and treat your own computer as the destination web server.
Files have permissions regarding who may read, write, and execute them (for files this means to run them as with ./my_file and with directories this means to open them). There are three types of people who may be accessing a file, the owner, the group that owns the file, or everyone else.
If you wanted to be able to read/write your own file, but no one else to be able to:
If you interperate the numbers as binary (owner: 110, group: 000, and world: 000) you get owner: 6, group: 0, and world: 0; this is how you would set the permissions to that file as 600.To do that you would execute:
chmod 600 my_file.html
Some common permissions:
If you do not specify a file to ask for, the web server will automatically return index.html (or index.php if present). So when you go to example.com, the actual file returned is example.com/index.html.
Libraries (sometimes also called frameworks in this context) are premade CSS/JS that you can use in your project. They speed up development time by allowing you to not write some common functions and instead focusing on the content specific to your site.
Typically including a library is as easy as including an external JS file:
<script type="text/javascript" src="script.js"></script>
or CSS file:
<link type="text/css" rel="stylesheet" href="style.css" />
Javascript libraries usually expose other functions you can call without having to write them yourself (similarly to cs50.h). CSS libraries typically provide classes you can add to tags to style them.
Libraries are typically open-source projects, meaning the developer chose to make the source code freely available. With that said some authors elect to reserve certain rights, and thus include a LICENSE.txt with their project describing their stipulations to the use of their project (typically things like attribution, or that your project must not use their name).
Because web browsers are given code from the remote server, and not an image, they still need to render the web page. However, not all browsers look the same even when you are using the same html/css. Normalize fixes this by 'resetting' their defaults to a common set.
Simply download the file at http://necolas.github.io/normalize.css/ and include it as an external CSS file.
You don't have to do anything, because the stylesheet will reset the style by selecting tags.
Font Awesome gives you free icons to use in your project.
Read over the install instructions at fontawesome.io for CSS install.
Simply include a tag with the classes 'fa' and the specific icon class you want to use from fontawesome.io.
<i class="fa FA-ICON-NAME"></i>
Google web fonts allow you to add different fonts to your web page.
Head over to google.com and pick your favorite font. Then click 'Quick Use' on the bottom right; step 3 of that page will give you a CSS tag to include in your page.
After you have clicked 'Quick Use', step 4 will give you the CSS property to apply that font to an element.
jQuery is one of the main javascript libraries today. In fact, it is so common that many other libraries depend on you including it in your page so they can run.
jQuery is a convenience library that makes many common tasks in Javascript very simple. Among them: element selection, manipulation, animation, and event handling.
Head over to jquery.com and download and include the jquery js file in your page.
jQuery is very powerful and has many different functions, here we will only cover a few of them. To learn about jQuery's full capabilities, cruise on over to api.jquery.com.
The majority of jQuery's methods require you to select an element or set of elements. Selecting an element is done in a very similar fashion to CSS selectors.
$(".foo")
Will select all elements with class foo.
$("#bar")
Will select all elements with id bar.
Once you have selected the element(s) you can do a wide range of things with them, including:
$(".foo").css("color", "red");
Alter its CSS.
$(".foo").html("Hello World!");
Alter its content.
$(".foo").remove();
Delete it.
JQuery provides a wide range of animation capacities, both for transitions:
$(".foo").fadeOut();
or for aesthetic reasons:
$(".foo").animate({
"width": "80px"
});
Another cool thing that you can do with jQuery is listen for events:
$(".foo").on("click", function (){
alert("Hi!");
});
Generally speaking,
$(".foo").on("EVENT", function (){
// YOUR CODE HERE
});
Bootstrap is both a CSS and a JS library. It gives a lot of classes to make pretty sites (without writing css), and it even includes normalize; it also has many JS functions to script interaction of common elements (Dropdown menus, tabs, etc.)
See getbootstrap.com.
Using the CSS component of Bootstrap is typically as easy as adding a few classes. To make a button you literally add the class btn and btn-primary (getbootstrap.com).
For the full list of JS components, see getbootstrap.com.
Realistically, the easiest way to do this is with Google. Simply decide what kind of component you are trying to factor out (do you want a Library which can give you icons? which makes dealing with times in JS easier? that provides powerful animation?) and search for a library (e.g. "javascript library for color manipulation").
Almost undoubtedly you will run into Github at some point in your search for libraries, Github is one of the major code hosting websites. It uses a protocol called git for storing and uploading code; if you do not know what that is, don't worry about it - as you can also download a ZIP of the files in the bottom right of a project page (there is a button titled 'Download ZIP').
Eventually you are going to have an issue or question which you can't figure out. Like the rest of the course, always feel free to pop into discuss or talk to a TF, but when you're actually building sites those aren't typically options. Again, the advice here is to search the internet because a lot of developer resources exist already.
StackOverflow is a question and answer site that is very popular among programmers. It is popular both because you can ask questions, but also because of the wealth of knowledge it has already amassed (Google a programming question, it already probably has an answer and is the first result).
JSFiddle allows users to post small snippets of HTML/CSS/JS to show demos. This is very popular on sites like StackOverflow where people need to post a very small proof of concept or the code that is causing their issue.
For example, click here.