Lab 1: Development Environment Setup

Published

January 20, 2026

Welcome to your first web development lab! This lab will guide you through setting up a professional development environment for web development.

Lab Objectives

By the end of this lab, you will be able to:

  • ✓ Install and configure Visual Studio Code (VS Code)
  • ✓ Set up essential VS Code extensions for web development
  • ✓ Create a proper project folder structure
  • ✓ Write and view your first HTML file
  • ✓ Use browser developer tools effectively

Pre-Lab Preparation

What You Need

Note

Before you start, make sure you have the following:

  • A computer with Windows, macOS, or Linux
  • Administrator access to install software
  • Internet connection for downloading software
  • At least 2GB of free disk space

Estimated Time

60-90 minutes (depending on download speeds and your familiarity with software installation)

Editor Preparation

Recommended editor for this course

Use VS Code if you want a professional coding environment with extensions, live preview, formatting, and better file management.

Installation and Setup

  1. Visit https://code.visualstudio.com/.
  2. Download the installer for your operating system.
  3. Install VS Code using the OS-specific instructions below.

Windows

  1. Run the downloaded .exe file.
  2. Accept the User Account Control prompt.
  3. Accept the license agreement.
  4. Choose installation location (default is fine).
  5. Check these options:
    • Add to PATH
    • Create a desktop icon
    • Add “Open with Code” to context menu
  6. Click Install, then Finish.

macOS

  1. Open the downloaded .dmg file.
  2. Drag the VS Code icon into the Applications folder.
  3. Open VS Code from Applications.

Linux

Use the instructions from VS Code alternate downloads for your distribution.

Why VS Code Is Preferred

  • supports HTML editing with syntax highlighting
  • works well with Live Server for browser preview
  • helps manage multiple files and folders easily
  • useful for future labs involving CSS, JavaScript, and backend files
Tip

If possible, use VS Code for all lab work because the remaining lab instructions are primarily demonstrated with it.

Alternative for basic HTML practice

Notepad is pre-installed on Windows, so no separate installation is usually needed.

Setup Steps

  1. Open Notepad from the Start menu.
  2. Click File -> Save As.
  3. Change Save as type to All Files.
  4. Save the file as index.html instead of index.txt.
  5. Choose UTF-8 encoding if that option is available.
  6. Open the saved file in your browser by double-clicking it.

Alternative for basic HTML practice

TextEdit is pre-installed on macOS, so no separate installation is usually needed.

Setup Steps

  1. Open TextEdit.
  2. Go to Format -> Make Plain Text.
  3. Type your HTML code.
  4. Click File -> Save.
  5. Save the file as index.html.
  6. If TextEdit tries to add .txt, choose the option to keep .html.
  7. Open the file in your browser.

Important Notes for Basic Editors

  • these editors do not provide Live Server support
  • you must refresh the browser manually after each save
  • managing multiple files is harder than in VS Code
  • extensions and advanced coding help are not available
Note

Notepad and TextEdit are acceptable for simple HTML exercises, but you should move to VS Code as early as possible for the rest of the course.

Create Project Structure

Proper file organization is crucial for successful web development. Let’s create a well-structured project folder.

Step 1: Create Main Folder

Create a folder on your computer for this course. Choose an appropriate location like your Documents folder:

Windows:

C:\Users\[YourUsername]\Documents\BMC201-WebTech\

macOS:

/Users/[YourUsername]/Documents/BMC201-WebTech/

Linux:

/home/[username]/Documents/BMC201-WebTech/

Step 2: Create Subfolders

Inside BMC201-WebTech, create these subfolders:

BMC201-WebTech/
│
├── Labs/
│   ├── Lab01/
│   ├── Lab02/
│   ├── Lab03/
│   └── ...
│
├── Assignments/
│   ├── Assignment01/
│   ├── Assignment02/
│   └── ...
│
└── Practice/
    └── (for your own practice exercises)
Note

Why this structure? - Keeps course materials organized - Prevents files from getting mixed up - Makes it easy to find assignments - Professional practice for real projects

Step 3: Open Folder in VS Code

  1. Open Visual Studio Code
  2. Go to File → Open Folder
  3. Navigate to your BMC201-WebTech folder
  4. Click Select Folder
  5. The entire folder now appears in your Explorer panel
  6. You’ll see all your subfolders on the left

Congratulations! You now have VS Code working as your project workspace. All files created here will be accessible from the Explorer.

Experiment 1: Create a Simple HTML Page

Objective

Create a simple HTML page that displays student and course details using standard HTML elements.

Files Required

  • Lab01/index.html

Step-by-Step Tutorial

  1. Open Labs/Lab01/ in VS Code.
  2. Create a new file named index.html.
  3. In index.html, type ! and press Tab to generate the basic HTML5 template.
  4. Replace the <title> text with My First Web Page - Lab 1.
  5. Inside <body>, add one main heading (<h1>), sections (<h2>), one paragraph (<p>), one unordered list (<ul>), and one ordered list (<ol>).
  6. Save the file with Ctrl+S.
  7. Right-click index.html and choose Open with Live Server.
  8. Verify that all headings, paragraphs, and list items are visible in the browser.

Final Code (Reference)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page - Lab 1</title>
</head>
<body>
    <h1>Welcome to Web Technology!</h1>

    <h2>About Me</h2>
    <p>
        My name is [Your Name] and I am a student in the BMC201 Web Technology
        course at Galgotias College of Engineering & Technology.
    </p>

    <h2>Course Information</h2>
    <ul>
        <li>Course Code: BMC201</li>
        <li>Course Title: Web Technology</li>
        <li>Semester: MCA Semester 2</li>
        <li>Academic Year: 2025-26</li>
    </ul>

    <h2>What I Hope to Learn</h2>
    <ol>
        <li>HTML5 and semantic markup</li>
        <li>Building clean page structure using headings and lists</li>
        <li>JavaScript for interactivity and DOM manipulation</li>
        <li>Web server configuration and deployment</li>
        <li>Modern web development practices</li>
    </ol>

    <h2>Contact Information</h2>
    <p>
        Email: <a href="mailto:your.email@galgotiacollege.edu">your.email@galgotiacollege.edu</a><br>
        Roll Number: [Your Roll Number]<br>
        College: Galgotias College of Engineering & Technology
    </p>

    <footer>
        <hr>
        <p>Created on: [Today's Date]</p>
        <p>&copy; 2026 [Your Name]. All rights reserved.</p>
    </footer>
</body>
</html>

Expected Result

The page should display your heading, profile details, course information, and ordered/unordered lists with proper formatting.

Experiment Challenge

Add one more section titled My Learning Goals This Semester with at least three bullet points.

Experiment 2: Paragraph Alignment and Image Placement

Objective

Create a second HTML page that demonstrates different paragraph alignments and image placement using HTML only.

Files Required

  • Lab01/alignment.html
  • Lab01/images/profile.jpg

Step-by-Step Tutorial

  1. Inside Lab01, create a folder named images.
  2. Place one image file in it and name it profile.jpg.
  3. Create a new file named alignment.html in Lab01.
  4. Type ! and press Tab to create the HTML5 boilerplate.
  5. Set the page title to Paragraph Alignment - Lab 1.
  6. Add one heading using <h1>.
  7. Add the image using <img src="images/profile.jpg" alt="Profile image" width="220" align="right">.
  8. Add four paragraphs and use the align attribute values left, center, right, and justify.
  9. Save the file and open it with Live Server.
  10. Confirm all four alignment styles are visible and the image appears on the right side.

Final Code (Reference)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraph Alignment - Lab 1</title>
</head>
<body>
    <h1>Paragraph Alignment Demonstration</h1>

    <img src="images/profile.jpg" alt="Profile image" width="220" align="right">

    <p align="left">This paragraph is left aligned and is the default alignment used in most web pages.</p>
    <p align="center">This paragraph is center aligned and is useful for titles and announcements.</p>
    <p align="right">This paragraph is right aligned and can be used for emphasis in specific layouts.</p>
    <p align="justify">This paragraph is justified so text stretches evenly between both margins, which gives a formal document-like appearance.</p>
</body>
</html>

Expected Result

The browser should show an image and four paragraphs with distinct alignments: left, center, right, and justified.

Experiment Challenge

Create a third page named about.html and add navigation links between index.html, alignment.html, and about.html.

Code Documentation Standards

Writing clear documentation helps both you and others understand code later. Always include file headers and inline comments for major logic blocks.

File Header Template

Every HTML file should start with a comment header explaining its purpose. Place this as the first line in your file:

<!--
  File: index.html
  Author: [Your Name]
  Date: [Today's Date]
  Description: This is the main page for Lab 1, displaying student and course information
  using HTML headings, paragraphs, lists, and basic HTML5 structure.
-->

<!DOCTYPE html>

File Header Explanation

  • File: The name of the file and its purpose
  • Author: Your name (so future readers know who wrote it)
  • Date: When you created or last modified the file
  • Description: What the page does and what HTML concepts it demonstrates

Example: Complete Documented HTML File

<!--
  File: alignment.html
  Author: John Doe
  Date: January 20, 2026
  Description: Demonstrates paragraph alignment (left, center, right, justified) and
  image placement in HTML. No CSS is used; only HTML attributes control layout.
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragraph Alignment - Lab 1</title>
</head>
<body>
    <!-- Main page heading -->
    <h1>Paragraph Alignment Demonstration</h1>

    <!-- Profile image placed on the right side of the page -->
    <img src="images/profile.jpg" alt="Profile image" width="220" align="right">

    <!-- Section showing different paragraph alignment styles -->
    <p align="left">This paragraph is left aligned and is the default alignment used in most web pages.</p>
    <p align="center">This paragraph is center aligned and is useful for titles and announcements.</p>
    <p align="right">This paragraph is right aligned and can be used for emphasis in specific layouts.</p>
    <p align="justify">This paragraph is justified so text stretches evenly between both margins, which gives a formal document-like appearance.</p>
</body>
</html>

Inline Comments for Major Sections

When code has distinct sections or performs specific tasks, add comments above each section:

<!-- Section 1: Header with navigation -->
<header>
    <h1>Welcome to Web Technology!</h1>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
    </nav>
</header>

<!-- Section 2: Student information and course details -->
<main>
    <section>
        <h2>Student Details</h2>
        <p>Name: John Doe</p>
        <p>Roll Number: MCA24001</p>
    </section>

    <!-- Section 3: Learning goals and outcomes -->
    <section>
        <h2>Learning Outcomes</h2>
        <ol>
            <li>Understand basic HTML structure</li>
            <li>Use semantic HTML elements properly</li>
            <li>Create valid HTML5 documents</li>
        </ol>
    </section>
</main>

<!-- Section 4: Footer with contact information -->
<footer>
    <p>Contact: student@galgotiacollege.edu</p>
</footer>

Best Practices for Comments

✓ Do: - Use comments for “why” the code is there, not just “what” it does - Keep comments short and clear - Update comments if you change the code - Comment complex or unusual HTML structures - Add file headers to every file

✗ Don’t: - Over-comment obvious code: <p>This is a paragraph</p> <!-- This is a paragraph --> - Leave outdated comments: they confuse readers - Use comments to disable code; delete it instead if you don’t need it

Example: Well-Documented File

Copy this template for your next HTML file:

<!--
  File: my-page.html
  Author: [Your Name]
  Date: [MM/DD/2026]
  Description: [Brief explanation of what this page does and what HTML concepts it uses]
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Page Title Here]</title>
</head>
<body>

    <!-- Major section: Header -->
    <header>
        [Header content here]
    </header>

    <!-- Major section: Main content -->
    <main>
        [Main page content here]
    </main>

    <!-- Major section: Footer -->
    <footer>
        [Footer content here]
    </footer>

</body>
</html>

Observation Questions

  1. Why is <!DOCTYPE html> required at the beginning of an HTML document?
  2. What is the difference between <ul> and <ol>?
  3. Why should every image include the alt attribute?
  4. Which text alignment is generally best for long-form content and why?
  5. What is the role of the meta viewport tag in modern web pages?

Viva Questions

  1. What is the purpose of the <head> section in HTML?
  2. What is the difference between semantic and non-semantic HTML tags?
  3. What does Live Server do in the development workflow?
  4. Why is UTF-8 character encoding commonly used?
  5. What is the advantage of using relative file paths?

Submission Requirements

What to Submit

Create a folder structure and include all the following:

[YourRollNumber]_Lab01_[YourName]/
│
├── index.html                    # Your HTML file
├── images/                       # Folder with images (if you used them)
├── Screenshots/                  # Folder with required screenshots
│   ├── 01-VSCode-setup.png
│   ├── 02-webpage-browser.png
│   ├── 03-devtools-open.png
│   └── 04-validated.png
│
├── Answers.txt                   # Answers to lab questions
├── BONUS_Challenges.txt          # Bonus challenges (if attempted)
│
└── README.txt                    # Project information

Screenshots Required

Take screenshots showing:

  1. VS Code Setup: Explorer with folder structure visible
  2. Webpage in Browser: Your HTML rendered in browser
  3. Developer Tools: DevTools open showing Inspector
  4. W3C Validation: Your HTML validation report (if completing Challenge 5)
Note

Use the Print Screen key or Shift+Print Screen to capture screenshots, then paste into Paint or Word.

README.txt Template

Lab 1: Development Environment Setup
=====================================

Student Name: [Your Full Name]
Roll Number: [Your Roll Number]
Email: [Your Email]

Date Completed: [MM/DD/2026]
Time Spent: [X hours Y minutes]

Environment Used:
- Operating System: [Windows/macOS/Linux]
- VS Code Version: [Check Help → About]
- Browser: [Chrome/Firefox/Edge/Safari]

Issues Encountered:
[Describe any problems and how you solved them]

Additional Notes:
[Any other relevant information]

Create ZIP File

  1. Compress your entire folder into a ZIP file
  2. Name it: [RollNumber]_Lab01_[YourName].zip
    • Example: MCA12345_Lab01_RahulKumar.zip

Submit

Warning

Due Date: January 28, 2026, 11:59 PM

Submit via: [Classroom Portal/Email] to prashantkumar.nag@galgotiacollege.edu

Grading Rubric

Your submission will be evaluated on the following criteria:

# Criteria Points Notes
1 Environment Setup 15 VS Code installed and configured properly with correct extensions
2 Extensions Installation 10 All 5+ required extensions installed and working
3 Project Structure 10 Proper folder organization (Labs/, Assignments/, etc.)
4 HTML File Creation 20 Valid HTML5 with all required content sections
5 Screenshots 15 All 4 screenshots clear and showing required elements
6 Lab Questions 15 All 7 questions answered completely and correctly
7 Bonus Challenges 10 Optional: Extra credit for attempting challenges
8 Submission Format 5 Proper ZIP naming and file organization
TOTAL 100

Grading Scale

  • 90-100: Excellent - Complete, well-organized, shows deep understanding
  • 80-89: Good - Complete with minor issues, solid understanding
  • 70-79: Satisfactory - Mostly complete, some gaps in understanding
  • 60-69: Needs Improvement - Significant issues or missing content
  • Below 60: Incomplete - Missing major components

Troubleshooting Guide

Encountering issues? Try these solutions:

Live Server Issues

Problem: “Live Server” option doesn’t appear in right-click menu

Solutions: 1. Make sure Live Server extension is installed (check Extensions) 2. Reload VS Code: Ctrl+Shift+P → type “reload window” → press Enter 3. Restart VS Code completely 4. Make sure you’re right-clicking inside an HTML file, not the folder

Problem: Page doesn’t update automatically when I save

Solutions: 1. Verify Live Server shows “Go Live” in status bar (means it’s running) 2. Check that “Format on Save” isn’t causing issues (temporarily disable) 3. Save with Ctrl+S explicitly 4. Hard refresh browser: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)

Problem: Can’t see changes in the browser even after refresh

Solutions: 1. Make sure you saved the file (check for white dot next to filename) 2. Hard refresh: Ctrl+F5 or Ctrl+Shift+R 3. Clear browser cache: Settings → Clear browsing data 4. Close and reopen Live Server

Extension Issues

Problem: Extensions not working after installation

Solutions: 1. Reload VS Code window (Ctrl+Shift+P → “reload window”) 2. Check that extension is Enabled in Extensions panel 3. Restart your computer 4. Uninstall and reinstall the extension

Problem: Prettier formatting makes code look weird

Solutions: 1. Press Ctrl+, to open Settings 2. Search “editor word wrap” 3. Set to “on” 4. Check Prettier settings: Search “prettier”

Developer Tools Issues

Problem: Developer Tools won’t open

Solutions: 1. Try: F12 key 2. Try: Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac) 3. Try: Right-click → “Inspect Element” 4. Restart browser completely

File Path Issues

Problem: “File not found” or browser shows blank page

Solutions: 1. Check file path in <img> tags uses forward slashes / 2. Use relative paths: images/photo.jpg (not C:/path/...) 3. Verify file exists in that location 4. Check spelling (case-sensitive on Linux/Mac)

Installation Issues

Problem: Can’t install VS Code (permission denied)

Solutions: 1. Run installer as Administrator (Windows) 2. On Mac: Drag to Applications folder (not a click and open) 3. On Linux: Use sudo apt install code after adding repository

Still Having Problems?

Warning

If none of these solutions work:

  1. Check the Logs:
    • VS Code: View → Output → Choose “Log” from dropdown
    • Look for red error messages
  2. Search Online:
    • Copy error message into Google
    • Try Stack Overflow: https://stackoverflow.com/
  3. Ask for Help:

Additional Resources

Here are excellent resources for learning more:

Official Documentation

HTML Learning

Browser Developer Tools

Validation & Best Practices

Course Resources

Questions & Support

Getting Help

Note

During Lab Sessions: - Ask your lab instructor directly - Clarify any part of these instructions - Work through issues together

Outside Lab: - Email your instructor: prashantkumar.nag@galgotiacollege.edu - Subject line: [BMC201] Lab 1: [Your Question] - Include: What you’re trying to do, error message, what you’ve tried

Course Forum: - Check the course discussion forum - Others may have had the same issue - Instructors monitor and respond

Office Hours: - Schedule a meeting with your instructor - Get personalized help - Discuss challenges or advanced topics

Providing Good Bug Reports

When reporting an issue, include:

  1. Your Environment: OS, VS Code version, extensions
  2. What You’re Trying to Do: Clear description
  3. What Happened: The error or unexpected behavior
  4. What You Expected: What should have happened
  5. What You’ve Tried: Solutions you’ve already attempted
  6. Screenshots/Logs: Error messages or screenshots

Example: “On Windows 10, Live Server doesn’t launch a browser. I’ve restarted VS Code and tried re-installing the extension. Error log shows: …”

Lab Summary

What You’ve Accomplished

Congratulations! In this lab, you’ve:

✅ Set up a professional development environment ✅ Installed and configured VS Code ✅ Added essential web development extensions ✅ Created proper project structure ✅ Written your first HTML5 page ✅ Learned to use browser Developer Tools ✅ Practiced debugging web pages

Next Steps

Lab 2 will build on this foundation: - Create more complex HTML pages - Use semantic HTML5 elements - Add multimedia (images, audio, video) - Create multi-page websites - Practice form creation

Keep your project folder organized and your code clean. Good habits now make advanced topics easier!

Lab Completion Checklist

Before submitting, verify you have:

Congratulations on completing Lab 1! 🎉

You’re now ready for Lab 2. Keep practicing and experimenting!