Programming Question

Forthisassignment,youneed to create an adaptive webpage by using BootStrap (version 5.x). Specifically, you need to create a one-page layout by adding your content and images. The topic of the webpage can be anything. You are prohibited from copying online content and using them as your own materials. When you use online content, you are required to rephrase them (use your own words). If you plan to add pictures downloaded on the Internet, you need to add copyright information on the webpage.

Procedures

You are allowed to use available Bootstrap templates or themes. But, in your one-page layout, four components need to be included (1) navigation bars (i.e., menu), (2) logo (either text or image logo), (3) body contents, and (4) footer. Your one-page layout must not have separate CSS or JavaScript files. Also, you must add your content and pictures. You must use BootstrapCDN (do not use separate CSS or JS files). BoostrapCDN information can be found at https://www.bootstrapcdn.com/ 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 (must be named “N0123456.html”) + pictures (only JPEG or JPG image file formats are allowed). Make sure each image does not exceed 1MB file size.

HINT

Using the templates listed below (or Bootstrap examples) is highly recommended. https://www.w3schools.com/bootstrap/bootstrap_templates.asphttps://www.w3schools.com/bootstrap/bootstrap_theme_band.asphttps://www.w3schools.com/bootstrap/bootstrap_theme_company.asphttps://www.w3schools.com/bootstrap/bootstrap_theme_me.aspPlease note that if you use the listed templates above, you do not need to worry about adding

BootstrapCDN to your webpage (already added in the template). Please note that you are not allowed to use online publicly available commercial templates.

If you use Bootstrap examples, you need to modify file links to BoostrapCDN information (see the detail in the lecture slide). On your page, you need to consider changing the color representations of the webpage. 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 separate explanation column located above or below the table (check the example at https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_bordered&stacked=h ). You need to create one HTML page (N0123456.html). Of course, N0123456 needs to be replaced with your student ID. (10%) You must add explanations to images and pictures. If you are using online photos, you need to include a copyright notification next to each image. Consider adding it in the figure caption. (10%) Examples: © 1996 Jane Doe © 2021 Washington Post, https://www.washingtonpost.com © 2021 AARP, https://www.aarp.org/travel/destinations/united-st… You must add explanations about the webpage, indicating what it is about. (10%) You must add a form (input form) to get the user’s feedback (must include three input boxes (for entering a name, email address, subject) and one Textarea box (for entering comments)). (10%) The page needs to have proper coloring. Inappropriate usage of color attributes causes point deductions. (10%) At least three images (or pictures) need to be added. Explanations about the pictures need to be added as captions located under the pictures. (10%) The page needs to support adaptability (changing the page layout depending on devices’ resolutions). (10%) The page needs to include one table with an explanation. The information in the table needs to be related to the page content (10%) You must create multiple HTML files. You must use BootstrapCDN. You must use JPEG image file format. Your used image size must not exceed 1MB (each). You must not use online commercial or publicly available templates. You must use Bootstrap version 5.x.

Zip all the files (N0123456.html with necessary jpeg files) (ex, N0123456.zip).

Assignment 02 – Create an adaptive webpage layout
For this assignment, you need to create an adaptive webpage by using BootStrap (version 5.x). Specifically, you
need to create a one-page layout by adding your content and images. The topic of the webpage can be anything.
You are prohibited from copying online content and using them as your own materials. When you use
online content, you are required to rephrase them (use your own words). If you plan to add pictures downloaded on
the Internet, you need to add copyright information on the webpage.
•
•
•
•
•
•
•
•
•
•
•
•
•
Procedures
You are allowed to use available Bootstrap templates or themes. But, in your one-page layout, four components
need to be included (1) navigation bars (i.e., menu), (2) logo (either text or image logo), (3) body contents, and (4)
footer. Your one-page layout must not have separate CSS or JavaScript files. Also, you must add your content and
pictures.
You must use BootstrapCDN (do not use separate CSS or JS files).
• BoostrapCDN information can be found at https://www.bootstrapcdn.com/
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 (must be named “N0123456.html”) + pictures (only JPEG or JPG
image file formats are allowed). Make sure each image does not exceed 1MB file size.
HINT
Using the templates listed below (or Bootstrap examples) is highly recommended.
• 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
• Please note that if you use the listed templates above, you do not need to worry about adding
BootstrapCDN to your webpage (already added in the template). Please note that you are not allowed to use
online publicly available commercial templates.
• If you use Bootstrap examples, you need to modify file links to BoostrapCDN information (see the detail in
the lecture slide).
On your page, you need to consider changing the color representations of the webpage. 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 separate explanation column
located above or below the table (check the example at
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_bordered&stacked=h ).
Grading policy
Overall Score: 60pts
You need to create one HTML page (N0123456.html). Of course, N0123456 needs to be replaced with your student
ID. (10%)
You must add explanations to images and pictures. If you are using online photos, you need to include a copyright
notification next to each image. Consider adding it in the figure caption. (10%)
• Examples:
• © 1996 Jane Doe
• © 2021 Washington Post, https://www.washingtonpost.com
• © 2021 AARP, https://www.aarp.org/travel/destinations/united-states/washington-dc/
You must add explanations about the webpage, indicating what it is about. (10%)
You must add a form (input form) to get the user’s feedback (must include three input boxes (for entering a name,
email address, subject) and one Textarea box (for entering comments)). (10%)
The page needs to have proper coloring. Inappropriate usage of color attributes causes point deductions. (10%)
•
•
•
At least three images (or pictures) need to be added. Explanations about the pictures need to be added as captions
located under the pictures. (10%)
The page needs to support adaptability (changing the page layout depending on devices’ resolutions). (10%)
The page needs to include one table with an explanation. The information in the table needs to be related to the page
content (10%)
•
•
•
•
•
•
Huge point deductions
You must create multiple HTML files.
You must use BootstrapCDN.
You must use JPEG image file format.
Your used image size must not exceed 1MB (each).
You must not use online commercial or publicly available templates.
You must use Bootstrap version 5.x.
Submission Guideline
Zip all the files (N0123456.html with necessary jpeg files) as your student ID.zip (ex, N0123456.zip). If you do not
follow this instruction, point deduction will be applied.
CAUTION: Copying online or someone’s materials (including contents) is prohibited (turns to zero scores).