In this task, you will get a demonstration of a static website in which a web server delivers static web content without server-side programming. You will also explore different dev tools of the browser.
- Clone or download the code from the following GitHub repo: https://github.com/houcine1amraoui/task1-a-static-website-demo
- Open the project folder with VS Code and then open the integrated terminal.
- In the terminal, run “npm install” command to install the dependencies (express in this case).
- In the terminal, run “node server.js” command to start the server.
- Browse to http://localhost:1000
- Inspect the source code of the website using the dev tools of the browser. What makes the button click show the hidden text?
- Check out the source code of the website from the code base using the text editor. Where the html pages resides and how the server serves them?
- Check out the response status code using the network tool in the browser when the page loads for the first time and in the second. What have you noticed? Why is that?
- Create another static web page called “test.html”, put some web content in it, then add a route to deliver it.
- Restart the server and navigate to the “test” page.
- Now, go to the project folder via Windows explorer an open index.html file directly through the browser. Why the web page has been displayed normally without running the server? What protocol has been used in such a case?
- Explore and navigate through the website using Postman API client.