OIM3690 - Web Technologies

2025 Spring

Session 11 (2/27)

Today's Agenda

• Welcome/News/Announcements
• Review CSS Layout
• Lecture
  • Multimedia
  • Document and Website Structure
  • Website design
• Quiz on CSS (if time permits)

Welcome/News/Announcements

• Next Class:
  • Please ensure you have received/requested GitHub Student Developer Pack.
  • We will be publishing project website.
  • We will be acquiring a domain for project website
• 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"
  • Use Slack/GitHub when asking code-related questions
• Questions?

What we have learned so far...

• HTML
  • Basic tags, images, links, lists, id, class, div, span, tables, forms
  • Block-level elements VS. inline elements
• CSS
  • Syntax
  • Box model
  • Selectors - basic, advanced, pseudo-elements ::, pseudo-class :
  • CSS Layout - Normal flow with float, flexbox, grids

Test your skills:

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

More about Flex and Grid Layout

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

Multimedia

Recommendations

• Web Design Museum
• Test your design skills
• Wayback Machine - Internet Archive
• Version Museum

Document and Website Structure

• Basic sections of a document
• HTML layout elements in more detail
• Planning your website
  • Very important!
  • Plan before writing code

Session 11

• Website design