Thomas Wallace

Lectures and Resources

Web Technologies

Spring 2026 | IFSC 11003

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)

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