Thomas Wallace

Lectures and Resources

Mobile Web Development

Spring 2026 | IFSC 34203

Geolocation and Other Odds and Ends

Final Assignment Submission Guidelines

Final Project due: 10:00am Tuesday, May 12, 2026 at 10am. 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. Remember that your course homepage should be styled, responsive and leverage CSS Custom Properties (variables).

  • Pre Assessment
  • Fluid Grid
  • Responsive Resume w/ Microdata  or JSON-LD
  • Flexbox Froggy or Defense Screenshot
  • Figma Prototype URL
  • Bootstrap Rapid Prototype
  • Responsive Images Demo
  • Audio/Video
  • Final Project (5/13)

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.

Responsive Images and Media

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

Finish the rapid prototyping exercise and post a link on your course home page.

Assignment

Finish the rapid prototyping exercise and post a link on your course home page.

Rapid Prototyping with Bootstrap

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.

Final Project Discussion and Resume Wrapup

Assignment

Over Spring Break complete the site project questionnaire and begin work on a visual design prototype for your final project in Figma.

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

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.

Mobile First Design Lab

Codecast

Begin working on your mobile-first prototype. Over the weekend you should work to have your mobile first view of your project complete by Tuesday of next week.

CSS Custom Properties

Assignment

  1. Decide on where you’d like to use Schema Markup or JSON-LD for your Resume. Below is the starter code for either approach. I’d like you to populate both templates with data and link from course homepage.
  2. Decide on a color scheme and typography for your resume. Research Look and feel so you have some direction when we start work next week.
  3. Implement a few css custom properties on your course homepage.

Mobile First Design

Please Check your Email – Delayed Lecture this morning!

Assignment

  1. Create a new project directory in your workspace named resume.
  2. 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.
  3. Once you have everything in place, validate your html and run the url through Google’s Structured data testing tool.
  4. Be sure add a link to the course index in your dev space.
  5. Do some research on Schema and its value in modern web development.
  6. Be prepared to discuss your experience and findings on Tuesday.

CSS Grid Lab

Today we will build out some common page layout patterns using the CSS grid specification we have been learning.

CSS Grid

In Class Coding Activity

  • Clone (Make a copy) your HTML5 Semantics project from last week.
  • Rename the copied directory css-grid-exercise-1
  • Add a link to your course homepage
  • Using CSS Grid, Build a page layout using your own custom grid dimensions.

Assignment

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.

Grid Based Design

CSS Grid Review

Assignment

Using HTML5 Bolierplate rebuild your course homepage. At a minimum there should be your name and links to both the preassesment and the refactored HTML5 we did in class last week. Begin working on styling your course home page. At a minimum you should have styled typography and color scheme. Feel free to have fun with this. My only requirement is that I can easily find your work.

Chrome Inspector and Introduction to Grid Based Design

Assignment

Using HTML5 Bolierplate rebuild your course homepage. At a minimum there should be your name and links to both the preassesment and the refactored HTML5 we did in class last week. Begin working on styling your course home page. At a minimum you should have styled typography and color scheme. Feel free to have fun with this. My only requirement is that I can easily find your work.

Inclement Weather Activity

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 (Overview, Elements, Accessibility). Be prepared to demo a tip or trick you learned from the exercise in class on Tuesday or Thursday next week. 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.

Publishing Your Work

Assignment

Please have your pre-assessment posted to your course homepage by Thursday, January 29th.

Course Overview

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
  • Codespaces – Cloud-based Integrated Development Environment (IDE)
  • GitHub (Student Pack) – Code Versioning Repository for submitting assignments
  • Vectorpea – Cloud-based Vector Imaging editor
  • Pixlr – Cloud-based Vector Imaging editor
  • Figma – Cloud-based Interface design tool

Skills Review

Assignment

Begin work on the skills pre-assessment. This is not a test. Just an opportunity for you to review key concepts to make sure you are at a good spot to proceed this semester. This is a pass/fail assignment. If you attempt it you will get credit. Thursday we will review your work and publish to github.  If you need assistance with set up we will cover in class on Thursday. I’ll include instructions if you want to set up on your own.