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