First Bootstrap Assignment

This assignment can be completed using either Bootstrap 3 or Bootstrap 4

Bootstrap 3 instructions

  1. Create a hw8 folder. This folder should contain all files for this assignment.
  2. Create an html file and save it to your folder.
  3. Insert a Bootstrap component into an html page. You may do this one of two ways:
    1. in Dreamweaver (Insert>Bootstrap Component - if you are in Design view, you will be prompted to switch to Live View and then repeat Insert>Bootstrap Component)
    2. Copy the basic template code from https://getbootstrap.com/docs/3.3/getting-started/ into your html page. Then copy the Bootstrap component code (for whichover component you choose) from https://getbootstrap.com/docs/3.3/components/ into your web page.
  4. Bootstrap 4 changes - "Dropped panels, thumbnails, and wells for a new all-emcompassing component, cards. ... Dropped the pager component" (from https://v4-alpha.getbootstrap.com/migration/ )- Since these components are dropped in Bootstrap 4, why learn how to use them now? Pick another component instead.
  5. The html page can reference Bootstrap and jQuery files on a CDN (content delivery network, e.g. those referenced at https://getbootstrap.com/docs/3.3/getting-started/#download-cdn ) or files within the folder (created by Dreamweaver or files you have downloaded from https://getbootstrap.com/docs/3.3/ and
    https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0)
  6. View the page in Chrome and right-click and choose Inspect>Console to make sure you aren't getting any errors.
  7. If your component requires multiple pages to indicate that it is functioning properly (e.g. if you choose a navbar), create these multiple pages.
  8. When the html page is viewed in the browser, it should indicate the following:
    1. the name of the component and any option you have chosen
    2. Briefly describe how the component functions. This can be a non-technical explanation, for example, "it changes color when one cursors over the component and changes back to the original color when the cursor is off the component"
    3. Whether the Bootstrap and jQuery files are being accessed on a CDN or they are in the hw8 folder.
  9. Upload your hw8 folder to the student server and submit the URL through Blackboard against the assignment. If you are using Bootstrap or jQuery files that you have downloaded or that were created by Dreamweaver, make sure to upload them as well.

Bootstrap 4 instructions

  1. Create a hw8 folder. This folder should contain all files for this assignment.
  2. Create an html file and save it to your folder.
  3. Insert a Bootstrap component into an html page. :
    1. Copy the basic template code from https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template into your html page. Then copy the Bootstrap component code (for whichover component you choose) from https://getbootstrap.com/docs/4.0/components/alerts/ into your web page. You will not be able to insert a Bootstrap 4 component in Dreamweaver (Insert>Bootstrap Component) because Dreamweaver currently inserts only Bootstrap 3 components).
  4. The html page can reference Bootstrap and jQuery files on a CDN (content delivery network) (e.g. those referenced at https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrap-cdn) or files within the folder (files you have downloaded from https://getbootstrap.com/docs/4.0/getting-started/download/ (Compiled CSS and JS section) and
    https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0) - since you are using Bootstrap 4, which does not support Internet Explorer 9, you should choose a jQuery 2 or later since those files are smaller than the jQuery 1 files.
  5. View the page in Chrome and right-click and choose Inspect>Console to make sure you aren't getting any errors.
  6. If your component requires multiple pages to indicate that it is functioning properly (e.g. if you choose a navbar), create these multiple pages.
  7. When the html page is viewed in the browser, it should indicate the following:
    1. the name of the component and any option you have chosen
    2. Briefly describe how the component functions. This can be a non-technical explanation, for example, "it changes color when one cursors over the component and changes back to the original color when the cursor is off the component"
    3. Whether the Bootstrap and jQuery files are being accessed on a CDN or they are in the hw8 folder.
  8. Upload your hw8 folder to the student server and submit the URL through Blackboard against the assignment. If you are using Bootstrap or jQuery files that you have downloaded or that were created by Dreamweaver, make sure to upload them as well.

Revised: November 15, 2017