DEV Community

wasifali
wasifali

Posted on

How to create or write HTML code as example in Visual Studio Code(VS Code)

Method of writing HTML code in VS Code

Writing HTML code in Visual Studio Code (VS Code) is straightforward and follows these steps:
Open VS Code: Launch the Visual Studio Code editor on your computer.
Image description

Create a new folder

After opening the VS code, set up the new folder.
Image description
Create a New File: Either open an existing HTML file or create a new file by selecting File > New File from the menu, or using the shortcut Ctrl + N (Windows/Linux) or Cmd + N (Mac).
Image description
Set File Type: If you created a new file, save it with an .html extension. This helps VS Code recognize it as an HTML file and provides syntax highlighting and other helpful features.
Image description
Start Writing HTML: Begin writing your HTML code. VS Code provides autocomplete suggestions and syntax highlighting to assist you as you type.
Image description
Code Formatting: VS Code can automatically format your HTML code for consistency. Use Shift + Alt + F (Windows/Linux) or Shift + Option + F (Mac) to format the entire document or a selected portion.
Image description
Preview in Browser: You can install extensions like "Live Server" or simply open the HTML file in a web browser to preview your webpage.
Image description
Save Your Work: Remember to save your changes periodically (Ctrl + S or Cmd + S) to keep your HTML file up to date.
Image description

Running of Code with Live Server

After writing the coding, the written code is run with Live Server
Image description

Top comments (0)