[HTML/CSS/JS Development Environment] Setting Up VSCode for Web Development

STEP 1: Get VSCode Ready! [Installation and Language Settings]

First, let's install VSCode, your partner in web development, on your computer. It's like getting a "knife" for cooking. It's very easy, so let's get it done quickly.

1. Download and Install VSCode

First, download the installer from the official VSCode website.

Visual Studio Code Official Website

When you visit the site, you should see a large download button for your OS (Windows, Mac, etc.). Click it to download, and then follow the on-screen instructions to install. There are no particularly difficult settings, so you can generally just click "Next" or "Agree" to proceed.

2. Changing the Language [Language Pack Extension]

Right after installation, VSCode's menus and other elements will be in English. If you're comfortable with English, you can leave it as is, but it's often more reassuring to use your native language. I tried to stick with English at first, but I gave up pretty quickly (lol).

For this article, we will use the Japanese Language Pack as an example. Let's use an "extension," an item that powers up VSCode, to change the display to Japanese.

1. Click the square icon on the left side of VSCode (the Activity Bar).
2. In the search box that appears, type "Japanese Language Pack".
3. Click the "Install" button for "Japanese Language Pack for Visual Studio Code" that appears at the top.
4. After installation, if a message prompts you to restart in the bottom right, click "Restart".

When VSCode restarts, the menus should now be in Japanese. With that, the initial setup is complete!

STEP 2: Cast a Magic Spell! [Essential & Handpicked Extensions]

Now that VSCode is ready, I'll introduce three handpicked "magic spells," or extensions, that will dramatically streamline your web development. There are many extensions out there, but as a beginner, installing too many can be confusing. For now, these three, which I genuinely feel I can't develop without anymore, are more than enough.

🥇 1st Place: Live Server - The Magic that Instantly Reflects Your Code

You absolutely have to install this. "Live Server" is the first thing that will teach you the joy of web development.

Normally, after you modify an HTML or CSS file, you have to go back to the browser and press the reload button (like F5) to see the changes. However, with Live Server, the moment you save your code, the browser display updates automatically.

This "write and it changes immediately" experience is truly amazing. Just eliminating the hassle of reloading each time will boost your work efficiency tenfold.

The installation method is the same as for the language pack. Search for "Live Server" from the extensions icon on the left and install it.

🥈 2nd Place: Prettier - The Butler that Automatically Tidies Up Your Code

When you start writing code, your indentation can get messy, and your use of spaces can become inconsistent. "Prettier" is what instantly formats that messy code into beautiful code every time you save.

"Who cares about how it looks?" you might think, but the appearance of your code is extremely important. Tidy code is easier to read and makes it easier to find errors. With Prettier, you'll spend zero time worrying about how your code looks.

Search for "Prettier - Code formatter" and install it.

[Important] Setting to Enable Prettier

Prettier won't work just by installing it. Let's add a simple setting so it automatically formats on save.

1. Click the gear icon in the bottom left and select "Settings". (or press Ctrl + ,)
2. Click the file icon in the top right (Open Settings (JSON)).
3. In the settings.json file that opens, add the following two lines. (If there's already something written, add them inside the {}, separated by a comma).

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
            

STEP 3: Let's Make Your First Web Page! [Copy-Paste OK]

Thanks for your patience! It's finally time to actually create a web page. We'll be using three languages here: HTML, CSS, and JavaScript, but you don't need to fully understand what each one means right now. The goal is to get a feel for "if I write this, this happens." Please follow the steps below.

1. Create a Work Folder and Three Files

First, create a new folder for this project somewhere on your computer you like (like the desktop). A name like "my-first-website" is easy to understand.

Next, open VSCode, select "Open Folder..." from the "File" menu, and open the folder you just created.

Once the folder is open, create three new files in the VSCode explorer on the left:

1. index.html (The file for the webpage's structure)
2. style.css (The file for styling the webpage's appearance)
3. script.js (The file for adding interactivity to the webpage)

2. Write the HTML (index.html)

Open the index.html file and copy-paste the following code as is.

Time-saving tip: Actually, if you just type ! (a single-byte exclamation mark) in index.html and press the Tab key, a basic template will be generated in an instant. This is a standard VSCode feature called "Emmet," and it's very handy to remember.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Hello, Welcome to the World of VSCode!</h1>
    <p id="message">A message will be displayed here.</p>
    <button id="changeTextBtn">Click me!</button>

    <script src="script.js"></script>
</body>
</html>

Briefly, <h1> is a main heading, <p> is a paragraph, and <button> is a button. Then, <link rel="stylesheet" href="style.css"> loads the CSS file, and <script src="script.js"></script> loads the JavaScript file.

Sticking point: If you get the filenames wrong here, like in href="style.css" or src="script.js", the CSS or JS won't load correctly, which can cause the layout to break or interactivity to fail. I've done this many times... Be sure to double-check that the filenames are correct.

3. Write the CSS (style.css)

Next, open the style.css file and copy-paste the code below. This code is for styling the appearance of the HTML we just created.

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
}

p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

Here, we're centering the text on the entire page, adjusting font sizes, and slightly changing the button's design.

4. Write the JavaScript (script.js)

Finally, open the script.js file and copy-paste the following code. This is the magic code that gives our webpage "interactivity."

// Get the HTML elements
const messageElement = document.getElementById('message');
const changeTextBtn = document.getElementById('changeTextBtn');

// Process when the button is clicked
changeTextBtn.addEventListener('click', function() {
  messageElement.textContent = 'Wow! JavaScript is working!';
});

Here, we're writing a command that says, "When the button with the ID changeTextBtn is clicked, change the text inside the p-tag with the ID message."

STEP 4: The Moment of Truth! Experience a "Working" Page with Live Server

Alright, everything is ready! It's finally time to view the web page we just created in a browser.

With the index.html file open in VSCode, click the "Go Live" button in the bottom right corner.

A browser should automatically launch and display the page you created!

Now, try clicking the "Click me!" button on the page. If the message changes to "Wow! JavaScript is working!", you've succeeded!

Furthermore, go back to VSCode and change the text of the <h1> in index.html to something like "Welcome to the world of web development!" and save (Ctrl + S). When you switch back to the browser, you should see that the display has changed instantly without you having to reload. This is the power of Live Server. Isn't it amazing?

Sticking point: The page doesn't display when you press "Go Live," the CSS isn't working, nothing happens when you press the button... as a beginner, you'll definitely run into some kind of error. When that happens, first check the following points:

• Is the path in the link to the CSS/JS files in the HTML file (href or src) correct?
• Is the filename correct? (e.g., styles.css instead of style.css)
• Did you copy and paste the code correctly?

If you still can't solve it, I recommend asking an AI about the error. If you ask a question by pasting the situation and your code, like "My CSS isn't being applied in VSCode's Live Server. Here's my code," it will give you surprisingly accurate answers. The reason I was able to build my site is because I had this "AI teacher."

Conclusion: Your Web Development Career Starts Here

Great job! Were you able to follow the steps in this article and get your very own web page working?

What we did this time was:

1. Prepared the all-purpose web development tool "VSCode"
2. Supercharged our development environment with extensions like Live Server
3. Wrote HTML, CSS, and JavaScript to create an actual, working web page

This is the absolute basic, and most important, first step for any web developer. Please don't forget this feeling of "my own code working in a visible form." That feeling will be a huge motivation for your future learning.

The small page you made today can grow into a website like the ones I've made by learning more HTML and CSS and adding various features with JavaScript. Your web development career has truly started right here, right now.

Let's continue learning together!