OIM3690 - Web Technologies

2025 Fall

Session 09 (9/23)

Today's Agenda

• Welcome/News/Announcements
• Class Review
  • Layout (Flexbox and Grid)
  • Assignment 1 Reflection
• Lecture
  • SVG
  • Form

Welcome/News/Announcements

• Homework 1 will be graded before next class.
• Please sign up for GitHub Student Developer Pack ASAP if you haven't done so.
• Quiz Policy
  • Future quizzes are each worth 2–3 exercises.
  • There will be occasional unannounced quizzes.
  • No make-ups without a documented excuse.
• Communications:
  • Meet with me in person during office hours at least once this semester.
  • Email - specify course # in subject title, e.g., "OIM3690: GitHub settings"

What we have learned so far...

• Tools: VSCode, GitHub, Chrome Developer Tools
• HTML
  • Tags: h1, p, img, a, ul/ol, div, span, table, video, iframe, ...
  • Attributes: href, src, alt, title, class, id...
  • Block-level vs Inline elements
• CSS
  • Syntax: selector {property: value;}
  • External vs Internal vs Inline
  • Selectors: element, class, id, descendant, child, attribute, pseudo-class, ...
  • Layout: Normal flow, Floats, Positioning, Flexbox, Grid
• HTML Vocabulary and CSS Vocabulary

Recommendations

• HTML:
  • Every HTML Element
  • A Blog Post With Every HTML Element
• CSS:
  • position: sticky
    • Slide stacking effect
    • Image stacking
    • Sticky table header
  • How To Learn CSS

Test your skills

• Flexbox - Task 1
• Flexbox - Task 3
  • What about centering the text inside?
• Grids - Task 1
• Grids - Task 3

More about Flex and Grid Layout

• Visual guides to Flexbox CSS properties
• Visual guides to Grid CSS properties
• Grid by Example
• The Experimental Layout Lab of Jen Simmons

Assignment 1 Reflection

• What did you learn from this assignment?
• What was challenging?
• What will you do differently next time?
• What do you plan to add to your personal website next?

Lecture

• SVG
• Form