Introduction to web development : Build a Riddle App

With this tutorial I am going to presume that you have no prior experience in web development and this is your kick off stage. My primary objective here would be to show you the three basic tools of web development HTML, CSS and JavaScript and how they come together to and make the beautiful web what it is.

but prior to that let’s get a few basic concepts out of the way.

What is a Web App

A web app is something you interact with on the web like say Google Calendar, It is often confused with a website which is static and just meant to display information. Although a website is a subset of a web application. The definitions of both are quite personal and subjective.

What is a Web Server

A Web server is a very powerful computer connected to very high speed internet. It is what contains the files of our applications and displays it to the user when they try to access our web app. Here is an info-graphic that explains it.

Building the app

Now to Demonstrate how HTML, CSS and JavaScript come together we will build a very simple Riddle App. It will display a Riddle on the screen and on clicking a button will show you the answer to it. Something like

A Screenshot of how the app will look like

Now this is by no means a very extensive application but it is complex enough of to understand how the three languages of the web come together and demonstrate what goes on behind the scenes of a web application.

Mr. HTML

HTML or (hyper text markup language) is the boilerplate or the foundation of the web. The boxes and the buttons, the text that you see around the web was all due to Mr HTML and we all owe him for that. Many programmers dismiss it and call it “not real programming” because it is not a Turing complete language but without it. The world won’t be where it is today

The HTML of our app looks something like this and we will visit what everything is doing one by one.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width”>

<title>Riddle App</title>
  </head>
<body>
 <div class = "box-one">
<p id = "display">What is red, mushy and found between shark's teeth ?</p>
   <div class = "button-container">

<button value = "click me" id = "button-one">
Click Me
</button>

</div>
  </div>
 </body>
</html>

Anything in the middle of two brackets < > is called an HTML Component or an HTML Tag.

These components are what tells the web server what to display. Most of these tags have a starting tag and an ending tag something that looks like this <title></title>, there are however some that don’t need both and we will deal with them in a future post.

The <Head> Tag

<head>
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width”>

<title>Riddle App</title>
</head>

What this is essentially contains is the metadata (data about data) of the website. Like what kind of fonts it would use, what all external files it needs, What will be the title in the browser etc.

It is a mandatory part of any kind of website/ web application that you are trying to build. There are a lot of tags that you can put inside the <head> tag, You can find a list of them on W3 Schools here.

The <Body> Tag

<body>

<div> ... </div>
<div> ... </div>
<div> ... </div>
</body>

This tag contains all the content of your website, So everything that the user sees on the webpage is contained within this tag. By far the most commonly used tag inside the body tag is the <div> tag, you can think of this tag as a box that you can manipulate in any way you want.

Earlier everything was made by a div but HTML5 makes it significantly easier to make commonly used elements

Before HTML5
After HTML5

The <Div> Tag

It is by far the most used tag in any website. It is essentially a box that can be styled in anyway to make it look exactly how you want it to look on your website.

The next thing we create inside the our body tag are the divs that contain portions of our application, which look something like this.

<div class = "box-one">
<p id = "display">What is red, mushy and found between shark's teeth ?</p>
   <div class = "button-container">

<button id = "button-one">
Click Me
</button>

</div>
</div>

Here, the first div that we make is our biggest box in which all the content of the webapp is contained. As you can see that we have assigned it the class of box-one

The Class attribute in html is what we use to group elements by, Afterwards the same class name is used by CSS to identify what element is to be styled. You can read more about classes here at W3 Schools.

After making the bigger box we then move on to fill in its contents. Here we use the <p> tag to write text or the riddle that we are going to be asking. The <p> tag stands for paragraph tag and most of the text that we display on our website goes into the this tag.

<button id = "button-one">
Click Me
</button>

We then make our “click me” button which when clicked displays the answer to us, using the button tag.

At this point our app looks something like this :

Its not the most beautiful looking app nor is it functional at this point but we have a basic structure of how it should be working.

We will now move on to make the functionality of our app using JavaScript.

The JavaScipt

The JavaScript of our app goes inside the script tag. Something like this

<script>
document.getElementById("button-one").onclick = function () 
{  
var text = document.getElementById("display").innerHTML;
  if (text == "What is red, mushy and found between shark's teeth?")     {
document.getElementById("display").innerHTML = "Slow Swimmmers"
}

else{
document.getElementById("display").innerHTML = "What is red, mushy and found between shark's teeth ?";
}

};
</script>

This is all the JavaScript we need for our little app to be functional. And even though this may look intimidating at first. Its very straight forward and feels almost like reading English.

To understand JavaScript Syntax you can visit W3 Schools here

document.getElementById("button-one").onclick = function ()
{
...
...
...
}

This is the part of our script that tells our application

“In our document get the element that has an id of “button-one” and when it is clicked perform the following function”
var text = document.getElementById("display").innerHTML;

This line in the script tells the following.

“ In our document get the element which has an id of “display”, take whatever html is there inside it and store it in the variable text.”
if (text == "What is red, mushy and found between shark's teeth?")     {
document.getElementById("display").innerHTML = "Slow Swimmmers"
}

This line of our script is an if statement that tells the following to our application

If the text that I told you about earlier is our question then get the element from our document which has an id of “display” and change the html inside it to the answer.
else{
document.getElementById("display").innerHTML = "What is red, mushy and found between shark's teeth ?";
}
We then tell our application what to do if the “if condition” that we made is not satisfied and we tell it to change the html back to the question

And that is all we need !. Our app is now completely functional. But its still missing something. The beauty aspect of it.

The answer after we click the button

Nobody likes to use a boring and dull looking app so

for the all the designers out there, this is your chance, to make your app as pretty as possible.

The CSS (Cascading Style Sheets)

CSS stands for Cascading Style Sheets and this is the part of our application where we beautify it and make the user interface and the user experience of our app better

<style>

...
...
...
</style>

The CSS of our app is contained within the <style> tag. This helps our app know how all the elements that we created in the html are supposed to be styled.

The CSS of our app looks something like this

<style>

body{
background-color:#fff;


}
.box-one{

margin:0 auto;
margin-top:100px;
}
form{
margin-top:30px;

}
#display{
text-align:center;
margin-top:200px;
color:#9b59b6;
font-size:60px;
}
.button-container{
width:200px;
margin:0 auto;
text-align:center;
}
#button-one{
width:200px;
height:40px;
margin:0 auto;
border: 3px solid #fff;
color:#fff;
background:#9b59b6;

}
#button-one:focus{
background:#9b59b6;
}
#button-one:active{
background:#2ecc71;
}
</style>

Here we access our html elements using the class attribute or the id attribute that we gave them.

To access an element using its class we write

.box-one {

...
...
...
}

and to access an element using its ID we write something like this.

#button-one {

...
...
...
}

the difference is the (.) and the (#) sign, also the primary difference between class and ID is that

Every HTML element can have only one unique ID but multiple elements can have the same class

The class attribute is used to style many elements that we want to style in the exact same way. However the we use the ID attribute if we want a particular element to have its own unique style.

There are many ways in which you can use css to style your html elements and you can learn how to use CSS here at W3 Schools again.

Even though we used HTML, CSS and JavaScript in the same file for the purpose of this tutorial, for large applications it is not recommended and we are supposed to keep them in 3 separate files which we will learn how to do in a later post.

What more can you make

Although this tutorial shows you how to make a very simple application, This is not where you need to stop. You can build upon these three tools and make a amazing applications

Here is an example of a CGPA / GPA calculator I made in my sophmore year, just to give you some perspective of the useful things you can make with it.

namankamra.com/marksheet

Companies and people have built a lot of frameworks and tools and that make the life of a developer easier. We will learn how to use these frameworks in a later post.

Important Links

  1. App Demo : namankamra.com/riddleapp
  2. App Code : github.com/namkam5/riddleapp
  3. Understanding HTML : W3schools.com/html
  4. Understanding CSS : W3schools.com/css
  5. CSS Properties List : tympanus.net/codrops/css_reference
  6. Understanding JavaScript : W3schools.com/js

The Purpose of this tutorial was to show a complete beginner how HTML, CSS and JavaScript come together to form a web application, to understand what a web application is and how its code functions behind the scenes.


PS: If you enjoyed this article and found it useful please be sure to press that green heart 💚 below, and share it on twitter.