Working with Chrome Dev Tools – Out of Class Activity

Spend today’s allotted class time reviewing the article located at:

I know that you all have varied levels of experience with the inspector, but there should be something new here for everyone.

Be prepared to discuss and  demo something you learned on Tuesday. Don’t feel intimidated if you do not understand all of the information covered in the article. Becoming familiar with this tool will greatly increase your productivity and ability to identify and troubleshoot problems.

Publishing to the Web


  • Create and Validate a prototype HTML document that includes examples of all HTML elements covered thus far. For a list of requirements view this page.
  • You can email the html document to me or for additional credit upload to the server and send me the url. Send to before 2.17.16.
  • Reading Assignment: CSS Basics

The Flexible Grid

Reading Discussion

  • Class Feedback

Grid-Based Design

The Flexible Grid

Converting Static Grids to Responsive Grids


Read Chapter 3
Create your own grid based page using the sample html we generated in class. You should use different dimensions and gutters for this assignment. Use the approach we covered in class to make sure you understand the process. Please upload the assignment to your web space in a directory on your web space and send me the url. If you need a bit of help here is the general workflow…

  1. Create directory structure and base html
  2. Generate a Grid ( Experiment with Different Tools )
  3. Implement grid on the sample html file using pixels
  4. Convert to percentage-based grid
  5. Publish

Working with HTML5


Read the following resource as a review. We’ll have a quiz next week over all of the reading and discussion so far. – Getting to know HTML

Microdata Wrap Up

Grid-Based Design




Read Chapter 2  – Responsive Web Design:  The Flexible Grid

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 Tuesday.



Development and Debugging Tools

Prepping a Document for Mobile


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.

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. Don’t spend too much time playing with the CSS. We are going to restyle the resume in coming exercises.  Be prepared to discuss in class on Tuesday. Submit the url of the completed resume prior to class on Thursday. We will continue to build off of this assignment in the coming weeks. Failure to complete could impact your ability to complete those assignments.

Working with Images


Please read the following article on image optimization and write a short blog post discussing three takeaways from the article.

Review the HTML & CSS concepts covered last semester and bring questions/need for clarification to class on Thursday. We’ll begin a web design project on Tuesday. If you need some review this site covers a good chunk of what we discussed last semester.

Creating Site Imagery


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 Thursday. 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.

Introduction to HTML5

  • Staying Engaged through student Organizations
    • Society of Computing and Information Science (SOCIS)
      • Facebook Page
      • Subscribe to the Mail List
        • Send Email to Subject Blank, In the body write subscribe
    • UALR eSports


Create a Codepen Account and experiment with it’s features.

Read Semantic XHTML (Quiz Material) & Read Chapter 2.

What is new in HTML5?

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 Tuesday.

Homework Reading

Structure, Content, Design, & Behavior


Evaluate your favorite web site based on our discussion of Structure, Content, Design, and Behavior. This is a written assignment that should be emailed to me ( no later than 1-25-16. Make sure you discuss the following elements: Site URL, An assessment of the Structure, Content, Design, and Behavior of the site, Things you like about the site, Things you would change.

Introduction to Fireworks

Working with Photography

Image Optimization


Post optimized samples of the images you created to your blog with an explanation of the tools and approach you used.

Introduction to 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 next Thursday. 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!

Semester Wrap Up


Research JavaScript Implementation for Final

Progressive Enhancement and Site Planning


Complete the planning document and sitemap and submit to me via email before class on Tuesday.

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 a week from Tuesday.

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 Tuesday.

Usability Testing


Please write a blog post regarding today’s usability tests. I’d like you talk in detail about your observations from both tests and your thoughts as to why usability testing is a valuable part of the design/development workflow.

Service Learning Project

  • Service Learning Project Topic – Submit for Approval
  • Team Organization – Who is responsible for what. Everyone should have a role.
  • Project Scheduling – Book your date and time with the DSC for your booth (Week Before Finals)
  • Submit to me as a Google Doc your project proposal (1 Per Team). This document should include all of the information listed above. Due to me by next Monday. Be prepared to give a status report to the class (one per team).
  • You are welcome to meet as a team later this week and begin work on the project. I’ll try and get your topic approved within 24 hours of submitting your proposal. After today, you’ll have two full sessions to work on the project before the Thanksgiving Holiday. Working ahead is in your best interest.

Bringing it all together

Segway Project


Begin work on the Segway Projects. You should have a good start on your main page template prior to class on Monday.



Due on Tuesday 11.03.15

  • Create and Validate a prototype HTML document that includes examples of all HTML elements covered thus far. For a list of requirements view this page.
  • Upload the file to your web space. The url should be Make sure you name the file index.html
  • Read the following article before class on Tuesday – CSS Basics