LAB ACTIVITY 1B Duration: 3 Hours

Introduction to Development Environment & Bootstrap (Create HTML + Insert CDN Yourself)

This lab guides students to create a basic HTML page first, then integrate Bootstrap via CDN, and finally 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
  • CDN allows Bootstrap to be used without downloading files.
  • Bootstrap has two main parts:
    • CSS for styling (via <link>)
    • JS bundle for interactive components (via <script>)
  • If the styling does not change, the common causes are: Internet issues, incorrect CDN links, or the file was not saved/refreshed.

Steps (Complete Step-by-Step)

Step 1

Create Project Folder

Create a folder named:

RegNo_Date
Example: 10DDT23F1705_17082025
Step 2

Create index.html

Open VS Code / Notepad++. Create a new file → save as index.html in the folder.

Step 3

Write Basic HTML (Without Bootstrap)

Type the code below. Replace xxx with your full name. Save the file. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic HTML</title>
</head>
<body>
  My name is xxx
</body>
</html>
Step 4

Run in Browser + Screenshot (Basic HTML)

Open index.html in the browser. Take a screenshot showing:

  • Text: "My name is …"
  • Browser tab title: "Basic HTML"
  • Space for Screenshot: (Paste here in your lab report)
Step 5

Insert Bootstrap CDN (CSS + JS)

Open back index.html.

Add this inside <head> (Bootstrap CSS):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

Add this before </body> (Bootstrap JS bundle):

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
Step 6

Update Body Content (Bootstrap Layout Test)

Replace the content inside <body> with:

<div class="container text-center mt-5">
  <h1 class="text-primary">Hello, Bootstrap!</h1>
  <p class="lead">This is my first web page with Bootstrap.</p>
</div>

Save → refresh browser → screenshot output.
Space for Screenshot: (Paste here in your lab report)

Step 7

Add Bootstrap Components (Button + Navbar + Card)

Under the existing content (or replace body fully), add this:

<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>
Step 8

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 9

Final Step: Submission

Ensure all tasks and screenshots are complete, then zip your project folder.

  • 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.