Your next assignment is to work through the Bootstrap tutorial on W3Schools.com and create a website using the bootstrap platform. Follow the tutorial, or follow along with the class to create an example, then create a compelling website utilizing the bootstrap framework. Bootstrap is the most popular HTML, CSS and Javascript framework being used to develop responsive and mobile friendly websites. Bootstrap is completely free and open source!
 |
| Our own schsdigitalmedia.com website was created using the bootstrap frame work to provide flexibility and ease of use for users from mobile devices, tablets, etc. |
Assignment: After working through the bootstrap tutorial below, create a single/multi page website about a subject of your choice, you could create a website for a class project, document something you created or participated in, etc. Think about how this project could be used to your benefit (book report, etc). You can document your favorite hobby, band, sports, celebrity, movie, video game, etc.
Bootstrap Page Assignment Specs:
- Single scrolling or multiple page website, subject is your choice
- Website should be complete with information, photos or gif's, content (150 words minimum), links, resources etc
- Website must be built with bootstrap frame work, be free of glitches or errors and function correctly when uploaded to server
- Website must contain menu at top of page for navigation
- Website must contain 1 external link
- Website must contain credit with link to your email at bottom of page or contained in an "about" or "contact" section (this page created by "insert name") with email hot-linked
- Website must be free of errors or bugs, broken links etc...
- Final website displays good use of typography, color palettes and shows understanding of the elements and principles of design
Tutorial: Read through the bootstrap tutorial... try out each step and create your own gallery page that demonstrates the following bootstrap elements:
- Bootstrap CSS Basic Text
- Bootstrap CSS Buttons
- Bootstrap CSS Forms
- Bootstrap CSS Helpers
- Bootstrap CSS Images
- Bootstrap CSS Tables
- Bootstrap Components Glyphs
- Bootstrap Components Dropdowns
- Bootstrap Components Navs
Download and Modify Bootstrap to Customize your Template:
Want to change the colors of your template? Download bootstrap and re-link your html file to the downloaded bootstrap CSS file. Click the following link and un-zip the contents into your project folder. Change the bootstrap link code to embed the local bootstrap resource instead of using the online resource.
Link: Download Bootstrap
Customize Your Bootstrap Colors:
Want to change the color scheme of your template? Check out the link below, you can upload a photo and create a color scheme, or choose one of their pre-made ones. Copy-paste the CSS into the bootstrap.min.css file.
Link: Custom Color Scheme's for Bootstrap
 |
| Custom palette on my sample bootstrap page. |
