Thomas Wallace

Lectures and Resources

Web Technologies

Spring 2026 | IFSC 11003

Building an Accessible Content Carousel

Be sure to publish your work to GitHub and add a link to the demo we built to your course homepage.

Assignment

All work is due – Sunday, May 10, 2026 by 10:00 pm. No work submitted after this time will be accepted. No Exceptions!

For this assignment, I ask that you collect feedback from a peer, family member, or a friend on your first attempt at the Dragon or Segway project. Using that feedback, I’d like you to attempt to address any issues or problems pointed out by your potential users. You should provide a link to the revised project (duplicate the project directory in codespaces and then add a link to the revised project). You should also provide several paragraphs reflecting on the learning experience working on this project and your experience during the semester. What were the things you did well? What would you do differently if you had to start over? Also report on the feedback you received and what you did to address those issues or why you chose not to make the recommended changes. This should be posted on your homepage under the progressive enhancement writing assignment.

Your course homepage you include the following assignments by then end of the semester.

(Example)

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)
  • CSS Grid Garden
  • CSS Grid Layout Lab
    • Two Column Left Align
    • Two Column Right Align
    • Two Column Stacked
    • two Column Equal
  • Mars Rover or equivalent project (First Draft)
  • Cycle Lab (Image Slideshow)
  • Mars Rover Revised – Final
  • Progressive Enhancement Writing Assignment (Written on Course homepage)
  • Mars Rover Project Revision and Reflection (Written on Course homepage)

JavaScript and the Document Object Model

Assignment

Read the following Article on Progressive Enhancement. On your course homepage, create a section below the navigation element that contains the heading “Thoughts on Progressive Enhancement”. Please describe progressive enhancement in your own words and discuss why progressive enhancement is important in modern web development and include a link to another article you found and read relating to the topic.

CSS Grid Lab Debrief / Final Project Assignment

Lab Debrief

Bringing it all Together

Assignment

Complete the micro-site project and post url of the First Draft to your course homepage no later than 4/22/2026. You are welcome to complete the site on any topic you would like provided it meets the technical requirements for the project. There will be two iterations of this project. A first draft due on 4/22/2026 and a final revision that will be due on the date of your final. Both are graded assignments. Plan accordingly.

Mars Rovers

CSS Grid Lab

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

Assignment

Make sure your grid lay labs are loaded and linked from your course homepage. At this point your course homepage should have the following assignments posted and linked:

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)
  • CSS Grid Garden
  • CSS Grid Layout Lab
    • Two Column Left Align
    • Two Column Right Align
    • Two Column Stacked
    • two Column Equal

CSS Grid, Image Manipulation and Optimization

CSS Grid Resources

Image Editing

Lab Set up

  1. In your workspace create a new project sub-directory named: css-grid-lab
  2. Create 4 html files named:
    1. grid-two-col-left.html
    2. grid-two-col-right.html
    3. grid-two-col-stacked.html
    4. grid-two-col-equal.html
  3. Populate Each File with the starter code located here: Starter Code
  4. Add a nested list to your course homepage with links to each file.

Assignment

Make sure you have completed the CSS Grid Garden exercise and post a completion screenshot to your course homepage. We will complete an in class lab on Monday using CSS Griid. Be prepared.

Positioning Lab Debrief

Assignment

Complete CSS Grid Garden and Post a screenshot of the final exercise – https://cssgridgarden.com/

Make sure your positioning labs are loaded and linked from your course homepage

At this point your course homepage should have the following assignments posted and linked:

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)

Building an Accessible Content Carousel

Be sure to publish your work to GitHub and add a link to the demo we built to your course homepage.

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)
  • CSS Grid Garden
  • CSS Grid Layout Lab
    • Two Column Left Align
    • Two Column Right Align
    • Two Column Stacked
    • two Column Equal
  • Mars Rover or equivalent project (First Draft)
  • Cycle Lab (Image Slideshow)
  • Mars Rover Revised – Final
  • Progressive Enhancement Writing Assignment (Written on Course homepage)
  • Mars Rover Project Revision and Reflection (Written on Course homepage)

Assignment

All work is due – Sunday, May 10, 2026 by 10:00 pm. No work submitted after this time will be accepted. No Exceptions!

For this assignment, I ask that you collect feedback from a peer, family member, or a friend on your first attempt at the Dragon or Segway project. Using that feedback, I’d like you to attempt to address any issues or problems pointed out by your potential users. You should provide a link to the revised project (duplicate the project directory in codespaces and then add a link to the revised project). You should also provide several paragraphs reflecting on the learning experience working on this project and your experience during the semester. What were the things you did well? What would you do differently if you had to start over? Also report on the feedback you received and what you did to address those issues or why you chose not to make the recommended changes. This should be posted on your homepage under the progressive enhancement writing assignment.

Your course homepage you include the following assignments by then end of the semester.

(Example)

  • Prototype HTML Assignment
  • CSS Demo
  • Positioning Exercises (These 4 are required but you could do extra for additional credit)
    • Float 1
    • Float 2
    • Absolute 1
    • Absolute 2
  • Flexbox Froggy
  • CSS Diner (Extra Credit)
  • CSS Grid Garden
  • CSS Grid Layout Lab
    • Two Column Left Align
    • Two Column Right Align
    • Two Column Stacked
    • two Column Equal
  • Mars Rover or equivalent project (First Draft)
  • Cycle Lab (Image Slideshow)
  • Mars Rover Revised – Final
  • Progressive Enhancement Writing Assignment (Written on Course homepage)
  • Mars Rover Project Revision and Reflection (Written on Course homepage)

Introduction to CSS

Assignment

Put the finishing touches on your CSS demo and make sure it is posted and linked from your course homepage. This exercise should reflect the work we have done together in class the last two weeks. It should reflect your own design choices (color, fonts, margins, padding) and not be a one to one replica of my work in class. If you submit a copy paste of my work, you will not receive credit.

When we return from Spring Break we will have some lab exercises on different layout techniques. Please review this resource prior to class on that Tuesday.

Read: Practical Guide to Relative and Absolute Positioning

Introduction to CSS

Assignment

Complete the exercises at Flexbox Froggy. Link a screenshot of the completion page for exercise 24 on your Github homepage. You’ll need to take a screenshot, upload to your codespace and then add a link to file on your homepage.

Introduction to CSS

  • How to submit screenshots on github
  • Discussion: Evaluating the Impact of Web Solutions
  • Things to consider reflect on:

What web technologies or development tools might be used to build this website?

How might this website affect individual users such as parents, students, or volunteers?

How could this website affect River Valley Youth Athletics as an organization?

How might this website affect the broader community?

What are some design decisions that would improve the website’s usability, accessibility, or ethical impact?

 

 

HTML Knowledge Check

  • Take Quiz in Blackboard
  • Review Github Setup and Usage
  • What is Validation?
  • Set Up Assessment Workspace

Web Related Terminology

Assignment

Setup an Account at Github. The free account is acceptable for the work we will do in class. Make sure you make note of your credentials and verify your account email address when signing up. Do this before class on Wednesday as we will be using it in class.

Assignment – Please complete the discussion question in Blackboard. Due 2/9 before class.

 

Be sure to add to your calendar and attend when you need assistance. These are not mandatory.

Weekly Lab Class Fridays
9:00 – 10:00am
Video call link: https://meet.google.com/feg-bdcu-eur

Additional Reading

Timeline of the Development of the Internet

Course Introduction

Course Syllabus

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
  • GitHub (Student Pack) – Code Versioning Repository for submitting assignments\
  • Pixlr – Cloud Based Image Editing Tools

Discussion