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 installed on your system, refer to the Installing Node.js lesson, which lists the installation steps.

VS Code gives us access to a command line which points to the folder which is currently open. To access the terminal in VS Code, click the "View" option and choose "Terminal" from the options.

Package.json

A JavaScript project can be scoped as an npm package using the package.json file. In simple words, package.json contains the ingredients list of the JavaScript project. The ingredients are listed in the dependencies section. npm requires this file to be present in the root of the project.

Creating package.json file

With the Excellence theme folder opened in VS Code, open the terminal.

We will create a package.json file in the root of the project (which in our case is the theme folder). The npm init command creates the package.json file with metadata about the project. If we want to create a file with default options, type the following command in the VS code terminal: