LAB ACTIVITY 1A Duration: 2 Hours

Introduction to Development Environment & Bootstrap

This lab guides students to set up a local web development project, run a basic HTML page in a browser, integrate Bootstrap via CDN, and apply basic Bootstrap components (Button, Navbar, Card).

Back to Topic Jump to Steps

Learning Outcomes

By the end of this lab session, students should be able to:

  • Set up a local web development project.
  • Create and run a basic HTML page in a browser.
  • Integrate Bootstrap via CDN.
  • Use basic Bootstrap components (Button, Navbar, Card).

Hardware / Software

  • Computer with Internet access
  • Text Editor: Visual Studio Code / Notepad++
  • Browser: Chrome / Edge / Firefox

Important Notes

Read First
  • Local project refers to a folder that stores your web files (HTML/CSS/JS) and can be opened directly in a browser.
  • CDN (Content Delivery Network) hosts libraries such as Bootstrap. You load Bootstrap via Internet using <link> (CSS) and <script> (JS), so you do not need to download the files manually.
  • On the first run, Internet is required to load Bootstrap from the CDN. After that, browser caching may help pages load faster.

Steps (Complete Step-by-Step)

Step 1

Create Project Folder

Create a folder named:

RegNo_Date
Example: 10DIT23F1705
Step 2

Create index.html

  1. Open VS Code / Notepad++.
  2. Create a new file.
  3. Save it as index.html inside the project folder.
Step 3

Copy & Paste Full HTML Template

Copy all code below and paste into index.html. Replace xxx with your full name. Save the file. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LAB 1A - Bootstrap Starter</title>

  <!-- Bootstrap CSS (CDN) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div class="container text-center mt-5">
    <h1 class="text-primary">Hello, Bootstrap!</h1>
    <p class="lead">My name is xxx</p>
  </div>

  <div class="container mt-4">

    <button class="btn btn-success">Click Me</button>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">MySite</a>
      </div>
    </nav>

    <div class="card mt-3" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">My First Card</h5>
        <p class="card-text">This is an example Bootstrap card component.</p>
        <a href="#" class="btn btn-primary">Learn more</a>
      </div>
    </div>

  </div>

  <!-- Bootstrap JS Bundle (CDN) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 4

Run in Browser + Screenshot

Right-click index.html → Open with → Chrome / Edge / Firefox.

  • Ensure Button, Navbar, and Card are visible
  • Ensure browser tab title is visible
Step 5

Final Step: Submission

Right-click index.html → Open with → Chrome / Edge / Firefox.

  • Ensure all tasks and screenshots are complete.
  • Zip your project folder.
Upload the .zip file to CIDOS (submit to your respective lecturer).
Ensure the submission is completed before the deadline set by your lecturer.