So far we have used an online code editor runjs.app to write some JavaScript and learn the basic programming concepts. There are many online code editors available for free. These are great for playing around and learning. When it comes to build something for real though, online editors are not practical. For that, we will need to set up a development environment on our computer and work with actual files.

When you complete this course and become a competent developer, you’ll find that creating projects from scratch all the time is not practical either. Instead, check out the Nano ASP.NET Boilerplate, a re-deployable project template made to accelerate app development.

Code Editors

Whether you are writing HTML, JavaScript, C# or some other language, all code files are just text and can be opened by and edited with a regular text editor like notepad. In the early days of coding, that’s what most people used – text editors. Luckily for us, much advancement has been made to improve the development experience since then.

A code editor is a program for writing code and there are several that you can download for free. The most popular code editor today is Visual Studio Code. That’s what we will be using for the rest of the guide.

You can download and install Visual Studio Code from this link. Download and install VS Code for whatever OS you use, Mac, PC, or Linux.

Visual Studio Code (VS Code) is a modern, lightweight, and highly customizable code editor. It provides many features that make coding faster, more efficient, and less error-prone:

• Syntax Highlighting: VS Code highlights your code in different colors depending on the language and structure. This makes it easier to read and understand what your code is doing at a glance.
• Autocomplete (IntelliSense): As you type, VS Code suggests completions for variables, functions, and other language features. This helps you code faster and with fewer mistakes.
• Auto Formatting: VS Code can automatically format your code according to consistent styling rules, keeping your code clean and readable.
• Error Highlighting: If you make a mistake in your code, VS Code will often underline it and show an explanation, helping you catch issues early.
• Extensions: You can enhance VS Code with thousands of extensions—such as linters, debuggers, themes, and integrations for frameworks or languages.
• Integrated Terminal: VS Code includes a terminal window, so you can run commands without switching to another app.
• Version Control: Built-in Git support makes it easy to track changes in your code and collaborate with others using source control.

In summary, it VS Code makes it easier to write code with syntax highlighting, auto complete and auto formatting. Also, extensions can be added to VS Code to make it more capable.

Its sometimes necessary run commands from a terminal window and VS Code has one integrated. Version control is how projects are saved. It’s more complex than just saving files but allows you to go back in time to any point the code was saved. We’ll learn more about that later.

VS Code Extensions

Before we get started building something in HTML and CSS, there are a few extensions available which will make the experience better. On the left hand side of VS Code, the last option is for managing extensions. Here are a few extensions you should install to get started:

·  Prettier – Code formatter – by Prettier
Automatically formats your HTML, CSS, and JavaScript to follow consistent style rules. Makes your code cleaner and easier to read.

👉 Install Link: Prettier

·  HTML CSS Support – by ecmel
Adds support for auto-completion and suggestions for CSS classes and IDs in your HTML files.

👉 Install Link: HTML CSS Support

·  IntelliSense for CSS class names in HTML – by Zignd
Autocompletes class names from your CSS files directly in your HTML code.

👉 Install Link: CSS Class Name IntelliSense

Finally, if you go to File then Preferences then Theme, you can choose color options for the editor and code highlighting, Oceanic Next (dimmed background) is a good one.

So far we’ve only covered one of the three front-end web technologies, JavaScript. In the next section, we’ll learn about CSS and HTML and walk through setting up your first project using Visual Studio Code.