Scribd
Upload
42 views1 page

Lab Sheet - 01

This lab sheet outlines tasks for students to design a simple webpage using HTML and Bootstrap framework. The tasks include adding basic HTML structure, linking Bootstrap CSS and JS files, and using Bootstrap classes to style headings, paragraphs, navigation bars, and grids. The final task asks students to create their own webpage presenting information about a hobby or sport using HTML elements and Bootstrap classes.

Uploaded by

Sabesan Goby
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views1 page

Lab Sheet - 01

This lab sheet outlines tasks for students to design a simple webpage using HTML and Bootstrap framework. The tasks include adding basic HTML structure, linking Bootstrap CSS and JS files, and using Bootstrap classes to style headings, paragraphs, navigation bars, and grids. The final task asks students to create their own webpage presenting information about a hobby or sport using HTML elements and Bootstrap classes.

Uploaded by

Sabesan Goby
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

CST 226-2 Web Application Development

Lab Sheet – 01
Lab Sheet Title: Designing a web page using HTML and Bootstrap
Lab Objective:
The objective of this lab is to recall the students’ knowledge about the basics of HTML and
Bootstrap framework. Students will refresh their memory about how to create a simple
webpage using HTML and style it using Bootstrap classes.
Equipment/Software:

• Text editor (e.g. Notepad++) or IDE


• Web browser (e.g. Google Chrome, Mozilla Firefox)
Lab Tasks:

• Task 1: HTML Basics


o Create a new HTML file called index.html
o Add the basic HTML structure to the file
o Add a heading and paragraph to the page
o Save and view the page in a web browser
• Task 2: Bootstrap Setup
o Download the Bootstrap framework from getbootstrap.com
o Extract the files and add the CSS and JS files to the HTML file
o Add the Bootstrap meta tags to the HTML file
o Save and view the page in a web browser to verify the Bootstrap setup
• Task 3: Bootstrap Classes
o Use Bootstrap classes to style the heading and paragraph added in Task 1
o Add a navigation bar to the page using Bootstrap classes
o Add a responsive grid layout to the page using Bootstrap classes
o Save and view the page in a web browser to verify the Bootstrap classes
implementation
• Task 4: Exercise
o Create a webpage using Bootstrap classes to display information about your
favorite hobby or sport
o Use headings, paragraphs, images, and other HTML elements to present the
information
o Apply Bootstrap classes to style the page and make it responsive
Additional Notes:

• You can use following CDN when adding bootstrap styles into your web page.
o https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

You might also like