The best ways to use the latest Visual Studio code for a Web Developer

visual studio code wakeupcoders

For a worrier, the weapon is a very important thing in his life similarly for a web developer his tools are weapons for web development. Visual studio is a very smart editor in this editor you can build any type of websites, web pages (static, dynamic) with the help of any type of programing language. let us go and learn how a visual studio works.

How to get started with visual studio code for our projects.

  • To get started with the upcoming steps make sure visual studio code is installed in your system.
  1. create a folder on the desktop.
wakeupcoders ide web development
  • Name the folder with a particular name that is related to your project for example XYZ.
wakeupcoders ide web design
  • Now open the XYZ folder by double click on it. The blank folder will be shown on your screen.
  • Select the address bar which looks like (C://users/Desktop/XYZ) and enter the cmd into it as shown below the diagram.
wakeupcoders
  • Now the selected address of the folder will be opened in the command prompt.
  • To open this project in the visual studio code enter the command : (code .). the whole folder will be opened into the visual studio code.
wakeupcoders command promt

The welcome page will open on your screen by the visual studio code editor and there are some instructions and soo many tools and also the folder which was created by you.

visual studio code main wakeupcoders

Now we have opened our project folder into the visual studio code. As you can see there are five icons on the top left of your screen which will perform different tasks by clicking on it.

  • 1st Explorer: This contains our whole files, projects or folders in our system.
  • 2nd Search: This icon is used for searching or replacing the things in our code.
  • 3rd Source Control: This is used with GitHub or we can use it as version control in our system.
  • 4th Run: This icon is used for running or debugging the project.
  • 5th Extensions: Last but not least this is an extension or we can say the Playstore of the visual studio code which can be used to install or manage the extension used in the visual studio code.
icons of visual studio code
  • Creating a file: To create any kind of file is VS code. Just simply click on the new file icon as shown below the diagram and enter the name of the file with its extension and press enter a new file with the given name will be created.
creating file in visual studio code
  • Creating a Folder: To create a folder in the VS code. Just simply click on the new folder icon as shown below the diagram and enter the name of the folder and press enter a new folder will be created.
creating folder visual studio code

VS CODE has amazing features. There are a lot of shortcuts are there which can be used to do the faster coding. In this blog we will see one shortcut to write the basic structure of the HTML program. In any HTML file when you will enter this symbol(!) after then pressing enter key.

zencoding in visual studio code

It will auto-generate the basic HTML code which is shown below the diagram.

basic program of HTML

In this blog: I tried my best to explain how a web developer uses visual studio code. I hope you enjoyed this blog. In the next blog, I will show you how to start with a simple HTML code in visual studio code.

Happy Coding :)

--

--

Wakeupcoders - Digital Marketing & Web App Company
Wakeupcoders - Digital Marketing & Web App Company

Written by Wakeupcoders - Digital Marketing & Web App Company

We make your business smarter and broader through the power of the internet. Researcher | Web developer | Internet of things | AI | www.wakeupcoders.com

No responses yet