Tutorials

Hello World - HTML, CSS, JS with Bootstrap

In this chapter, I am going to explain the basic concepts about JavaScript. Primarily, I discuss the important role played by JavaScript.

back to table of contents

TLDR

More Details

HTML gives you content. CSS and Bootstrap gives you styling. JavaScript is what makes all these things run, and make your web app…work!

This work can be anything. it could be a simple button that will collect information in a form and send it to the server. It could be something complex like a photo sharing app that is communicating with a cloud hosted API server.

All that and more is done by Javascript. In most cases though, you will end up using a javascript library to get things. For instance, you might use react JS to build your web app. Or, jQuery. You could use both jQuery and React JS and also plain old vanilla javascript all together. This is similar to how you can use basic CSS and also bootstrap classes in your web app. A similar relationship.

In our textbook, the focus is all about basics, so we will stick to using vaniall JavaScript. However, once you get these basics, you can learn more advanced JS libraries as per your career plans.

In a nutshell, you write javascript code that will react to events. For example, a button is clicked, and it does something. For instance, it could change the text that is displayed. Or, an image download is completed, and a pop up is shown. Almost everything in a web app (or any app for that matter) is an event. You decided to capture these events and then, react accordingly. Or, ignore events that dont matter to you.

The response is written using javascript. The work, as i have mentioned above.

Main Items in JavaScript

When using JavaScript you will run into the following main things.

As always, look at the linked codepen below, to see how this works.

important note

This code is provided as is without any warranties. It’s primarily meant for our own use. Feel free to use this code as it pleases you.

About

Owner and Developer of this project - Jay