In this class…
Today we’ll be learning the basics of Bootstrap, a front end framework that will allow you to build beautiful, responsive websites with HTML/CSS/JavaScript without coding from scratch.
- validation
- class & id styles in CSS
- DIVs & SPANs
- positioning
- tables
[icon size=”tiny” image=”icon-cloud-download”] Customize & download Bootstrap
[icon size=”tiny” image=”icon-cloud-download”] Download Simple CSS
Homework
- Watch the Coder’s Guide “Bootstrap 3 Responsive Tech Site” series for step-by-step tutorial
- Choose a reading from the list for your presentation (dates for presentations will be March 12, 19 & 26)
Bootstrap Project
Process
Re-create your alter ego museum website with Bootstrap. Or, if you are bored with that, create a portfolio site for yourself using Bootstrap!
- You may use a Bootstrap theme but be sure to make it your own by changing the default settings. If you use a custom theme, include a copy of the original theme you downloaded so I can compare it against the one you modify.
- Have an index (home) page and 4 additional pages.
- Have a top navigation menu with at least one dropdown menu.
- Have a footer with a copyright line and a button that goes to an external link.
- Each page must have at least one photo. Use your own photos for the main images! Background or supplementary images can come from the internet.
- Each page must have at least a paragraph of relevant text.
Remember:
- Each file must be named meaningfully. Don’t use upper case when you name your files or images.
- Each page must be titled meaningfully.
- Each page must have a link back home
- Each page must have at least one image, sized appropriately for web use.
- Each page must have at least one paragraph of copy describing the photo(s).
- Additional pages must appear in a separate folder called “pages”, images must appear in a separate folder called “images”, CSS in a folder called “css”
Assessment
This assignment is worth 15% of the final grade.
- 10 points will be based on fulfilling the requirements above, and on a lack of HTML and CSS errors. YOUR HTML PAGE MUST VALIDATE.
- The remaining 5 points are based on the amount and quality of additional mojo. I’m looking for design sense, balance, creativity, hard work!
Assignment is due in your folder on the server by email to the instructor at cleblanc@nscad.ca at 9:00 am on Wednesday, March 12.
Al work must be uploaded to the server for it to be considered “submitted”.
Late assignments will not be accepted. If you do not have it uploaded by the deadline, you will lose the marks for this assignment.