Using a Build Tool

A website is mostly created using HTML and CSS, both of which are static in nature. JavaScript can be used to add dynamic elements to the website. For example, in the School of Excellence website, the counters and slideshow on the homepage are dynamic elements.

JavaScript is a client side language and is run by the client’s browser. It can add dynamic elements on top of the HTML and CSS of the web page. In future lessons, we will show several examples of using JavaScript to add event-based actions. For example, when the user clicks the thumbs-up icon next to an event, it fills the icon up and the number next to the icon gets incremented. Similarly, when the user clicks the delete icon next to a lecture note, the note is removed from the database as well as from the page in real time. We will also use JavaScript for form validation.

JavaScript files are loaded at the bottom of the page or in the footer so that all the HTML code can be rendered first. Loading the JavaScript file in the header will slow down the page loading process if the file is heavy. There are ways to include the JS file in the header and tell the browser not to load it till the HTML has been loaded. However, it is simpler to load the file in the footer.

We will use Node.js for creating the package.json file for our project. If you do not have Node.js ...