Set up your dev environment [A guide to newbie]

Are you new to Web Dev?

If you are starting web development, setting up the dev environment might seem horrible to you.

Here are some tips, you can follow and make your development journey quite EASY and COMFORTABLE.

I am using VS Code. If you are using any other text editor, search for a similar extension there.

Text Editor and Files

  1. So, the very first thing is - download a text editor. You can use VS Code, Sublime, or even Notepad.

  2. Create a new file named index.html. This is where you will be writing all your HTML code.

  3. Create another file style.css. You can use CSS in your HTML file, either using a style tag in the body, to importing it from another file. I prefer having another file for the same. It keeps the code clean, separated, and readable.

TIP-1

Right click on the index.html file and split it to right.

This is how it will look.

Screenshot (427).png

Your HTML and CSS files will be separated and it will be easier for you to write and coordinate with the code.

TIP-2

Go to Extensions Tab on the left bar and search for Live Server.

Install it!

Capt.PNG

Then, go to the bottom right nav bar and click on Go Live

tempsnip.png

Split the two windows, like this-->

Screenshot (428).png

Now write some code on the right text editor window, Save it and the changes will reflect on the left window.

This way definitely helps to write code comfortably and you can check at every moment, what changes your code has made.

This way, you don't need to switch between the windows.

TIP-3

Use the Beautify Extension

Install another Extension, called Beautify. It will format your code and make it look clean, readable and beautiful!

beau.PNG

Use the command Shift + Alt + F to use this extension and clean your code.

That's all for a beginner! Good Bye!

Did you find this article valuable?

Support Rashita Mehta by becoming a sponsor. Any amount is appreciated!