Bootstrap Project

revised 12/4/2017, check back for any revisions

General requirements for project

• Topic - anything you choose
• You must use Bootstrap
• root directory: bootstrap
• you can either put the necessary bootstrap css, jQuery, and bootstrap.js files in your bootstrap folder (using css, fonts, and js folders) or use CDNs, or a combination; you can use the regular or the minified version
• you may use Dreamweaver if you like
• HTML
  • four files minimum
  • Use CSS rather than deprecated/obsolete tags and attributes
  • have the necessary !doctype, html, head, title, and body tags in the proper places
  • the filename of the first page of your site (usually the home page) should be index.html or index.htm or some other name so that the server will send the page when a URL without the file name is entered in the browser
• Image files:
  • You must use at least 4 image files. They can be used as inline images or as background images
  • You may use an image file in more than one place. For example, if you have an image named turtle.jpg, you may use this on all the pages, for example as a background image in the footer. This counts as 1 image.
  • If you take an image file from another site, specify in HTML comments near the img tag (or near the specification of the background image using CSS comments) the exact URL of the image from the other site (e.g. saying Google Images is not sufficient) - it must be clear which image is taken from which site.
  • If you are using an image from another site, the proper approach is to save the file to your site and the image reference (e.g. in the src attribute) will then be a relative reference to the file on your site; do not use an absolute reference to the image on the other site (two reasons: the image will disappear from your site if the other site renames, moves or removes the image, and the absolute reference to the other site imposes a small cost on that site)
  • If the image was created by you or someone you know, either in a graphics program or by taking a picture, indicate that in HTML comments.
  • You should not resize images using either HTML attributes or CSS; if you need to resize, do it in a graphics program
  • The image should be responsive, e.g. by adding a class="img-responsive" to the img tag - see the example at https://www.w3schools.com/bootstrap/bootstrap_images.asp
  • Specify an appropriate value for the alt attribute for all non-trivial images
• CSS: use bootstrap.css or the minified version
  • if you choose to add some custom CSS, create your own CSS file, separate from bootstrap.css
  • the link to the custom style sheet must go below the link to the bootstrap.css so that it overrides the bootstrap css file where there is a conflict
  • use CSS for layout rather than tables or a linear layout (a linear layout is one that can be achieved without the use of tables or CSS)
  • do not use inline or embedded styles
• Text
  • Try to write your own text. You may use limited text from elsewhere, if you indicate (e.g. in HTML comments) the exact URL of the place where you got the text; e.g. don't just say Wikipedia - it must be clear what text is taken from what site
  • Have sufficient contrast between text and background so that your text (including visited and unvisited links) is easily readable
• Responsiveness
  • Site must be responsive
  • In other words, the layout changes at least once depending upon viewport size: xs, sm, md, lg (Bootstrap 3) or col, sm, md, lg, xl (Bootstrap 4)
  • use bootstrap grid-based classes to do this
  • you may, but need not, specify multiple classes for a particular element so that the layout changes at multiple breakpoints. I may give extra credit for this.
• Bootstrap components - four are required: You can pick which ones. I may give extra credit for additional ones
  • What is a component? - see the list at http://getbootstrap.com/components/ or https://www.w3schools.com/bootstrap/default.asp (the links on the left from Typography through Affix) or the list in Dreamweaver from Insert>Bootstrap Components. Several of these relate to forms so use of the multiple form-related ones will count as 2.
  • The components should enhance the look or operation of the site and be integrated into the site. For example, if you use a navbar, all the navbar links must work and the navbar must be present on every page..
    • If you use a navbar, you may want to make it responsive, so it changes to a "hamburger" icon when the viewed on a mobile device (see the last example at https://www.w3schools.com/bootstrap/bootstrap_navbar.asp )
• Approach
  • Before you do any coding, plan your site -
    • what content will be on each page
    • what layout would you like for the pages
    • what Bootstrap components you might like to use and where
  • Rather than use some predefined Bootstrap template, try to build your own - do one of these examples to give you an idea of how to do this - Note these examples use embedded and/or inline styles, use an external stylesheet instead
    • https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp
    • https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    • https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp

Submission

• Attach a file to your submission which indicates (1) which Bootstrap components you used and on which pages, (2) what the component does, and (3) explain any customization you made for the component
• FTP the bootstrap directory to the student server
• On Blackboard, submit the URL to your bootstrap directory - do not submit a URL that references the c drive or another drive, the Desktop or My Documents

Due Date

• December 13
• 2 point deduction for every day after that, projects may not be accepted after Sunday, December 17 since grades must be filed no later than Tuesday, December 19
• 1 point credit for every day early (maximum of 5 points)