I’ve enjoyed working with each of you and I look forward to hearing from you in the future. Please let me know if you need assistance with recommendations or freelance opportunities.
Setup your personal work environment to support Sass/SCSS to experiment further. Start simple and then build in complexity as needed. Review the Sass Style Guide for a deeper look.
Complete Flexbox Froggie and send me a screenshot of level 24 with all of the frogs in the proper location.
Using your own images and breakpoints create a working responsive image demo using one of the techniques covered in class today. Please send the working demo to me. Remember that I’d like to see this technique implemented in your final project. Keep that in mind as you work through the design of your demo.
Please review and research the current state of responsive images. In class on Tuesday we’ll look at current techniques and polyfiills. Here are a few resources to get you started.
Finish up work on your Bootstrap prototypes today submit the URL for review. I will have the classroom open if you choose to work there. If you are having difficulties with Bootstrap, I encourage you to collaborate with your classmates or send me a link to your code to look over so I may assist. Please try to have the prototype finished up by Thursday so we can discuss theming and introduce concepts relating to responsive media. I’ll see you Thursday.
Today I’d like you to use Bootstrap to implement the wireframe you created for your final project. On Tuesday, be prepared to give a status update on your final project and demo your rapid prototype to the class.
For a quick starting point, check out – http://www.initializr.com/.
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 desktop and mobile views 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.
You should have a wireframe of the homepage in both desktop and mobile views before class on Thursday. We will use it in class please come prepared to work.
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 Tuesday. I also encourage you to check out some of the additional content on the speakers web site. (http://bradfrostweb.com/blog/)
Beyond Media Queries: An Anatomy of an Adaptive Web Experience from marc thiele on Vimeo.
Spend some time reviewing the Twitter Bootstrap Documentation and be prepared to implement a sample bootstrap page when we return from Spring Break.
Provide a working example of both an Audio and Video implementation using HTML5. This should be cross browser. In addition, I’d like you to implement one of the many prebuilt video/audio players. Using the video/audio files provided build a working demo leveraging one of these players. 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.
In this activity I’d like you to partner with a classmate (or someone outside of class with web development experience) and ask them to use your site. The should evaluate on Mobile and Desktop. I’d like the to provide you with something they like and 3 constructive criticisms. Your home work will be to address the issues identified by your reviewer and resubmit your page to me with an email that outlines the criticisms/suggestions you received and what you did to address them. This is due next Tuesday.
In today’s lab you should complete the build out of a desktop view to the mobile resume we created in class. 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.
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.
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. This should be completed and brought to class with you on Tuesday. We’ll build out a tablet and desktop version next week.
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.
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…
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.
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.
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
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
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.
Please complete the assessment and submit before class on Tuesday (1.17.17). Please email the URL of the page you create to (tswallace@ualr.edu)
My Reading List – Import into a reader of your choice. I use Feedly
Thomas Wallace Reading List
Set up Web Hosting prior to class on class on Thursday.
I’ve enjoyed working with each of you and I look forward to hearing from you in the future. Please let me know if you need assistance with recommendations or freelance opportunities.
Setup your personal work environment to support Sass/SCSS to experiment further. Start simple and then build in complexity as needed. Review the Sass Style Guide for a deeper look.
Complete Flexbox Froggie and send me a screenshot of level 24 with all of the frogs in the proper location.
Build out 3 working demos using picturefill. I’d like to see you create your own scaled imagery that includes picture dimensions so we can visually see the change. You could use different images for each breakpoint if you like. Experiment with the different options in your demos. I am looking for a mastery of the concepts. Your final project will need to leverage this technique for all imagery. Due Thursday.
Review the following Articles. It is imperative that you are familiar with primary concepts associated with Responsive imagery and the challenges it presents to our design and development work. We’ll work through several examples on Tuesday.
Today you should finish working on your rapid prototype. Once you have a good representation of the wireframe you developed, I’d like you to find and implement a theme for the prototype. Below are a few resource to get you started but feel free to some additional research. On Thursday we will share a few of the implementations and begin our discussion on responsive media techniques.
Complete and theme your Bootstrap mockups and send to me no later than the beginning of class on Thursday.
Today I’d like you to use Bootstrap to implement the wireframe you created for your final project. On Tuesday, be prepared to give a status update on your final project and demo your rapid prototype to the class.
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 desktop and mobile views 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.
You should have a wireframe of the homepage in both desktop and mobile views before class on Thursday. We will use it in class please come prepared to work.
Spend some time reviewing the Twitter Bootstrap Documentation and be prepared to implement a sample bootstrap page when we return from Spring Break.
Provide a working example of both an Audio and Video implementation using HTML5. This should be cross browser. In addition, I’d like you to implement one of the many prebuilt video/audio players. Using the video/audio files provided build a working demo leveraging one of these players. 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.
In this activity I’d like you to partner with a classmate (or someone outside of class with web development experience) and ask them to use your site. The should evaluate on Mobile and Desktop. I’d like the to provide you with something they like and 3 constructive criticisms. Your home work will be to address the issues identified by your reviewer and resubmit you page to me with an email that outlines the criticisms/suggestions you received and what you did to address them. This is due next Tuesday.
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. Be prepared to share your work with the class. We will be demoing these next week. 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.
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.
Complete the mobile first styling of you resume. Next Week you will have a lab in which you add a desktop view to your site using media queries.
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.
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 Tuesday. Next Week you will have a lab in which you add a desktop view to your site using media queries.
Spend today’s allotted class time reviewing the article located at:
https://developers.google.com/web/tools/chrome-devtools/?hl=en
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.
