SETTING UP VS CODE FOR HTML, CSS AND JAVASCRIPT BEGINNERS (2025 GUIDE)

Posted on November 12, 2025 by NewbieTools
Vs Code setup

Installing Vs Code is a great choice for you starting as beginner because you will have to benefit and also make your work more easier, Like in the earlier days that I started coding and building website as a beginner, I was using notepad which was tough for me on my journey and it made me to be slow on my web development journey, but today I don’t want you to experience same thing and that is why I will be showing you how to set up Vs Code on your laptop to make your work faster for you.

And here are some of the benefits of using Vs Code as a beginner. First, it is free and lightweight which is that it is completely free and runs on different computers even low computers and that is why I said that it is perfect for beginners. It is easy to setup for web development. It has powerful extensions that makes coding easier. They are many more which I cannot be able to mention all here but as you start using it you will be able to know more of it.


DOWNLOADING & INSTALLING VS CODE

So now, we will be downloading and installing Vs Code for our coding journey and to be able to download Vs Code on your computer you will have to visit Vs Code official website to download the version for your device, once you visit the Vs Code official website then you will go ahead and click on their download button which will then download Vs Code automatically on your computer and once the download is complete, click on the downloaded Vs Code file and click on install, you will immediately see that it will start installing, wait for it to be done and you will then be able to open your own Vs Code software on your computer to start coding immediately. And if you are confused in any step then you can just follow this Vs Code installation video guide and Vs Code will fully be downloaded on your computer.

download & install vs code

CREATING PROJECT FOLDER IN VS CODE FOR WEBSITE DESIGN

Now that you have successfully downloaded and opened your VS Code software, the next step we will be doing is to create a folder and files for our project. We will simply name this folder “Website Project.” To do this, open your VS Code and click on the first box icon by the left-hand side, which is called the Explorer. You can also use the shortcut by pressing Ctrl + Shift + E on your keyboard. After that, you will select the location where you want to save your project folder on your computer. Once you have selected the folder location, you will see it displayed inside your VS Code window. At the top of that section, you will notice a small icon that allows you to create new folders or files. Click on it to start creating your project files, such as your HTML, CSS, or JavaScript files, and you will see them appear inside your project folder in VS Code.

creating project folder in vs code

INSTALLING HELPFUL EXTENSIONS AS A BEGINNER

After creating the folder and files that you will use for to write your code, Now the next thing is to install extensions that will make you code easily and comfortable, they are thousands of extensions available which is that you can never be able to install all but you we will just have to download the ones that we need currently. Open your Vs Code on your device and once it has opened, just look at the left and you will see those different icons, just click on the 5th Icon by the left and it will open the extension section for you, at this point you will see a search bar on the extension section which we will be using to search for the extension that we need but before using the search bar, make sure that your computer is connected to the internet and then you will go ahead and search for the extensions to install.

And here are a few lists of extensions to search for and install. Search for these extensions (vscode-icons, Prettier - Code formatter, Live Server, GitHub Theme) then click on install once you search for each of them and click enable immediately you are done installing the extension. And here is the screenshot of extension on Vs Code

vs code extensions

WRITING YOUR FIRST HTML, CSS AND JAVASCRIPT FILES IN VS CODE

Now, I will be showing you how to create and write your HTML, CSS and JavaScript file in your Vs Code, so first on the earlier folder that we created and named “website folder” in Vs code, at the top of the folder you will see a small icon with a little (+) symbol, click on it so as to create a new file under the same folder, click on it and name the first file (index.html) which will be our HTML file still go ahead and create two files and name them (style.css & script.js) which will now be our CSS and JavaScript file. Now you have successfully created HTML, CSS & JavaScript file, then the next thing for you now is to start writing your codes on each file.

And if you don’t know what to write inside the files, then you can get NewbieTools Training Resources file and you will be able to learn how to write the codes.

html, css, js in vs code

Ready To Start Building

Hope that you were enjoying the step by step guide and am sure that by now you will be able to start building some projects, using Vs code at first as a beginner might seems confusing but don’t worry you will get used to it and enjoy your journey later, I remember how confusing this was when I first started, but trust me, once you get used to VS Code, you will never want to go back.

You can always come to newbietools to learn more and also get tools for your journey.