Setting up a simple Static Web Project with Visual Studio Code

A static web project usually contains the following components:

• Web Server, which delivers static web content like HTML, CSS, JavaScript, Images or any kind of Media Files
• The other component is your Web Browser
• For Working with static web projects, i recommend to work with Visual Studio Code, which is an Free Open Source and Runs everywhere as described on the VSCode website

Setting up Visual Studio Code Extensions

• To optimize our working experience, we will install the following extensions:
• Live Server
• Code Runner
• vscode-icons

Create Project

• Create a new empty folder on your filesystem
• Start VSCode and choose open Folder 

• Create the following folders and files in your new web project
• css (where your css files goes in)
• js (for javascript files)
• images (folder to put image files)
• index.html (html:5)

Start and configure the web server

• Now you can start the live server by clicking on Go Live Button form the statusbar

• To visit your Homepage just enter http://localhost:5500/ in your Browser address line
• For more information about configuring VSCode visit VSCode Tips & Tricks
• The Live Server will inject some JavaScript Code to every page you are opening in your Browser. This will force live reloading your web page at the same time you are making changes to your web resources

No reason to worry if you see the following code appearing in your HTML Code

<!-- Code injected by live-server -->
<script type="text/javascript">
 // <![CDATA[  <-- For SVG support
 if ('WebSocket' in window) {
  (function () {
   function refreshCSS() {
    var sheets = [].slice.call(document.getElementsByTagName("link"));
    var head = document.getElementsByTagName("head")[0];
    for (var i = 0; i < sheets.length; ++i) {
     var elem = sheets[i];
     head.removeChild(elem);
     var rel = elem.rel;
     if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
      var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
      elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
     }
     head.appendChild(elem);
    }
   }
   var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
   var address = protocol + window.location.host + window.location.pathname + '/ws';
   var socket = new WebSocket(address);
   socket.onmessage = function (msg) {
    if (msg.data == 'reload') window.location.reload();
    else if (msg.data == 'refreshcss') refreshCSS();
   };
   if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
    console.log('Live reload enabled.');
    sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
   }
  })();
 }
 else {
  console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
 }
 // ]]>
</script>