Bootstrap Project

revised 4/24/18 3pm regarding the minimum 5 page restriction

Please hit REFRESH every time you view this. As students ask me question, I will post clarifications and change the revision date above.

The content and images you create must be 100% your own work.
If you use content you have not created, your grade will be 0.
If you use images you have not created, your grade will be 0.

Do not wait until the last moment to do it. You will have to FTP your work to a server, so if you had difficulty with this in the "About Me" assignment, make sure you get the FTP working as one of the initial steps in working on the project.

Website Project

Do a website according to the specifications below. Since it is a small website, usually every page will link to every other page, unless you want the visitors to go through the site in a particular order.

Topic

• anything you choose
• remember you must take or create your own images, so that might affect which topic you choose

General requirements for project

• You must use Bootstrap 4
• you can either put the necessary bootstrap css, jQuery, and bootstrap.js files in your bootstrap folder (using css and js folders) or use CDNs, or a combination; for bootstrap.css, use the regular, not the minified version.
• you may use Dreamweaver if you like - remember that if you are using a Dreamweaver trial version, it will be Dreamweaver CC2018 where in the classroom or in the open lab, it is Dreamweaver CC2017. In Dreamweaver CC2018, Insert>Bootstrap Components will use Bootstrap 4 where in Dreamweaver CC 2017, Insert>Bootstrap Components will apparently use Bootstrap 3 unless you are already using one of Dreamweaver's Bootstrap Starter Templates. .
• HTML
  • five files minimum, although something like the Band template at  https://www.w3schools.com/bootstrap/trybs_theme_band_full.htm, when if one clicks on links, the page scrolls to that section of the html file rather than going to a separate html page, would meet the 5 page requirement.  Each section would have to fill up the entire screen and thus be like a page, even though it's not a separate html file.
  • 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 5 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.
  • The image should be responsive, e.g. by adding a class="img-fluid" to the img tag - see the example at https://www.w3schools.com/bootstrap4/bootstrap_images.asp
  • Specify an appropriate value for the alt attribute for all non-trivial images
• CSS: use bootstrap.css (not 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
  • do not use inline or embedded styles
• JavaScript: use jQuery.js, popper.js, and bootstrap.js
• Text
  • Write your own text.
  • Have sufficient contrast between text and background so that your text (including visited and unvisited links) is easily readable
  • Unlike the myself assignment, there is no minimum amount of text you need to have on each page.
    
• Responsiveness
  • Site must be responsive
  • In other words, the layout changes at least once depending upon viewport size
  • bootstrap grid-based classes are used to do this
  • you may, but need not, specify multiple classes for a particular element so that the layout changes at multiple breakpoints.
• Bootstrap components - At least five are required: You can pick which ones.
  • What is a component? - see the list at https://getbootstrap.com/docs/4.1/components/alerts/ , or https://www.w3schools.com/bootstrap4/default.asp, or the list in Dreamweaver CC 2018 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 )
• Bootstrap templates - You can use or modify a Bootstrap template if you like or create your own layout - some examples of Bootstrap templates you can use can be found at Bootstrap Template Examples
• 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
• Get creative! Have fun!

Submission

• Submit one text file in Blackboard in which you state, when, where, and how you created each of the images
  • list each image file by name, following by when, where and how you created that particular images file
  • Example: kitchen.jpg: I took this phone on November 26, 2017 in my kitchen using my iphone camera
  • Another example: monastery.png: I took this phone in July 2016 in Barcelona, Span by using my brother's Nikon camera
  • Another example: pizza.gif I created this image on November 15, 2016using the Microsoft Paint program.
• The text file should also indicate which (1) which Bootstrap components you used and on which pages, (2) what the component does, and (3) briefly explain any customization you made for the component
• The text file should indicate whether you used a Bootstrap template or modified one - if so, provide the exact URL of the template.
• Zip the directory and attach it to Blackboard. Name the zip file with your first and last name, e.g BarackObama
• FTP the (unzipped) bootstrap directory to the server - Make sure the URL works and pages display as intended
• On Blackboard, submit the URL to your bootstrap directory on the server - do not submit a URL that references the c drive or another drive, the Desktop or My Documents

Presentation

• You are required to present your site to the class.
• There are no required topics to cover in your presentation. Some possible things to cover might be some of the following. These are only ideas, feel free to deviate.
  • Why did you choose the topic of your website?
  • Are there any special features or components of your website that you would like to mention?
  • What did you learn from doing the website?
  • What (if anything) was fun in doing the website?