by Mohamed Irfan for NTU Open Source Society
Disclaimer: This document is only meant to serve as a reference for the attendees of the workshop. It does not cover all the concepts or implementation details discussed during the actual workshop.
Welcome to the first TGIFHacks workshop for AY 20/21. This workshop will give you a brief introduction to front-end web development. You will learn the 3 most important building blocks of the web: HTML, CSS, JavaScript. After that, you will be introduced to what APIs are. This will open up countless posibilities for you to build exciting and amazing web apps. As part of the workshop, we will build a simple weather app to show you how everything comes together. So let's get started!
Time: Friday, 28 August 2020. 6:30pm - 8:30pm
Location: Virtual through Microsoft Teams (due to safe distancing measures)
Organizer: NTU Open Source Society
Before you start the workshop, make sure you have these:
- A text editor such as Sublime Text or Notepad++
- An internet browser greater than IE9 or Firefox 4
That's all you need!
HTML (Hyper Text Markup Language) is the skeleton of a web page. It tells the browser the structure of the web page.
A HTML document starts with the html tags. Everything that has to be in the web page has to be inside the html tags. Additionally, inside the html tags, we can see 2 main sections.
<html>
<head>
...
...
</head>
<body>
...
...
</body>
</html>-
The first is the head section. Inside the head section, we have important meta information like the links to our style sheets (more on that later) and the title of our webpage.
-
The second section is the body section. This the meat of our html document. Everything that we want to put in our webpage like text, images etc. is placed inside the body tags of our html document.
As you might have seen so far, everything in HTML is enclosed in tags. We have to enclose whatever we want to put in the page within its appropriate tags. Some tags need to have an opening and a closing tag like:
<body></body>
<p></p>We put our content inside these tags ex: <p>Hello World!</p>.
Whereas some are self closing tags like:
<img />
<input />We have to specify attributes to these tags. Some very important tags (other than html, head, body) that we will use today:
<title></title>
<h1></h1>
<div></div>Other than just putting the content within tags, we can also specify some attributes to tags. This gives them specific properties.
<img src="./workshop.png", alt="Workshop!">Here, we can see that we have specified 2 attributes for our img tag, src (source which should contain the path to our image) and alt (which displays a text in the event our image does not load).
We can specify a class and/or id for a tag. These can be thought of as special attributes.
- Class is used to refer to multiple tags
- ID is used to refer to a specific tag only
CSS (Cascading Style Sheets) forms the style of our page. It tells the browser how we want our page to be styled. CSS is what make a website look pretty!
The css we write has to be linked to our html for our browser to render the styles. We can do this in 3 different ways:
- We can specify style as an attribute in our html tags. For example:
<body style="background-color: blue;">- We can specify our styles within the style tags and place this inside our html document:
<style>
body {
background-color: blue;
}
</style>- Finally, we can create a separate style.css file, write our styles in it and link it to our html document with the link tag:
<link rel="stylesheet" href="./style.css" />The 3rd way is the preferred way of writing css.
In general, css is written in the following format:
selector {
property: value;
}
Where selector is what we want to style (like our body tag), property is the aspect of the element we want to style (like the background color of our body tag) and value is the value of our style that we want to implement (like blue for the background color).
- Our selectors can be any html tag, a class or an id
- There are specific properties for every tag that we can use. There are too many of them to remember!
- Every property has some valid values we can use. For example, we cannot put 100px; as the color!
There are way too many properties and values in css, you can check them out here.
JavaScript provides the functionality of our web page. It make the webpage interactive. It is a high level programming language.
Just like css, javascript also has to be linked to our html. We can do this in 2 different ways:
- We can specify our script within the script tags and place this inside our html document:
<script>
document.getElementById("hello").innerHTML = "Hello World!";
</script>- Or we can write our script in a different file called script.js and link it to our html using the src attribute in our script tag:
<script src="script.js"></script>The 2nd way is the preferred way of writing javascript.
Variables can be thought of as containers for storing data values. They are declared in JavaScript like this:
var x = 5;
var y = 6;
var z = x + y;Note: JavaScript is not a statically typed language. So there is no need to declare the data type.
Conditional statements are used to perform different actions based on different conditions. In JavaScript they look like this:
if (x > 10) {
console.log("x is greater than 10");
} else if (x < 5) {
console.log("x is less than 5");
} else {
console.log("x is between 5 and 10");
}Comparison and Logical operators are used to test for true or false. In JavaScript, they look like this:
=== : equal value and equal type
!= : not equal value
> : greater than
>= : greater than or equal to
< : less than
<= : less than or equal to
&& : AND
|| : OR
! : NOT
Loops can execute a block of code a number of times. There are 5 types of loops in JavaScript: for, for/in, for/of, while, do/while. We will look at for and while loops as they are the most common ones.
for (var i = 0; i < 5; i++) {
console.log("Hello World!);
}For loops take in a variable (i as above), which needs to be initialized (i = 0), checked (i < 5), updated (i++) for the loop to run a finite number of times.
while (i < 5){
console.log("Hello World!);
i++;
}The while loop loops through a block of code as long as the specified condition is true. While loops take in a condition (i < 5) which will be checked everytime the loop is executed. Moreover, we need to update the value of the variable we are checking (i as above) to make sure the loop terminates. Otherwise, we will have an infinite loop.
Functions are self contained modules of code that accomplish a specific task. The function is executed when something invokes it. In JavaScript, functions can be declared in a few ways. We will focus on the following way:
function add(a, b) {
return a + b;
}We first type the function keyword, followed by the name of our function (add as above) and specify the parameters the function can take. We then add curly braces {} and write our block of code inside it. We can then invoke (call) the function like this:
var x = add(10, 20);We type the name of the function and pass it arguments (10 & 20 as above). The above invocation will add 10 & 20 and store the value in x.
DOM (Document Object Model) is how JavaScript can access and change all the elements of an HTML document. Whenever, a webpage is loaded, the browser creates a DOM of the page.
The DOM represents a document with a logical tree structure where in each node is an object representing a part of the document. With the DOM, JavaScript can manipulate all the HTML and CSS contents of the webpage. It can:
- Change all the HTML elements in the page
- Change all the HTML attributes in the page
- Change all the CSS styles in the page
- Remove existing HTML elements and attributes
- Add new HTML elements and attributes
- React to all existing HTML events in the page
- Create new HTML events in the page
We can access an HTML element by using a DOM method. Suppose we have a p tag with <p id="testing">, we access this element using the following method:
var test = document.getElementById("testing);Or by using the .querySelector() method like this:
var test = document.querySelector("#testing");We can then change the content of our p tag by using the .innerHTML property like this:
document.querySelector("#testing").innerHTML = "Hello World!";We will be using our knowledge of HTML, CSS and JavaScript to build a simple weather app. Afterwhich, we will come back and learn a bit on APIs and apply that knowledge to finish our project. You can access the source code of the app in this repo. You can try out the app here.
Note: Since the API we will be using is free and does not require a key, it is a little buggy when it receives an overload of requests. You will occassionally see Shuzenji as your location. Ignore it and continue refreshing. Your correct location will appear.
API (Application Programming Interface) is a software intermediary that allows 2 applications to talk to each other while creating a layer of abstraction for each application.
API is a large topic, we will get a taste of what it is today.
We need weather data for our weather app. However, we cannot be sending satellites to space to collect data for us. Other people have already done that. All we need is to collect the information from them. This is where an API comes in. Our application will talk to the weather API to fetch data and return it to us for us to use.
So, for us to collect data from the API, we need to fetch data from it. The API that we will be using today is a simple keyless API called FCC Weather API. The url is: https://fcc-weather-api.glitch.me/api/current?lat=latitude&lon=longitude. We need to fetch data from the url, return it to a usable format like json, then execute some functions that we want to do with the data.
var api = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${long}`;
fetch(api)
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
})So here, we are receiving data from the API, we return the response in json format and log the data to our console. We can then do a lot more with the data. Now, let's finish the weather app!
I hope you found this workshop useful. This workshop definitely did not cover all aspects of Front End Development. But I designed it to give you a brief introduction to the world of Web Development. Furthermore, we only learned a very small aspect of APIs. There is still a lot more to learn such as creating your own APIs etc.
Since you have now been introduced to the Front End side of web development, be sure to look out for the Back End workshop organized by NTUOSS in the future! Until then, stay safe and happy hacking!