Final Project Lab and Q&A


Be prepared to present you final project on Tuesday. You can review the presentation guidelines here. I will randomly generate presentation order before class on Tuesday.


Progressive Enhancement


Begin looking for ways you can implement jQuery into your final project. Identify what is it you’d like to do (image gallery, carousel, lazy load etc.) and begin researching what it takes to get it implemented. Your assignment for the weekend will be to get something working you can submit to me next Wednesday.

Resources 1 | 2 | 3

Introduction to jQuery

Additional Reading and Study – Javascript 101

Read the following Article on Progressive Enhancement. Send me an email ( explaining progressive enhancement in your own words. Please discuss why it is important to use progressive enhancement and include a link to another article you found and read relating to the topic. Due before class Monday.

HTML5 Video and Audio


Provide a working example of both an Audio and Video implementation using HTML5. This should be cross browser and work in IE 9 as well as modern browsers. Be prepared to discuss the implementation in class on Tuesday. Included on the page should be the url of technique you used and a list of browsers and devices you were able to support.

Site Planning and Prototyping


Refine your site concept and create a preliminary sitemap for the site/app using a service discover in class. Experiment with one of the prototyping tools we discussed in class and build a prototype of the mobile view of your new site. This only needs to an outline.

Use Kuler or a similar tool to generate a color scheme for your web site. You should make note of the hexadecimal color values of your scheme. If you need more information check out the following post on deciding on good colors.

Submit the sitemap and color swatches to me via email by Thursday. You should have a wireframe of the homepage in both desktop and mobile views by next Tuesday.

Creating Imagery for your Site


Create Banner image for your sample page in Fireworks. The image should be as wide as your container div and between 80px and 200px tall and less than 40kb in size. Emailed before class on the Monday following Spring Break. Have fun with this. You can make an image for anything. It could be a company, an event, a hobby etc. I’d like to see the following elements present in your design. Typographical Element, some sort of photographic element or vector artwork, and a consistent color scheme (Try Kuler).

Next class I’ll show you how to integrate this image into your template page properly. Please bring the file to class.

Responsive Images Wrap-up

  • Review Responsive Images Lab assignment
  • Discuss Final Project


I’d like you to come up with and idea for a final project responsive web site. I’d like this project to incorporate the the use of responsive design practices and utilize some of the new html5 api’s. I’ll give you a clear list of technical requirements after spring break. This can be for a fictitious client or a real world client or project. Be creative. Pick something you are interested in learning more about. I’d like you to write a paragraph or two explaining the project and what you hope to accomplish/learn by completing the project. Please email this to me before class on the Tuesday following Spring Break. Be prepared to discuss your idea in class.

Working with Fireworks

  • Fireworks Workspace
  • Creating Shapes
  • Working with Typography
  • Cropping and Resizing


Complete the following tutorials and submit the folder icon you create in the 3rd tutorial.

You should email this icon to me before class on Monday, March 31, 2014. Late submissions will not be accepted. I do not expect you to perfectly replicate the icon in the tutorial but I would like to see a solid effort from each of you. This is a challenging assignment so I encourage you to not wait until the night before it is due. Good Luck! If you’d like you can download a 30 day trial of Fireworks on your own computer so you can work off campus.

Exploring Jquery

HTML5 Microdata

In-class Lab – Please Complete the following Tutorial and submit your online Resume to me via Email.

Note: If you are uncomfortable with sharing any personal information with me  (or Google!) feel free use fictitious information. You may skips steps 8-10 if you’d like.


Submit your resume via email prior to class on Tuesday.

Responsive Resume Lab

I’d like you spend today’s lab building out a desktop view to the mobile resume we created in class. If you need help in creating the proper media queries make sure to reference this article. This assignment is graded and should be submitted to me by Monday so I can look it over prior to class on Tuesday. Please send the url to the project and remember to make this your own. It doesn’t need to look exactly like the initial resume we built. Personalize it. This might be someones first impression of you. Good luck and have a nice weekend.

Introduction to CSS


Style your prototype HTML Document from top to bottom. Upload the file to your web space and send the URL to before class on Tuesday.

If you haven’t already, please read the following article on CSS Positioning and be prepared to complete an in class lab assignment on Monday.

HTML5 Semantics

Working with HTML5 Boilerplate

Leveraging HTML5 Semantic Elements

Adding ARIA Roles for Accessibility

Adding Browser Support

Development and Debugging Tools

In-class Lab – Please Complete the following Tutorial and submit your online Resume to me via Email.

Note: If you are uncomfortable with sharing any personal information with me  (or Google!) feel free use fictitious information. You may skips steps 8-10 if you’d like.


Read the following article on Microdata

Building a Responsive Resume


Complete the mobile first styling of you resume. I’d like you design to reflect your own taste and not replicate what we did in class. Please read the following Article and be prepared apply the concepts included within to your work in lab on Tuesday. Next Week you will have a lab in which you add a desktop view to your site using media queries.

Introduction to CSS


Finish styling your sample html document. Make sure that you have styles to provide the page layout and visual design (typography and color). Really experiment with the different properties and their values. I don’t expect this to be beautiful, but I do want you to see what you come up with. Please be prepared to share this with me in class on Monday.

Adaptive Web Design

For today’s out of class assignment, I’d like you to watch the video below and then share with me via email 5 takeaways (ideas, technical concepts, techniques). You should be able to complete this assignment in the time allotted to class. Please be thoughtful in your responses and be prepared to discuss on Thursday. I also encourage you to check out some of the additional content on the speakers web site. (

Beyond Media Queries: An Anatomy of an Adaptive Web Experience from marc thiele on Vimeo.