How to create a web project with vscode

Creating a web project in VS Code requires: Install the required extensions: HTML, CSS, JavaScript, and Live Server. Create a new folder and save the project file. Create index.html, style.css, and script.js files. Set up a live server. Enter HTML, CSS, and JavaScript code. Run the project and open it in your browser.

How to create a web project in VS Code

1. Install the required extensions

• HTML
• CSS
• JavaScript
• Live Server

2. Create a new folder

• In VS Code, go to File > New > Folder.
• Name your project and select a location.

3. Create index.html file

• Right-click in the project folder and select New > File.
• Name the file "index.html".
• If you see a prompt, select Encoding the file as "UTF-8".

4. Create CSS and JavaScript files

• Repeat step 3 to create files named "style.css" and "script.js" respectively.

5. Set up a real-time server

• In the VS Code activity bar, click Live Server.
• Click the Start Live Server button.

6. Enter the code

• In the "index.html" file, enter the following code:

 <code class="html">   <link rel="stylesheet" href="style.css"> <script src="script.js"></script>   <h1 id="Hello-World">Hello, World!</h1>  </code>

• In the "style.css" file, enter the following code:

 <code class="css">body { background-color: blue; }</code>

• In the "script.js" file, enter the following code:

 <code class="javascript">console.log("Hello, World!");</code>

7. Run the project

• In the activity bar, click Live Server > Open in Browser.
• Your project will open in the default browser, showing a page with a blue background and "Hello, World!".

The above is the detailed content of How to create a web project with vscode. For more information, please follow other related articles on the PHP Chinese website!