For this assignment, you need to create an adaptive webpage by using BootStrap. Specifically, you need to consider creating a single-page layout by adding your contents and images. The topic of the webpage can be anything. You are not allowed to copy online contents and use them as your materials. When you reference online contents, you are required to rephrase them (or use your own words). If you are using pictures on the Internet, you need to add copyright information.

Procedures

• You are allowed to use known templates or themes (the layout must be designed with having Navbars, logos, body contents, and footer). However, it must be one-page layout (no separate CSS or JavaScript files). Also, you must add your contents and pictures.
• You must use BootstrapCDN (do not use separate CSS or JS files).
• Additionally, you must add at least one table with an explanation. Please note that the content of the table needs to be somewhat closely related to the webpage.
• Your final result needs to have one HTML page (named as N00278895.html) + pictures (the only JPEG or JPG are allowed).

HINT

• Using the templates appeared in the following websites are recommended. If you are using the templates, you do not need to worry about adding BootstrapCDN in your webpage (already added in the template).
  • https://www.w3schools.com/bootstrap/bootstrap_templates.asp
  • https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp
  • https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
  • https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp
• When you use templates, you need to change color representations of the webpage (by applying your own color attributes). For choosing a color combination, you can reference the website (http://colorbrewer2.org/)
• For adding a table, reference the slide or the webpage (https://www.w3schools.com/bootstrap/bootstrap_tables.asp )
• For adding an explanation about the table, you can consider adding a caption or a separated explanation column located above the table.

Grading policy

• You need to create one HTML page (N00278895.html). Of course, N00278895 needs to include this as student ID. (5pt)
• Adding pictures as well as the explanations for them. If you are using someone’s pictures, you need to include copyright notification. (5pt)
• The page needs to have a proper coloring. (5pt)
• At least three pictures need to be added in the page. Their captions (or explanations) need to be added as well. (5pt)
• The page needs to support the adaptability (5pt)
• The page needs to include one table with an explanation. (5pt)

Huge Deduction

• If you created multiple HTML files (- 15pt)
• If you did not use BootstrapCDN (-10pt)
• If you used other image file formats (other than jpeg) (-5pt)

Submission Guideline

Zip all the files (N0123456.html with necessary jpeg files) as your student ID.zip (ex, N0123456.zip). If not, -2pt is applied.

CAUTION: Copying online or someone’s materials (including contents) is prohibited (turns to zero scores).