Bootstrap This! Exercises
Objective
Use what you have learned about Bootstrap framework and to create a one page web site touting the benefits of using Bootstrap.
Requirements
The following requirements must be met in order to complete the assignment successfully:
- The web site should share the features and benefits of using Bootstrap. It should include examples of Bootstrap components and/or utilities and instructions on how to use Bootstrap.
- The web site must be built using the Bootstrap framework.
- The web site must ONLY use the Bootstrap classes. No custom CSS can be used.
- The web site must use the Bootstrap grid.
- The web site must include Bootstrap navigation.
- The web site must use additional Bootstrap components (e.g. Buttons, Cards, Jumbotron, etc)
- The web site must be optimize for all screen sizes.
- The completed version of the web site will be published to your GitHub Pages site.
Content
Each student is responsible for creating their own content for the site and the content will be graded. The following sample content is intended to give students a starting point, but students will need to add their own content as well.
NOTE
Student will need to create additional content in order to successfully complete the assignment.
SAMPLE
About Bootstrap
Open Source
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Mobile First
Bootstrap includes a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Components Library
Bootstrap comes with an extensive components library that includes buttons and lists to carousels and modals. Components are easy to integrate into any site and require no knowledge of JavaScript to use.
Components
Bootstrap comes with nearly two dozen components that are ready to use right out of the box.
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Breadcrumbs
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
List group
List groups are a flexible and powerful component for displaying a series of content.
Resources
The following is a list of the resources that can be used to help with this assignment.
- Bootstrap Documentation
- Bootstrap Color Utilities
- Bootstrap Spacing Utilities
- Bootstrap 4 Essential Training | LinkedIn Learning
Rubric
| Criteria | Excellent | Satisfactory | Marginal | Unsatisfactory |
|---|---|---|---|---|
| 20 Points | 15 Points | 12 Points | 9 Points | |
| Layout & Design | The site showed excellent design appeal and functionality across all screens. | The site was well optimize for multiple screen sizes but was lacking in design appeal. | The site was only partially responsive and was lacking design appeal. | No meaningful attempt was made to create a responsive layout or a well designed site. |
| 20 Points | 15 Points | 12 Points | 9 Points | |
| Bootstrap | The use of the Bootstrap framework showed an excellent understanding of the Bootstrap Grid, Navigation and Components. | The use of the Bootstrap framework showed an understanding of the Bootstrap, but did not meet all of the requirements. | The use of the Bootstrap framework showed a lack understanding of the Bootstrap and did not meet all of the requirements. | The site did not use Bootstrap at all. |
| 10 Points | 7 Points | 4 Points | ||
| Content | The content was thoughtful and informative and shows and understanding of the topic. | The content was lacking and/or did not meet all of the requirements. | The content was inadequate and / or showed a lack of understanding of the topic |
Maximum Points: 50
Submission
This project and all of it assets should be published to your GitHub paging site. The URL to the live version of the project should be submit to the Bootstrap This! assignment on BrightSpace.