Menu
REACT

Rendering HTML

There are multiple ways to render HTML. Here is the most common way to render HTML in Browser. 
By following the below basic steps, you can easily render and preview your HTML files in Visual Studio Code using the Live Server extension, which provides a convenient and efficient workflow for web development.

 

Step-by-Step Process
 


Step 1: Install Visual Studio Code

1. Download VS Code: If you don't have it installed, download and install Visual Studio Code from here.


Step 2: Install the Live Server Extension

1. Open VS Code: Launch Visual Studio Code.
2. Open Extensions View: Click on the Extensions icon in the Activity Bar on the side of the window or press Ctrl+Shift+X.
3. Search for Live Server: In the search bar, type "Live Server".
4. Install Live Server: Find "Live Server" by Ritwick Dey and click "Install".
 

Step 3: Open Your HTML File

1. Open File: Use File > Open File or drag and drop your HTML file into the VS Code editor.

 Alternative: Use the below code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1>HTML Is Live</h1>
</body>
</html>

 

Step 4: Start Live Server

1. Right-click on the HTML File: Right-click on the HTML file open in the editor.
2. Select Open with Live Server: From the context menu, select "Open with Live Server".
            Alternatively, you can click the "Go Live" button at the bottom-right corner of the status bar.
 

Step 5: View in Browser

1. Browser Opens Automatically: Your default web browser will open, displaying the rendered HTML file.
 

REACT