Assignment 5
Add a new page to your existing website with bootstrap styling. You have total freedom over the page format and content.
Required Knowledge & Skills
- SublimeText 3 (Optional)
- Bootstrap
Assignment Instructions
Create a new page alongside the web pages created before. You do not need to modify any of the previous webpages.
Refer to the Bootstrap website for examples
Note: For this assignment, all CSS styles will be in the external CSS file unless specified otherwise.
Submission - Add your folder (with all the html/css/image files) in a zip file. Upload this zip file to Blackboard (You can attach files in your submission)
Refer to the Bootstrap website for examples
Note: For this assignment, all CSS styles will be in the external CSS file unless specified otherwise.
- Title of the page should be- "Assignment 5 - [Username]" (5 points)
- Include Bootstrap 4 in the new webpage using CDN (5 points)
- Create a navigation bar using the Bootstrap navbar. It should link to the other 2 pages from the previous assignments. The name of your webpage should be on the left. Refer to the image below for the exact layout.(15 points)
- Create a full width banner, just below the navbar. Refer to the image below for a sample layout. (10 points)
- Create an image gallery:
- The gallery should have at least 3 images using the bootstrap "img-thumbnail" class. (10 points)
- The images should be in a responsive bootstrap grid, such that each image occupies 12 columns in small screens and 4 columns in large screens. (10 points)
- Create another bootstrap grid, with 2 rows and 4 columns. Fill it with HTML elements(lists, images, text etc.) of your choice. Each column should occupy:(15 Points)
- 3 units for 'md' and 'lg' sizes.
- 6 units for 'sm'
- 12 units for 'xs' size
- Use the container class to add at least 2 paragraphs. Override the CSS for these containers to have a border, and some background color. (10pts)
- Now that we are using bootstrap, pay attention to the aesthetic of the website. Use appropriate layouts, fonts and colors. (10pts)
- All of the above are the minimum requirements. Explore and add additional Bootstrap element(s) of your choice. (10pts)
- Indent the CSS and HTML code correctly as shown in class. (5pts penalty for unindented code)
Submission - Add your folder (with all the html/css/image files) in a zip file. Upload this zip file to Blackboard (You can attach files in your submission)
Grading Rubric as specified in instructions | Submission Instructions
Total Number of Earnable Points: 100 Points
Approximate Time to Complete: 4 Hours
Due Date: see Syllabus or Blackboard
Approximate Time to Complete: 4 Hours
Due Date: see Syllabus or Blackboard