To view lecture notes for a given lesson follow the links below. Lecture notes will be added the day of each lecture. Assignments will be listed for each section. Assignments are due before class.
- Final Project Guidelines
- Additional Content to Explore
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.
- Guest Speaker: Aaron Baker
- Digital Analytics Fundamentals
Make sure you include analytics into your final project.
Today I’d like you to put the finishing touches on your Bootstrap wireframes and submit the URL to me for a grade. You should also spend some time working on your final project. Be prepared to give a status update on your final project in class on Thursday.
- Review Audio and Video Implementations
- Introduction to Twitter Bootstrap
- Using Bootstrap Components
- Adding Custom CSS to a Bootstrap Mockup
Spend some time reviewing the Twitter Bootstrap Documentation and be prepared to implement a sample bootstrap page using your wireframe concept due on Thursday.
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.
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.
- Review Responsive Images Lab assignment
- Discuss Final Project
- Site Prototyping
- 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.
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.
- Adaptive Web Design Discussion
- What is Mobile First?
- Current State of Mobile First
- Understanding Breakpoints
- Styling your 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.
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. (http://bradfrostweb.com/blog/)
- Grid-Based Design | What is it? | Examples | Resources
Read Chapter 4 in Responsive Design / Experiment implementing your own grid on the example html we worked with in class. Try using one of the grid-generators we examined in class. Be prepared to review in class on Thursday.
- Review Homework Reading.
In-class Lab – Please Complete the following Tutorial and submit your online Resume to me via Email.
- How to Create an HTML5 Microdata Powered Resume (a few of the code snippets aren’t working on the site. Download the project files to use as a reference)
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.
For more information on the subject check out the following resources
The goal of this exercise is familiarize you with the proposed Microdata Spec and to get your brain wrapped around its use. Be prepared to discuss in class on Thursday. Submit the url of the completed resume prior to class on Thursday. We will continue to build of of this assignment in the coming weeks. Failure to complete could impact your ability to complete those assignments.
Out with the old in with the new
Adding Browser Support
After the Transition
Development and Debugging Tools
Prepping a Document for Mobile
- Prepping a Document for Mobile
- CSS Reset or Normalization
- Adding and detecting HTML5 Feature Support
Putting it all together…
Work through the following article – The Webkit Inspector
Be prepared to discuss and perhaps demo something you learned. Don’t feel intimidated if you you do not understand every little bit of the article. Becoming familiar with this tools will greatly increase your productivity and ability to identify and troubleshoot problems.
- Discuss Reading
- Setting up our work environment: Codepen | Documentation
- Beginning the Transition to HTML5 | Codecast
- Doctype, Meta and More….
In Class Assignment
Visit 10 Websites / Services you frequent. For each you should provide me with the site url, declared doctype, and a list of linked resources with the relationships. Only include the relationship information for elements we have not discussed. I’d like for you to discover as many new relationship types as possible. There is no need to list all relationship attributes for the site, only ones that are new to you. Once completed select one of the new relationship types and provide me with an explanation of its purpose.
Please email this assignment to me prior to class on Thursday.
Please complete the assessment and submit before class on Thursday (1.24.13). Please email the URL of the page you create to (email@example.com)
- Opening Remarks
- Naming Conventions, Meta Naming, Directory Structure
- Web Hosting
- Creating Your UALR Web Space
- Development Environment