Description
Objective: The objective of this exercise is to:
1. Learn and implement Bootstrap responsive library
2. Work on good looking web pages
Submit: screenshots, your word document, html file (with .html extension), css file and a link
to your web page
You may discuss the concepts with your fellow students
Part #1: Bootstrap Tutorial
Estimated time: 30 minutes
Option 1: W3Schools Tutorial
Exercise: Use the class PowerPoint and getbootstrap.com as reference material.
Use the W3 schools bootstrap tutorial to feel comfortable with the concepts.
https://www.w3schools.com/bootstrap4/
1. Review the bootstrap information
2. Make sure you understand enough to implement the assignment
3. 3 screen grabs showing tutorial
Option 2: You are already an expert
Exercise: If you are already an expert – then write me a paragraph explaining what you
have done which made you an expert. I enjoy these – make it good.
Part #2: Create a gridded web page
Estimated time: 30 minutes
Exercise:
Create a web page using bootstrap (start with the template
below)
Page 1 of 3
CSE383 Lab #6 Responsive/Bootstrap
<!doctype html>
Hello, world!
Page 2 of 3
CSE383 Lab #6 Responsive/Bootstrap
Create a web page with three rows
Row1
o Column of width 3
Paragraph of text
o Column of width 5
Picture (100 X 150) with caption
o Column of width 4
Paragraph of text
Row 2
o Column of width 8
Paragraph of text
o Column of width 4
Picture (200 X 200) with caption
Row 3
o Column of width 8
Paragraph of text
o Column of width 4
Picture (300 X 300) with caption
Verify that it degrades nicely
Screen grab full size (shrink page if needed for
picture)
Screen grab at half size
Screen grab at phone width
SUBMIT:
Screenshots
o Three screenshots showing web page at full size, half size and
phone (smallest possible width)
o Tutorial or expert paragraph
File
o Attach the html file
Paste the URL to your page into the submission as a comment
o Note: use https://ceclnx01.cec.miamioh.edu as the base address
Page 3 of 3