How to create a website using HTML, CSS, and JS in VS Code

Understanding the basics of HTML, CSS, and JavaScript allows us to craft visually appealing and interactive web pages. We’ll walk through creating a sample website using these fundamental web technologies within Visual Studio Code (VS Code). Creating a sample website using HTML, CSS, and JavaScript in VS Code is an excellent way to start web development. We’ll discuss the steps that cover the various aspects of building a simple website using these technologies.

Here’s a detailed explanation of HTML, CSS, and JavaScript:

Hypertext Markup Language (HTML)

Code explanation

Let's discuss the line-by-line explanation of the HTML structure as follows:

Line 1: It specifies the document type and HTML version being used.
Lines 2–3: This marks the beginning of the HTML document. All the content of the web page is enclosed within the opening and closing <html> tags. The <head> section contains meta-information about the document, such as the page title, links to external resources (CSS stylesheets, scripts), and other metadata. It doesn't display content directly on the web page.
Line 4: The <title>Page Title</title> tag defines the title of the HTML document, which appears in the browser's title bar or tab.
Lines 6–12: The <body> section contains the visible content of the web page, including text, images, links, and other elements that users can interact with.
- A heading element denoted by <h1>. Headings are used to define the hierarchical structure of the content.
- The tag represents a paragraph element. It's used for defining text content within a paragraph.
- The src attribute specifies the image file's source (in this case, "image.jpg"), and the alt attribute provides alternative text for the image, which is displayed if the image fails to load.
- The href attribute specifies the URL that the link points to (in this case, "https://use.fontawesome.com/releases/v5.15.1/css/all.css"). When clicked, this link will navigate to the specified URL. The text between the opening and closing <a> tags ("Link") is the visible text for the hyperlink.

The HTML code provides the following functionalities:

Structure: HTML provides the skeleton of a web page by defining its structure using various tags.
Content: Elements like headings (<h1>, <h2>), paragraphs (<p>), lists (<ul>, <ol>), and more are used to add content.
Semantics: HTML offers semantic tags that convey the meaning of content to search engines and assistive technologies, improving accessibility.

Cascading Style Sheets (CSS)

CSS is a style sheet language used to describe the presentation and layout of HTML elements on a web page. It allows developers to control the appearance of HTML elements by defining styles for fonts, colors, layouts, spacing, and more. CSS rules are written within a stylesheet and then linked to HTML documents. For example:

Code explanation

The provided code is a snippet of CSS (Cascading Style Sheets) defining styles for HTML elements. Let’s break it down line by line:

Line 1: A comment indicates that this block of code represents styles and is likely part of a separate CSS file named "Stylesheet.css.” Comments in CSS are denoted by /* ... */ and are ignored by the browser when rendering the web page.
Lines 2–5: This block targets the body element in HTML. It sets the font-family property to Arial or any sans-serif font (if Arial is unavailable) for the entire web page’s text content. It also sets the background-color to a light grayish color with the hex code #f4f4f4.
Lines 7–10: This section targets all <h1> elements in HTML. It sets the color property to a dark gray color (#333) for the text color of <h1> headings. Additionally, it aligns the text to the center using text-align.
Lines 12–15: This part targets all <p> elements in HTML, which represent paragraphs. It sets the font-size property to 16px, determine the size of the text within paragraphs. The line-height property defines the space between lines of text, ensuring a line spacing of 1.6 times the font size.

The CSS code provides the following functionalities:

Styling: CSS is used to style and visually enhance HTML elements by applying colors, fonts, margins, paddings, etc.
Layout: It enables developers to create responsive layouts, positioning elements precisely on the web page.
Reuse: CSS allows for reusability by defining styles that can be applied to multiple elements.

JavaScript (JS)

JavaScript is a high-level, dynamic programming language primarily used for adding interactivity and behavior to web pages. It allows developers to manipulate HTML content, respond to user interactions, dynamically change page elements, validate forms, create animations, and more. For example:

Code explanation:

Let's discuss the line-by-line explanation of JS structure as follows:

Lines 1–4: The document.getElementById("button") part selects an HTML element with the ID "button". It's assumed that there is an HTML element (likely a button) with the ID "button" in the HTML document. The .addEventListener("click", function() { ... }) adds an event listener to the selected button element. The event being listened for is a "click" event. When the button is clicked, the function inside the addEventListener is executed. The function() { document.getElementById("demo").innerHTML = "Hello, JavaScript!"; } is an anonymous function (a function without a name) that changes the HTML content of an element with the ID "demo" to "Hello, JavaScript!". It uses document.getElementById("demo") to select the element with the ID "demo" and then sets its innerHTML property to "Hello, JavaScript!".

The JS code provides the following functionalities:

Interactivity: JavaScript enables developers to create interactive elements, such as buttons, sliders, or dropdowns.
Manipulation: It can modify HTML content, attributes, and styles dynamically in response to user actions or events.
Asynchronous operations: JavaScript can handle asynchronous operations like making API requests or fetching data from servers without blocking the page.

Creating a website in VScode

Creating a website using HTML, CSS, and JavaScript in Visual Studio Code (VS Code) involves creating the necessary files, writing the code for the web page, and previewing the changes in a web browser. Below are the steps to create a simple website:

Step-by-step guide:

Let's discuss the steps of creating a website as follows:

Open VS Code: Open Visual Studio Code on the machine.
Create a new folder: Create a new folder for our website project. We can do this in VS Code by going to File -> Open Folder and selecting or creating a new folder.
Create HTML file: Inside the folder, create an HTML file named index.html. Right-click on the folder in the VS Code Explorer panel, select New File, and name it index.html.
Create CSS file: Create a CSS file named styles.css. Right-click on the folder, select New File, and name it styles.css. Open the styles.css file and write the CSS styles to customize the appearance of our web page.
Create JavaScript file: Create a JavaScript file named script.js. Right-click on the folder, select New File, and name it script.js. Open the script.js file and write the JavaScript code to add interactivity to our web page.
Preview our website: Save all the files (index.html, styles.css, script.js). Right-click on the index.html file and select Open with Live Server to preview our website in a browser. If we don't have Live Server installed, we can open the index.html file directly by right-clicking and selecting Open with Live Server.
Make changes and experiment: Modify the HTML, CSS, and JavaScript files to experiment and add more features to our website.

VS Code playground

The following widget provides a dummy website code to understand the flow. Press the run button to launch the VS Code in the following playground. Once the VS code is launched, follow the above-shared step-by-step guide to create our website in VS Code. If anyone wants to check the already created website, we have already created a website with the name My_amazing_website and is placed at root/usercode directory.

Note: On Educative platform, please install “live preview” extension in VS Code to view the output after writing the code.

// Wait for the DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function() {
    // Function to handle the email signup form submission
    const signupForm = document.getElementById("signup-form");
    const signupSuccessMessage = document.getElementById("signup-success");

    signupForm.addEventListener("submit", function(event) {
        event.preventDefault();

        // You can add your own logic for handling form submission here, for example, sending data to a server
        // For this example, we'll just show a success message

        // Display success message
        signupSuccessMessage.style.display = "block";

        // Clear the form input
        signupForm.reset();
    });

    // Smooth scrolling for anchor links in the navigation bar
    const navLinks = document.querySelectorAll(".nav-links a");

    navLinks.forEach(function(link) {
        link.addEventListener("click", function(event) {
            event.preventDefault();
            const targetId = this.getAttribute("href").substring(1);
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                targetSection.scrollIntoView({ behavior: "smooth" });
            }
        });
    });
});

Playground to run a website in VS Code