Thomas Wallace

Lectures and Resources

Mobile Web Development

Spring 2022 | IFSC 3342

Semester Wrap Up

Final Project due: 10:00am Tuesday, May 10, 2022. Late Submissions will not be accepted. Submission should include the following:

  • Site URL
  • Digital Wireframes / Concept art for multiple breakpoints.
  • A brief description of the sites purpose and target audience.
  • Feedback you collected from at least 3 individuals and how you addressed the concerns / issues identified in that process.
  • 1-2 pages outlining the takeaways from the course. (What you learned, What you’d like to investigate further, ideas for improvement)

Please submit everything in a single email with subject: Mobile Web Final – Your Name.

Make sure the following assignments are linked from your home page.

  • Pre Assessment
  • Fluid Grid
  • Responsive Resume w/ Microdata
  • Figma Prototype URL
  • Bootstrap Rapid Prototype
  • Responsive Images Demo
  • Audio/Video
  • Final Project

Web Hosting

Assignment

Continue working on your final project, be sure to bring questions to class for lab on Thursday.

Geolocation and Other Odds and Ends

Final Assignment Submission Guidelines

Final Project due: 10:00am Tuesday, May 10, 2022. Late Submissions will not be accepted. Submission should include the following:

  • Site URL
  • Digital Wireframes / Concept art for multiple breakpoints.
  • A brief description of the sites purpose and target audience.
  • Feedback you collected from at least 3 individuals and how you addressed the concerns / issues identified in that process.
  • 1-2 pages outlining the takeaways from the course. (What you learned, What you’d like to investigate further, ideas for improvement)

Please submit everything in a single email with subject: Mobile Web Final – Your Name.

Make sure the following assignments are linked from your home page.

  • Pre Assessment
  • Fluid Grid
  • Responsive Resume w/ Microdata
  • Figma Prototype URL
  • Bootstrap Rapid Prototype
  • Responsive Images Demo
  • Audio/Video
  • Final Project

Native Audio and Video

Assignment

On your course index page, provide links to working examples of both an Audio and Video implementation using HTML5. In addition, I’ll provide extra points if you to implement one of the many prebuilt video/audio 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.

Responsive Images

Assignment

Using your own images and breakpoints create a working responsive image demo using one of the techniques covered in class today. Please post the working demo to your course index page. 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.

Bootstrap Lab

Using the visual prototype/wireframe you created for your final project, create a low-fidelity prototype of your homepage concept using Bootstrap. This should be built in your work environment and added to the workspace landing page you created earlier this semester.

CSS Preprocessors and Variables

Introduction to Web Frameworks

Assignment

Implement a demo of css variables  on your course homepage. Nothing complex required, I would just like like you experiment a bit.

Continue working on your individual project and prototypes. Remember, you should have a prototype design by next Tuesday. Review Bootstrap Documentation prior to class on Thursday.

Final Project Discussion and Resume Wrapup

Assignment

Over Spring Break complete the site project questionnaire and create a visual design prototype in Figma.

At this point you should have the following assignments linked from your course homepage:

  • Pre-Assessment
  • Custom Grid Assignment
  • Flex Froggy or Flex Defense Screenshot
  • CSS Grid Garden Screenshot
  • Responsive Resume Assignment – Should be linked by the end of Spring Break
  • Final Site Planning
    • Questionnaire
    • Figma Prototype – Due March 31, 2022

Site Prototyping and Final Project Overview

Assignment

Decide on the concept for your final project. This can be on any topic you’d like. A local business, a non-profit, a charity, an event you attend(ed), a state park, etc. This can be a new site or a redesign of an existing site.

You are to design/redesign the site using current web technologies and workflows covered in this course. As you consider your options, keep in mind that you have 5 weeks to complete this project. Be realistic about what you can create in that time frame given your skillset and time available. I am looking for a well-executed final product more than a large content-rich site. Focus on quality over quantity. Be prepared to pitch your ideas to your classmates on Thursday.

Before next class please watch through the following playlist that covers introductory concepts. You will use this tool to create the prototype of your final project.

 

Resume (Mobile View) Lab

Assignment

Complete the styling of your mobile-first resume and post a link on your Github index page. Be prepared to begin working on your tablet view next week. We will do a bit of show and tell in class on Tuesday to see what you came up with. Good Luck!

Additional Reading

CSS Grid Explained

Assignment

Continue to work on your mobile-first prototype. We will continue to work on it in class on Thursday but it should be close to completion by the end of the week. You just need to work on the mobile view this week. No media queries are necessary. Focus on its appearance on small screens (Color, Typography, Icons) – Example

Introduction to Grid

Please read the following guide to the basics of the CSS Grid Specification. There is a lot to learn so I’d spend all of class today becoming familiar with the material. The second link is a wonderful resource with Codepen examples of many of the new properties and features for you to experiment with. Click the Edit on Codepen  link in the top right of each example to  dissect and experiment with the code. Use the documentation from the first link to further your understanding. Use this time wisely.

Also make sure your resume is  populated and ready to go for Tuesday. Stay warm.

Assignment

Complete the exercises at CSS Grid Garden and link a screenshot of the completed last lesson from your homepage.

Begin working on your mobile-first prototype. We will continue to work on it in class on Thursday but it should be close to completion by the end of the week.

Additional Reading

Check out https://mastery.games/ for free game-driven exercises on Flexbox and Service Workers.

Mobile First Design and Introduction to Schema

ASSIGNMENT

Using the source code in the following pen – Microdata Resume Starter, do the following.

  1. Create a new project directory in your workspace named resume.
  2. Using HTML5 Boilerplate as your starting point, add the html and css from codepen to the appropriate locations in your files. Make sure add appropriate values to the head of the boilerplate document (title,lang,description).
  3. Populate the resume template with your information. Pay special attention to the markup when adding content as to not break the structure of the underlying schema.
  4. Once you have everything in place, validate your html and run the url through Google’s Structured datatesting tool.
  5. Be sure add a link to the course index in your dev space.
  6. Do some research on Schema and its value in modern web development.
  7. Be prepared to discuss your experience and findings on Thursday.

Introduction to Media Queries

Assignment

Read: Mobile First Design

Please review today’s codecast. Make a copy and experiment. Try implementing a few queries on your course index page.  Please bring questions to class with you on Tuesday.

If you have a resume please track it down and bring a digital copy with you to class on Tuesday. Over the next few weeks, we will be designing a grid-based, responsive resume with microdata support. This will be a multi-stage project with several graded components. It is imperative you have something to build around. If you do not have anything I will provide a template you can work from that contains minimal information.

Fluid Grids

The Flexible Grid

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 hosting. Be sure to link it up from your workspace index. If you need a bit of help here is the general workflow…

  1. Create a directory structure and base HTML. You can use the HTML from the codepen along with boilerplate if you like.
  2. Generate a Grid ( Experiment with Different Tools )
  3. Implement grid on the sample html file using pixels
  4. Convert to a percentage-based grid
  5. Publish and link the assignment from your course index.

Exploring Grid-based design

A Comprehensive Introduction to Grids in Web Design

Assignment

In the remaining time today, begin working on generating your own static grid example. We will convert this to flexible grid in Tuesday’s session.

  1. Create a directory structure and base HTML. You can use the HTML from the codepen along with boilerplate if you like.
  2. Generate a Grid ( Experiment with Different Tools )
  3. Implement grid on the sample html file using pixels.

Chrome Inspector and HTML5 Boilerplate

Grid-Based Design

A Comprehensive Introduction to Grids in Web Design

Assignment

Read: A Comprehensive Introduction to Grids in Web 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 it in class on Thursday.

Additional Reading

If you would like to take a deep dive into the new CSS Grid Specification, check out this free course –https://cssgrid.io/

We will be learning CSS Grid in the coming sessions but this course would give you some additional exercises and a head start on our discussion.

Web ARIA, Chrome Tools and more

Your assignment for the day is to review to content from the Chrome Dev Tools Documentation. At a minimum, I’d like you to be familiar with the content covered in the following sections (Dev Tools for Beginners, CSS, Accessibility). Be prepared to demo a tip or trick you learned from the exercise in class on Thursday. 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 sections depending on your level of experience with the tool. The second link also contains some valuable information. Feel free to review it as well.

Pre-Assessment Lab

Today I will work through the pre-assessment in an in-class demo. Please use this opportunity to ask questions and receive clarification on specific concepts and ideas.

Assignment

The completed activity should be published to your workspace and a link added to your course homepage  no later than January 27, 2022, before class. This is a Credit/No Credit assignment designed to make sure you have a good foundation to proceed in the course. Make sure to submit your github pages url URL if you have not done so.

Skills Pre-Assessment

  • Setting up our Directory Structure

Pre-Assessment

Assignment

Submit your Githup Pages URL here – https://forms.gle/RnyJRBM5wG6mYLYu8

Begin Working on the Pre-Assessment activity and bring questions to class on Tuesday. The completed activity should be published to your GitHub Homepage no later than January 28, 2021, before class. This is a Credit/No Credit assignment designed to make sure you have a good foundation to proceed in the course.

Mobile Web Spring 2022

Review Course Expectations

Introduction to the Virtual Classroom

We will be using a broad array of tools to support this course this semester. If you would like to familiarize yourself with these feel free to do so. I will explain and do walkthroughs with the tools when we begin to use them.  You are welcome to go ahead and create your accounts (they are all free) but make sure to keep track of your credentials.

  • Codepen.io – Codecasting Service for Lectures and Reference
  • Gitpod – Cloud-based Integrated Development Environment (IDE)
  • GitHub (Student Pack) – Code Versioning Repository for submitting assignments
  • Gravit.io – Cloud-based Vector Imaging editor
  • Figma – Cloud-based Interface design tool

Additional Tools

Setting up our Work Environment

Skills Review