We chose VS Code as the IDE for this course, but you can choose any IDE you prefer.

Step 1: Install Visual Studio Code (if you did not)

  1. Download VS Code:

  2. Install VS Code:

    • Run the downloaded installer and follow the on-screen instructions to complete the installation.
    • On Windows, you may need to check the box to add VS Code to your PATH during installation.

Step 2: Configure VS Code for HTML, CSS, and JavaScript

The introduction of HTML and CSS is to explain their basic relationship with JavaScript. There’s no need to delve deeply into them. We will keep our main focus on learning JavaScript.

  1. Open VS Code:

    • Launch Visual Studio Code after the installation is complete.

  2. Install Recommended Extensions:

    • VS Code has a built-in marketplace for extensions. To enhance your development experience, install the following extensions:
      • HTML: HTML Snippets or HTML CSS Support
      • CSS: CSS Peek, IntelliSense for CSS class names in HTML
      • JavaScript: ESLint, Prettier - Code formatter

    How to Install Extensions:

    • Click on the Extensions icon in the Activity Bar on the side of the window (or press Ctrl+Shift+X).
    • Search for the extensions mentioned above and click the install button for each one.

  3. Create a New Project Folder:

    • Open a new folder to start your project by navigating to File > Open Folder and selecting or creating a new folder.

step 3: JavaScript Code works with HTML file

JavaScript can be embedded into HTML in several ways. we need to knwo three of them for now, the rest will learn in JavaScript Advance.

1. Inline JavaScript

  • JavaScript code is included directly within the HTML element’s attributes, such as event handlers.
  • Inside your project folder, create a new files for HTML by right-clicking on the folder in the Explorer pane and selecting New File. Add the code below to the html file, review it in browser.

index.html

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JavaScript</title>
</head>
<body>
    <button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>

Explaination:

  • button’s onclick event: button is a HTML form element. It show a button on HTML page in browser, when you click the button, onclick event be tragered, javascript code in double quotation will run.

2. Internal JavaScript:

  • JavaScript code is included within a <script> tag inside the HTML document.
  • Inside your project folder, create a new files for HTML by right-clicking on the folder in the Explorer pane and selecting New File. Add the code below to the html file, review it in browser.

index.html

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal JavaScript</title>
    <script type="text/javascript">
        function showAlert() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

Explaination:

  • button’s onclick event: button is a HTML form element. It show a button on HTML page in browser, when you click the button, onclick event be tragered, javascript function defined in <script> will run.

3. External JavaScript:

We have three files here, not index.html only.

  1. Create HTML, CSS, and JavaScript Files:

    • Inside your project folder, create new files for HTML, CSS, and JavaScript by right-clicking on the folder in the Explorer pane and selecting New File.
    • Name your files as index.html, styles.css, and script.js respectively.

  2. Add Basic Code to Each File:

    HTML(index.html):

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Project</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    <script src="script.js"></script>
</body>
</html>

    Explanation:

    • DOCTYPE Declaration: <!DOCTYPE html> tells the browser that this is an HTML5 document.
    • HTML Tag: <html lang="en"> is the root element of the HTML document, with the lang attribute set to “en” for English.
    • Head Section:
      • <meta charset="UTF-8"> specifies the character encoding for the document as UTF-8.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures the page is responsive by setting the viewport width to the device width.
      • <title>My First Web Project</title> sets the title of the webpage, which appears in the browser tab.
      • <link rel="stylesheet" href="styles.css"> links to an external CSS file named styles.css for styling the page.
    • Body Section:
      • Contains an ‘’’ element with the text “Hello, World!” and a <p> element with the text “This is a paragraph.”
      • <script src="script.js"></script> links to an external JavaScript file named script.js.

    CSS(styles.css):

      body {
    font-family: Arial, sans-serif;
}
h1 {
    color: blue;
}

    Explanation:

    • Body Styling:
      • body { font-family: Arial, sans-serif; } sets the font family for the entire body to Arial, or sans-serif if Arial is not available.
    • Heading Styling:
      • h1 { color: blue; } sets the color of all <h1> elements to blue.

    JavaScript(script.js):

      document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('h1').textContent = 'Hello, JavaScript!';
});

    Explanation:

    • DOMContentLoaded Event:
      • document.addEventListener('DOMContentLoaded', function() { ... }); sets up an event listener for the DOMContentLoaded event. This event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
      • Query Selector: document.querySelector('h1').textContent = 'Hello, JavaScript!'; selects the first <h1> element in the document and changes its text content to “Hello, JavaScript!”.

  3. Preview Your HTML File:

    • You can use the built-in live server extension to preview your HTML file.
    • Install the Live Server extension from the Extensions marketplace.
    • Once installed, right-click on your index.html file and select Open with Live Server. This will open your file in the default web browser and automatically reload when you make changes.

Step 4: Additional Configuration (Optional)

  1. Configure Formatters:

    • To automatically format your code, install Prettier - Code formatter extension and configure it in your settings.
    • Go to File > Preferences > Settings and search for Format on Save. Check the box to enable it.

  2. Set Up ESLint:

    • For JavaScript linting, install the ESLint extension.
    • Configure ESLint by creating a configuration file. In your project folder, run the following command in the terminal:
      npx eslint --init

  3. Customizing Settings:

    • You can customize various settings by going to File > Preferences > Settings and adjusting options like theme, font size, and more.