In this class…

Today we’ll be continuing with Bootstrap, a front end framework that will allow you to build beautiful, responsive websites with HTML/CSS/JavaScript without coding from scratch.

• Bootstrap grid system
• “lightbox” modal
• Using Bootstrap themes

If you got stuck on the responsive dropdown menu last week, download this sample Bootstrap package.

More Bootstrap resources

[icon size=”tiny” image=”icon-cloud-download”] Customize & download Bootstrap

[icon size=”tiny” image=”icon-cloud-download”] Download Simple CSS

[icon size=”tiny” image=”icon-link”] HTML Validator

 

Homework

• Work on your Bootstrap project, due next week on March 12 (March 14 if you are presenting on March 12)
• Prepare for your web readings presentations on March 12, 19 & 26

 

Web Readings Presentations

Prepare a 10 minute presentation on the reading that you chose here, and create a 10-slide visual presentation to go along with your talk. Keep it simple: this presentation is about condensing information and conveying the most important points.

**Consult the reading list to see the date for your presentation.**

Process: How to prepare & present

• Read the article through once, then go back through it and identify the author’s main argument or idea.
• Once you understand the main idea, pull out the key points that the author uses to support his or her argument.
• Use common language and your own words to explain these main points to an audience who hasn’t read the article. If your reading includes two articles, remember to explain how they relate to one another.
• To finish your presentation, explain how the subject matter in your reading relates to the category (history, politics & society, contemporary design, the future) and your world as a young designer or artist.
• Finally, pose a question to the class about the material you just presented. It should be an open-ended discussion question about a theme, idea or concept you’ve touched on.

Remember:

• Be concise and to the point when preparing your presentation.
• Do a practice run-through the night before. Make sure you understand your material!
• Think about your audience. How will you make your material relevant to them? How will you help them make the same connections that you’ve made?
• Don’t read the screen while presenting. Your visual presentation should complement what your are saying, not replicate it.

Assessment

This assignment is worth 15% of the final grade.

• 5 points will be based on how well you understood the reading, made thematic connections and insights, and pulled together the right information to present to your audience.
• 5 points will be based on how well you communicated the material to the audience, how effective your visual presentation was and how thought provoking your discussion question was.
• 5 points will be based on going above and beyond the basic requirements.

 

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!*

• Have an index (home) page and 4 additional pages. (You can use a “one-page” model, just have 4 sections plus your “home” area.)
• 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.
• Have a background image somewhere in the site.
• 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.
• You may use a Bootstrap theme but be sure to make it your own by changing the default markup. 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.

*I will be grading you mostly on how well you create the Bootstrap site, not how close it looks to the old site. Just focus on making your site work well without errors.

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 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, images and css files be in separate folders (Bootstrap will organize some of this for you).

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 at 9:00 am on Wednesday, March 12.
All work must be uploaded to the server for it to be considered “submitted”.
***If you are presenting on March 12, your due date is March 14.***

Late assignments will not be accepted. If you do not have it uploaded by the deadline, you will lose the marks for this assignment.