Complete Web Designing Course for Beginners

💻 Lesson F7 – Installing Visual Studio Code (VS Code)

🛠️ Setting Up Your Professional Web Development Environment

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand what VS Code is

✅ Understand why developers use VS Code

✅ Download VS Code safely

✅ Install VS Code on Windows

✅ Open and manage projects

✅ Install useful extensions

✅ Create their first web development workspace

✅ Prepare their system for future lessons

📖 Introduction

Before building websites, we need a place to write our code.

Just like:

A carpenter needs tools.
A mechanic needs a workshop.
A doctor needs medical instruments.

A web designer needs a code editor.

One of the most popular code editors in the world is:

💻 Visual Studio Code (VS Code)

Millions of developers use VS Code daily for:

Web Development
App Development
Software Development
Data Science
Artificial Intelligence

In this course, we will use VS Code to create all our websites.

🤔 What is VS Code?

Visual Studio Code (VS Code) is a free source-code editor developed by Microsoft.

It helps developers write, edit, organize, and manage code efficiently.

🌍 Why Is VS Code So Popular?

Many code editors exist.

Examples:

Notepad
Notepad++
Sublime Text
Brackets
Atom

However, VS Code is one of the most popular because it offers many powerful features for free.

🚀 Advantages of VS Code

✅ Free to Use

No payment required.

✅ Lightweight

Runs smoothly on most computers.

✅ Fast

Opens quickly and performs well.

✅ Beginner Friendly

Easy to understand and use.

✅ Supports Many Programming Languages

Examples:

HTML
CSS
JavaScript
Python
C
C++
Java

and many more.

✅ Large Extension Library

Allows developers to add extra features.

✅ Professional Industry Tool

Used by companies worldwide.

🎯 Why We Are Using VS Code in This Course

Throughout this course we will create:

HTML Files
CSS Files
JavaScript Files
Complete Website Projects

VS Code makes these tasks easier.

It also helps us:

✅ Detect errors

✅ Auto-complete code

✅ Organize projects

✅ Improve productivity

🖥️ System Requirements

VS Code works on:

Windows

Windows 10 or later recommended.

Linux

Most Linux distributions supported.

macOS

Supported on modern Apple devices.

For this course, we will focus mainly on Windows installation.

🌐 Downloading VS Code

To download VS Code:

Visit the official website:

https://code.visualstudio.com

Always download software from the official website.

⚠️ Important Warning

Never download software from unknown websites.

Reasons:

❌ Malware

❌ Viruses

❌ Fake Software

Always use official sources.

📥 Steps to Download VS Code

Step 1

Open Google Chrome.

Step 2

Search:

Visual Studio Code

Step 3

Open the official Microsoft website.

Step 4

Click:

Download for Windows

Step 5

Wait for the installer to download.

The file size is usually around 100 MB.

⚙️ Installing VS Code

After downloading:

Locate the installer file.

Example:

VSCodeSetup.exe

Double-click it.

Installation Process

Step 1

Accept the license agreement.

Click:

I Accept the Agreement

Then click:

Next

Step 2

Choose installation location.

Default location is usually fine.

Click:

Next

Step 3

Additional Tasks

You will see several options.

✅ Recommended Settings

Check these options:

Add "Open with Code" Action

Add to PATH

Create Desktop Icon

These settings make VS Code easier to use.

Step 4

Click:

Install

Wait for installation to complete.

Step 5

Click:

Finish

VS Code will open automatically.

🎉 Congratulations

VS Code is now installed.

You are ready to begin coding.

🖥️ Understanding the VS Code Interface

When VS Code opens, you will see several sections.

1️⃣ Activity Bar

Located on the left side.

Contains icons for:

Explorer
Search
Source Control
Extensions

2️⃣ Explorer Panel

Used to view files and folders.

This is where your project files will appear.

3️⃣ Editor Area

The main coding area.

This is where you write code.

4️⃣ Status Bar

Located at the bottom.

Shows:

File Information
Programming Language
Error Status

📁 Creating Your First Project Folder

A professional developer never stores files randomly.

Projects should always be organized.

Step 1

Create a folder on Desktop.

Name it:

Web Designing Projects

Step 2

Open VS Code.

Step 3

Click:

File → Open Folder

Step 4

Select:

Web Designing Projects

Now your workspace is ready.

📄 Creating Your First HTML File

Inside VS Code:

Right Click

New File

Create:

index.html

Why index.html?

By default, most websites start from:

index.html

It is usually the homepage of a website.

🏗️ Writing Your First Code

Type:

<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>

<body>

<h1>Hello Students</h1>

<p>Welcome to Web Designing Course</p>

</body>
</html>

Save the file.

💾 Saving Files

Shortcut:

Ctrl + S

Always save your work regularly.

Professional developers save frequently.

🌐 Opening HTML Files in Browser

Method 1:

Double-click the HTML file.

Browser opens automatically.

Method 2:

Right-click file.

Select:

Open With

Choose:

Google Chrome

🎯 Expected Output

The browser displays:

Hello Students

Welcome to Web Designing Course

Congratulations!

You have created your first webpage.

🔌 What Are Extensions?

Extensions add extra features to VS Code.

Think of extensions as mobile apps for VS Code.

They increase productivity.

🚀 Useful Extensions for This Course

Live Server

Most important extension.

Purpose:

Automatically refreshes website whenever code changes.

Search

Live Server

Install it.

Prettier

Formats code automatically.

Search:

Prettier

Install it.

HTML CSS Support

Provides better coding assistance.

Search:

HTML CSS Support

Install it.

Auto Rename Tag

Automatically updates matching HTML tags.

Search:

Auto Rename Tag

Install it.

🌟 Why Live Server Is Important

Without Live Server:

You must refresh browser manually.

Every.

Single.

Time.

With Live Server:

Changes appear automatically.

This saves time and improves productivity.

🏆 Professional Folder Structure

For future projects:

Project Name

│
├── index.html
│
├── css
│   └── style.css
│
├── js
│   └── script.js
│
└── images

Professional developers organize files like this.

⚠️ Common Beginner Mistakes

❌ Using Spaces in File Names

Bad:

my first page.html

Good:

my-first-page.html

❌ Forgetting to Save

Always use:

Ctrl + S

❌ Storing Files Randomly

Always use project folders.

❌ Deleting Important Files

Be careful while managing projects.

📝 Practical Activity

Activity F7

Install VS Code.

Create:

Web Designing Projects

folder.

Create:

index.html

file.

Write your first webpage.

Run it in Google Chrome.

Take a screenshot of your output.

📋 Assignment

Assignment F7

Answer the following:

What is VS Code?
Why do developers use VS Code?
What is an extension?
What is Live Server?
Why is index.html important?
What shortcut is used to save files?
Name three useful VS Code extensions.

🧠 Quiz

Q1. Who developed VS Code?

A. Google

B. Microsoft

C. Apple

D. Meta

✅ Answer: B

Q2. Which file is commonly used as a website homepage?

A. home.html

B. page.html

C. index.html

D. start.html

✅ Answer: C

Q3. Which extension automatically refreshes webpages?

A. Prettier

B. Live Server

C. Auto Rename Tag

D. Python

✅ Answer: B

Q4. What shortcut saves a file?

A. Ctrl + P

B. Ctrl + A

C. Ctrl + S

D. Ctrl + D

✅ Answer: C

Q5. Is VS Code free?

A. Yes

B. No

✅ Answer: A

📌 Lesson Summary

✅ VS Code is a free code editor developed by Microsoft.

✅ It is one of the most popular tools for web development.

✅ We use it to create HTML, CSS, and JavaScript files.

✅ Extensions improve productivity and coding experience.

✅ Live Server is an essential extension for web development.

✅ Proper project organization is important.

✅ You have successfully created your first coding workspace.