Responsive Resume (Desktop/Tablet)

  • General comments about Mobile First Implementations
    • Body Padding
    • Remove Design Time Styles

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. I’d like to see at a minimum of two media queries addressing tablet and  desktop view. 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.

 

Site Planning

Site Planning

Working with HTML5 Boilerplate

Individual Web Site Project

Assignment

Watch the HTML5 Boilerplate Video | Download the Files (If you haven’t done so already) Review the HTML and CSS Documentation while looking through the boilerplate files. Be prepared to discuss on next week.

Begin thinking about a topic for your individual web project. By next Tuesday I should have a planning document and site map for the new site.

Web Forms

Web Forms

Assignment

  1. Implement a contact form solution on your Segway Project. If necessary create a contact page.
  2. Due Thursday (2/23) – Create a blog post on the Segway project. Include the site URL, Feedback you received,  How you improved/fixed your site based-on what your reviewers recommended. There should also be a working version of a contact form implemented.

Media Queries and Mobile First Design

Assignment

Begin the mobile first styling of you resume using this module for guidance. 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 Thursday. Next Week you will have a lab in which you add a desktop view to your site using media queries.

Peer Review

Solicit feedback from a classmate regarding the design and implementation of your Segway Project. I’d like you to spend the next week incorporating the suggestions from this critique into your project. When critiquing others keep in mind that we are all at different places skill-wise. Be constructive in your criticism and remember to also include what you like as well.

Assignment

Due next Thursday (2/23 – Email me your final Segway project. I’d like to hear about what you improved/fixed based-on what your reviewers recommended. There should also be a working version of a contact form implemented (Will cover on Tuesday).

The Flexible Grid

Reading Discussion

  • Class Feedback

Grid-Based Design

The Flexible Grid

Converting Static Grids to Responsive Grids

The Future of the Grid

Assignment

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

Web Related Terminology

Assignments

  • Read – The history of the Internet and the web, and the evolution of web standards
  • Create an Account on Codepen.io.
  • Evaluate your a web site you frequent based on our discussion of Structure, Content, Design, and Behavior. Write a blogpost that includes the following elements: Site URL, Screenshot, An assessment of the Structure, Content, Design, and Behavior of the site, Things you like about the site, Things you would change. Due Monday.

Microdata Wrap Up

Grid-Based Design

Files

Clearfix

Assignment

Class Sample

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.

Web IDE’s and Validation

Assignment

  • 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 to the server and send me the url. Send to tswallace@ualr.edu and mxkumar1@ualr.edu  before 2.20.17.
  • Reading Assignment: CSS Basics

Mastering Google Search

Assignments

  1. This week you should complete the Power Searching with Google course as homework. Be prepared to discuss when we return to class next Monday. Session 1 | Session 2 | Session 3 | Session 4 | Session 5 | Session 6. If you completed this course previously please complete the Advanced course to fulfill this assignments requirements.
  1. Due next Wednesday – Write a blog post about 5 new tips/tricks you learned from the Power Searching with Google course. Please explain each technique and a situation where you might use it to find valuable information.

Microdata

Prepping a Document for Mobile

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.

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.

Introduction to HTML5

Assignment

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

Web Based Services

Using the Web Like a pro

Assignment:

Review your favorite web-based service in a blog post explaining it’s functionality, the pro’s and con’s of using the particular service, and discuss the service’s potential for impacting the way you work. Post is due next Wednesday. Please be prepared to discuss in class.

Exploring Web based services

Google Services

Using the Web Like a pro

Assignment:

Review your favorite web-based service in a blog post explaining it’s functionality, the pro’s and con’s of using the particular service, and discuss the service’s potential for impacting the way you work. Post is due next Wednesday. Please be prepared to discuss in class.

Bringing it all together

Assignment

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

Out of class lab – Modern Web Accessibility

Watch – Accessibility for the Modern Web by Derek Featherstone

Assignment

Explain in your own words what web accessibility means to you & why it is important to build accessible web sites? Do some research on the topic. This is a written assignment (1-2 pages) that should be emailed to me (tswallace@ualr.edu & mxkumar1@ualr.edu) no later than next Monday. Have a nice weekend!

Introduction to HTML5

Creating Imagery for your Site

Assignment

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 tswallace@ualr.edu before class on Tuesday. 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.

HTML5 Structural Elements

In Class Assignment

Visit 10 Websites / Services you frequent. For each you should provide me with the site url, declared doctype, and any meta and linked resources that are unfamiliar you. Only include meta and linked resource 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 research it’s purpose. Write up a short description and rational for it’s use.

Please email this assignment to me no later than Monday. I’ll compile these into a document we can use as a reference moving forward. Be prepared to discuss your submission in class on Tuesday.

Read An Overview of HTML5 Semantics
Supplemental Content: Open Graph Protocol

Introduction to HTML5

Assignment

Read (Quiz Material) Introduction to HTML

Web Hosting and Working with Imagery

Assignment

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 tswallace@ualr.edu 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.

Setting Up Web Hosting, FTP and Introduction to HTML5

  • Chrome Dev Tools – Demos
  • Working With Web Hosting – Cpanel Basics
  • Connecting to your Web Hosting via FTP
    • Using an FTP Client – Filezilla – Tutorial
      • Host:ualr.edu
      • Username: students\username
      • Password: students domain password
      • Port:21 (It should default to this)

Assignment

Set up an index page for your web space. This will be the landing page for this course where you will link all published assignments. Please send me the URL of your web space so I have a place to visit and check in on assignments you are working on throughout the semester.

Read An Overview of HTML5 Semantics

Introduction to HTML5

Assignment

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

Read (Quiz Material) Introduction to HTML

WordPress Explained

Assignment

Make sure you have done the following by Tuesday of next week. We’ll be moving on to new topics so you should have all blog related issues and assignments squared away.

  • Make sure I have your Blog URL
  • Customize your blog
    • Apply a new theme
    • Customize the sidebar or wigitized areas
      • Add a few widgets.
      • Display an rss feed from a site that you frequent.
    • Try using a shortcode in a post or a page.
  • Completed About Page
  • Created a Custom Menu

Understanding Chrome Dev Tools

Your assignment for the day is to complete the first two chapters of the Explore and Master Chrome tools course at Code School. Please complete all of the challenges associated with these two chapters. While you are not required to create an account, I recommend doing so you can track you progress and take advantage of some of the other content on the site. Be prepared to demo a tip or trick you learned from the exercise in class on Tuesday. We will be leveraging these skills throughout the semester so it is imperative that you learn how to use this tool. Feel free to complete the remainder of the chapters depending on your level of experience with the tool. Email a screen shot of your completion badges for these two chapters.

http://discover-devtools.codeschool.com/

In class on Tuesday, we will cover file publishing to both the UALR Web Server and to your individual hosting accounts. If you have been unable to upload your pre-assessment, this will be an opportunity for you to do so. I will not count that assignment as late until Tuesday.

Supplemental Material

 

Structure, Content, Design, & Behavior

Assignment

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 (tswallace@ualr.edu) and  Manoj (mxkumar1@ualr.edu) no later than 1-23-17. 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 WordPress

Homework

Homework (Due 1.23.17): Write your first blog post reflecting on your first week in the program and your personal expectations for the class. Make sure you categorize and/or tag the post. If you are feeling adventurous try adding a photo to the post as well. There is no length requirement for this assignment.

Introduction to Fireworks

Working with Photography

Image Optimization

Assignment

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!

Chromebook Orientation and Introduction to WordPress

Homework

Homework (Due 1.18.17): Visit WordPress.com and create a new blog. This will be where you reflect and write over the course of the next semester. Send me the address of your blog via email (tswallace@ualr.edu). We will review all of the settings on Tuesday.