Career Path: Website Development

Module: Module 1 – Getting Started

Lesson: Lesson 2

Estimated Reading Time: 15–20 Minutes

Difficulty: Beginner

Module Progress

Career Path: Website Development

✅ Lesson 1: How to Become a Web Developer in 2026 (Completed)

📘 Lesson 2: Set Up Your Web Development Workspace (Current Lesson)

⏳ Lesson 3: What Is HTML? A Beginner’s Guide

⏳ Lesson 4: Understanding HTML Document Structure

⏳ Lesson 5: HTML Elements Explained

⏳ Lesson 6: Build Your First Web Page

Learning Objectives

By the end of this lesson, you’ll be able to:

• Understand why a proper development workspace matters.
• Install the essential software used by professional web developers.
• Set up Visual Studio Code (VS Code).
• Install Google Chrome for development.
• Organize your first web development project.
• Create your first project folder.
• Prepare your computer for the rest of this learning path.

You won’t write much code in this lesson—and that’s intentional. Before building websites, it’s important to create a solid foundation and become comfortable with the tools you’ll use every day.

Prerequisites

Before you begin, make sure you have:

• A Windows, macOS, or Linux computer
• A stable internet connection
• At least 2 GB of free storage space
• About 30–45 minutes to complete the setup

Don’t worry if your computer isn’t brand new. Web development doesn’t require an expensive machine to get started. Many successful developers began learning on modest laptops.

What You’ll Build

By the end of this lesson, you’ll have:

• A professional web development workspace
• Visual Studio Code installed
• Google Chrome ready for testing your websites
• Your first project folder
• A clean folder structure you’ll continue using throughout this course

This workspace will become your digital workshop where you’ll build every project in the Website Development learning path.

Why Your Development Workspace Matters

Imagine trying to build a house without the proper tools.

A carpenter wouldn’t work without a hammer, measuring tape, or saw. Likewise, a web developer needs the right software to write, organize, and test code efficiently.

Could you write HTML using a simple text editor like Notepad?

Technically, yes.

Should you?

Probably not.

Professional code editors provide features that save time, reduce mistakes, and make writing code much more enjoyable.

Some of these features include:

• Syntax highlighting
• Auto-complete suggestions
• Error detection
• Built-in search
• File management
• Extension support
• Integrated terminal
• Git integration

These tools won’t make you a better developer overnight, but they’ll help you learn faster and work more efficiently.

The Tools Every Beginner Needs

One of the biggest mistakes beginners make is downloading dozens of programs before they even understand the basics.

You don’t need twenty different applications.

To begin, you’ll only need a few trusted tools.

As your skills grow, you’ll gradually add more tools to your workflow.

Step 1: Install Visual Studio Code

Visual Studio Code, often called VS Code, is one of the most popular code editors in the world.

It’s trusted by beginners and experienced developers alike because it’s:

• Free
• Lightweight
• Fast
• Easy to customize
• Available for Windows, macOS, and Linux
• Supported by a huge community

VS Code isn’t just for HTML—it also supports CSS, JavaScript, PHP, Python, and many other programming languages.

This means you can continue using the same editor as your skills grow.

Download VS Code

Visit the official website:

https://code.visualstudio.com/

Download the version that matches your operating system and complete the installation.

The default installation settings are suitable for most beginners.

📺 Recommended Video: Getting Started with Visual Studio Code

If you’re new to Visual Studio Code, this official beginner-friendly video will walk you through the installation process, introduce you to the editor’s interface, and show you the essential features you’ll use throughout this learning path. Follow along as you watch to ensure your development environment is set up correctly before moving on to the next lesson.

💡 Note: This video is provided as a supplementary learning resource. Be sure to complete the written lesson and practice exercises as they contain additional explanations, tips, and challenges designed specifically for GigzHQ Academy learners.

Exploring Visual Studio Code

The first time you open VS Code, you may notice several sections.

Don’t worry if it looks unfamiliar.

You’ll become comfortable with the interface as you continue learning.

For now, it’s enough to recognize these areas:

Activity Bar

Located on the left side of the screen, the Activity Bar provides quick access to files, search, source control, extensions, and other tools.

Explorer

This is where you’ll see your project folders and files.

As your projects grow, the Explorer helps keep everything organized.

Editor

The largest area in the window is where you’ll write your HTML, CSS, and JavaScript code.

Think of it as your digital notebook.

Status Bar

At the bottom of the window, the Status Bar displays useful information about the current file and editor settings.

You’ll use some of these features later in your learning journey.

Step 2: Install Google Chrome

You probably already have a web browser installed on your computer.

However, Google Chrome is widely used by web developers because it includes powerful developer tools that make testing and debugging websites much easier.

Throughout this learning path, we’ll use Chrome to preview our projects and inspect how webpages are built.

Download Google Chrome

Visit:

https://www.google.com/chrome/

Download and install the latest version.

If Chrome is already installed, make sure it’s updated to the latest release.

Why We Recommend Chrome

Although your websites should work across different browsers, Chrome provides excellent built-in tools for beginners, including:

• Viewing HTML and CSS
• Inspecting page elements
• Testing responsive layouts
• Finding errors in JavaScript
• Measuring page performance

You’ll learn how to use these tools in future lessons.

📺 Recommended Video: Installing and Setting Up Visual Studio Code

This beginner-friendly tutorial from Koding 101 walks you through installing Visual Studio Code, exploring its interface, and configuring it for web development. Follow along with the video to set up your workspace correctly and become familiar with the tools you’ll use throughout this learning path.

💡 Note: This video is provided as a supplementary learning resource. Be sure to complete the written lesson and practice exercises as they contain additional explanations, tips, and challenges designed specifically for GigzHQ Academy learners.

GigzHQ Pro Tip

Every professional developer has a preferred set of tools, but don’t spend weeks searching for the “perfect” setup.

Start with a simple, reliable workspace and focus on learning the fundamentals. As your experience grows, you’ll naturally discover additional tools and extensions that match your workflow.

Remember, great developers aren’t defined by the software they use—they’re defined by the problems they solve.

Coming Up in Part 2

Now that your essential software is installed, it’s time to prepare your workspace for real development.

In Part 2, you’ll learn how to:

• Install the most useful VS Code extensions
• Create your first web development project folder
• Understand a professional folder structure
• Create your first HTML file
• Use Live Server to preview your website instantly

By the end of Part 2, your workspace will be fully configured and ready for your first coding lesson.

Step 3: Install Essential Visual Studio Code Extensions

One of the reasons Visual Studio Code is so popular is its extension marketplace.

Extensions are small add-ons that enhance VS Code by providing new features, improving productivity, and making coding easier.

As a beginner, it’s tempting to install dozens of extensions.

Don’t.

Too many extensions can slow down your editor and make learning more confusing.

Instead, start with a few carefully selected extensions that you’ll use throughout this learning path.

Live Server

Purpose: Instantly preview your website in your browser.

Normally, after making changes to your HTML file, you’d need to refresh your browser manually.

Live Server automatically refreshes the page whenever you save your work.

This saves time and creates a smoother learning experience.

Why You Need It

• Automatic browser refresh
• Faster development
• Beginner-friendly
• Works with HTML, CSS, and JavaScript

Prettier – Code Formatter

Writing clean code is an important habit.

Prettier automatically formats your code, making it easier to read and maintain.

Instead of worrying about spacing or indentation, you can focus on learning.

Auto Rename Tag

Suppose you rename this tag:

<h1>

Normally, you’d also need to rename the closing tag manually.

With Auto Rename Tag installed, both tags update automatically.

It’s a small feature that saves time and reduces mistakes.

Auto Close Tag

This extension automatically creates closing HTML tags as you type.

For example:

<p>

becomes

<p></p>

This helps beginners avoid one of the most common HTML mistakes.

HTML CSS Support

As your websites become more advanced, this extension provides intelligent suggestions while writing HTML and CSS.

It improves productivity without getting in your way.

Path Intellisense

When adding images, stylesheets, or JavaScript files, you’ll often need to specify file paths.

Path Intellisense suggests the correct paths automatically, reducing typing errors.

📺 Recommended Video: Installing Essential VS Code Extensions

In this tutorial from Geeking Script, you’ll learn how to install and manage Visual Studio Code extensions that can improve your coding experience. Follow along to add the recommended extensions for this lesson and discover how they can help you write cleaner code, boost productivity, and make web development more efficient.

💡 Note: This video is provided as a supplementary learning resource. Be sure to complete the written lesson and practice exercises as they contain additional explanations, tips, and challenges designed specifically for GigzHQ Academy learners.

🚀 GigzHQ Pro Tip

Extensions should make your workflow easier—not replace your understanding.

Learn the fundamentals first. As your skills improve, you’ll naturally discover additional tools that match your workflow.

✅ Checkpoint

Before continuing, make sure you’ve installed:

• Live Server
• Prettier
• Auto Rename Tag
• Auto Close Tag
• HTML CSS Support
• Path Intellisense

If everything is installed, you’re ready to create your first project.

Step 4: Create Your First Web Development Project

Professional developers don’t save files randomly across their desktop.

Organization is an important habit that becomes more valuable as your projects grow.

Let’s create your first project folder.

Choose a location on your computer where you’ll keep all your web development projects.

Create a folder called:

Web Development

Inside that folder, create another folder called:

My First Website

Open My First Website using Visual Studio Code.

Your Project Structure

Inside your project, create the following folders:

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

Don’t worry if some of these files are empty.

Professional developers often create the project structure before writing any code.

This keeps projects organized from the beginning.

Why This Structure?

As your websites become larger, separating files into folders makes projects easier to manage.

For example:

• HTML defines the structure.
• CSS controls the appearance.
• JavaScript adds interactivity.
• Images stores graphics and photos.

Keeping everything organized now will save you time later.

📺 Recommended Video: Creating and Organizing Your Project Folders in VS Code

A well-organized project structure is an essential habit for every web developer. In this beginner-friendly tutorial from GuideRealm, you’ll learn how to create project folders, add files, and organize your workspace in Visual Studio Code. Following these best practices from the beginning will make your projects easier to manage as they grow in size and complexity.

Step 5: Create Your First HTML File

Inside your project folder, create a new file called:

index.html

The file name is important.

When someone visits your website, web servers often look for a file named index.html by default.

Using this naming convention now helps you develop good habits.

For now, your file may be empty.

In the next lesson, you’ll learn how HTML documents are structured and begin writing your first lines of code.

Understanding File Extensions

Every file has an extension that tells your computer what type of file it is.

Examples include:

Understanding file extensions is a small but essential part of becoming a web developer.

Step 6: Preview Your Website with Live Server

Now let’s test your setup.

Even though your HTML file is still empty, it’s a good idea to make sure Live Server is working correctly.

Right-click index.html and choose:

Open with Live Server

Your default browser should open automatically.

If everything is working correctly, you’ll see a blank webpage.

That may not seem exciting—but it’s actually an important milestone.

Your development environment is now working correctly.

Soon, that blank page will become your first website.

Troubleshooting Common Problems

Live Server Doesn’t Appear

Try restarting Visual Studio Code after installing the extension.

Browser Doesn’t Open

Check whether Live Server is installed and enabled.

Wrong Folder Opened

Always open the project folder, not just an individual file.

Files Not Saving

Remember to save your work regularly using:

• Windows: Ctrl + S
• macOS: Command + S

🚀 GigzHQ Pro Tip

Professional developers spend time setting up their tools because a well-organized workspace improves productivity and reduces frustration.

Don’t rush through this step.

A few extra minutes spent organizing your workspace today can save hours of confusion in future projects.

🧪 Practice Exercise

Complete the following tasks:

• Install all recommended VS Code extensions.
• Create the Web Development folder.
• Create the My First Website project.
• Add the folders:
  • css
  • images
  • js
• Create:
  • index.html
  • style.css
  • script.js
• Open the project using Visual Studio Code.
• Launch Live Server successfully.

If you can complete each task without assistance, you’ve successfully prepared your development environment.

✅ Lesson Checklist

Before moving to the next lesson, confirm that you have:

✔ Installed Visual Studio Code

✔ Installed Google Chrome

✔ Added the recommended VS Code extensions

✔ Created your first project folder

✔ Organized your files correctly

✔ Created index.html

✔ Created style.css

✔ Created script.js

✔ Successfully launched Live Server

Congratulations! Your web development workspace is fully configured and ready for coding.

Continue Learning

Previous Lesson

➡ How to Become a Web Developer in 2026: The Complete Beginner’s Guide

Next Lesson

➡ What Is HTML? A Beginner’s Guide

Related Lessons

• Understanding How Websites Work
• HTML Document Structure Explained
• Your First HTML Elements
• HTML Headings and Paragraphs
• Building Your First Web Page

Quick Summary

Today you completed one of the most important setup tasks in your web development journey.

You installed professional development tools, organized your workspace, created your first project structure, and verified that your environment is ready for coding.

In the next lesson, you’ll finally begin writing HTML and learn how every webpage on the internet is built—one element at a time.

Common Beginner Mistakes to Avoid

Setting up your development workspace is straightforward, but beginners often make a few mistakes that can slow down their progress.

Here are some of the most common ones—and how to avoid them.

Installing Too Many Extensions

Visual Studio Code has thousands of extensions.

While it’s tempting to install everything, too many extensions can slow down your editor and make it difficult to know which tools you’re actually using.

Start with the recommended extensions in this lesson and add more only when you genuinely need them.

Saving Files with the Wrong Name

One of the most common mistakes beginners make is accidentally naming files like:

• index.html.txt
• style.css.txt
• script.js.txt

This usually happens because Windows hides known file extensions by default.

Always double-check your filenames and make sure they end with the correct extension.

Creating Files in the Wrong Folder

Another common mistake is placing every file in the root folder.

As your projects grow, this quickly becomes messy.

Keep using this structure:

My First Website
│
├── css
├── images
├── js
└── index.html

Developing good organizational habits now will make larger projects much easier to manage.

Forgetting to Save Your Work

Many beginners spend several minutes coding only to discover they forgot to save the file.

Get into the habit of pressing:

• Windows: Ctrl + S
• macOS: Command + S

Regularly saving your work prevents frustration and data loss.

Ignoring Error Messages

If something isn’t working, don’t panic.

Error messages are part of the learning process. Read them carefully, search for the meaning if necessary, and try to understand what they’re telling you.

Every experienced developer has spent time troubleshooting problems.

Frequently Asked Questions

Do I need a powerful computer to learn web development?

No.

A basic laptop or desktop computer is enough for HTML, CSS, JavaScript, and even WordPress development. You can always upgrade your hardware later as your projects become more demanding.

Is Visual Studio Code free?

Yes.

Visual Studio Code is completely free to download and use, making it one of the best code editors for beginners and professionals alike.

Can I use another browser instead of Google Chrome?

Yes.

Browsers like Microsoft Edge, Firefox, and Safari also include developer tools.

However, many tutorials use Google Chrome, making it easier for beginners to follow along.

Can I learn web development on Windows, macOS, or Linux?

Absolutely.

The tools used in this learning path work across all three major operating systems.

What should I do after completing this lesson?

Continue to the next lesson:

What Is HTML? A Beginner’s Guide

There, you’ll learn the language that forms the foundation of every website on the internet.

Lesson Summary

Congratulations! 🎉

You’ve completed one of the most important setup lessons in your web development journey.

Today you learned how to:

• Set up a professional development environment
• Install Visual Studio Code
• Install Google Chrome
• Add beginner-friendly VS Code extensions
• Organize your project files
• Create your first web development project
• Launch your project with Live Server

Although you haven’t written much code yet, you’ve prepared your computer just like a professional developer would.

That foundation will make every lesson that follows easier to understand.

🚀 GigzHQ Pro Tip

Don’t compare your beginning to someone else’s years of experience.

Every professional web developer once stared at an empty editor, wondering where to start.

The difference between those who succeed and those who quit is consistency.

Aim to learn a little every day. Small, steady progress adds up over time.

Practice Challenge

Before moving to the next lesson, complete this challenge without following the instructions again.

Your Challenge

Create a new project called:

My Personal Profile

Inside the project:

• Create an index.html file.
• Create a css folder containing style.css.
• Create a js folder containing script.js.
• Create an images folder.
• Open the project using Visual Studio Code.
• Launch it with Live Server.

If you can complete this setup from memory, you’ve successfully mastered this lesson.

Continue Learning

Previous Lesson

➡️ How to Become a Web Developer in 2026: The Complete Beginner’s Guide

Next Lesson

➡️ What Is HTML? A Beginner’s Guide

Related Lessons

• Understanding How Websites Work
• HTML Document Structure Explained
• HTML Elements Explained
• HTML Headings and Paragraphs
• Building Your First Web Page

Recommended Resources

Continue exploring with these trusted resources:

• Visual Studio Code Documentation
• Google Chrome Developer Tools Documentation
• MDN Web Docs
• W3Schools
• freeCodeCamp

What’s Next?

Now that your workspace is fully configured, it’s finally time to start writing code.

In the next lesson, “What Is HTML? A Beginner’s Guide,” you’ll learn how HTML works, why every website depends on it, and how to create your very first webpage from scratch.

One lesson at a time, you’ll move from complete beginner to a confident web developer.