OIM3690 - Web Technologies

2025 Fall

Session 10 (9/25)

contain

Today's Agenda

Welcome/News/Announcements

  • Homework 1: Grades are posted on Canvas
  • Please sign up for GitHub Student Developer Pack.
  • 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...

  • Tools: VSCode, GitHub, Chrome Developer Tools
  • HTML
    • h1, p, img, a, ul/ol, div, span, table, video, iframe, form...
    • Attributes: href, src, alt, title, class, id...
    • Block-level vs inline elements
  • CSS
    • Syntax: selector {property: value;}
    • Selectors: element, class, id, descendant, child, attribute, pseudo-class, ...
    • Layout: normal flow, floats, positioning, flexbox, grid
    • Responsive design with media queries
  • HTML Vocabulary and CSS Vocabulary

Quick Quiz

  • How do we center an element horizontally?
    • text-align: center; (for text inside a block-level element)
    • margin: 0 auto; (for block-level element with a specified width)
    • display: flex; justify-content: center; (for flex container)
    • display: grid; justify-items: center; (for grid container)
    • Fun but informative reading: Hardest Problem in CS: Centering Things
  • What is the commonly used tag to embed other content/document?
    • <iframe>
  • What is svg?

Quick Review of form Element

  • What does action attribute of form specify?
    • URL to which the form data is sent when the form is submitted
  • What are the two most common form methods?
    • GET and POST
  • Is form a block-level element?
  • Is label a block-level element?
  • How do we select all inputs that have type="text"?
    • input[type="text"]
  • How do we set width of an inline element, such as span or label?
    • Use display: inline-block
    • Use flexbox (if inside a flex container)

HW1 - What I look for in grading

  • Code
    • Code correctness (HTML/CSS validation)
    • Code quality (semantic HTML, indentation, comments)
    • Visual design (layout, colors, typography, spacing)
  • Creativity and effort
  • What you learned from the assignment

HW1 - Reflection on AI

  • Many did not specify which AI tools or how they were used (e.g., prompts).
  • Some only listed AI-generated edits without explaining why the changes were effective or ineffective.
  • I value iterative improvement with AI coding, not one-shot outputs.
    • Write the documents by yourself, not AI.
  • A lot of grammar & formatting mistakes in Markdown.

HW2 Ideas (tentative)

  • Enhancing index.html
    • Redesign navigation bar
    • Responsive design using Flexbox/Grid
    • Other elements: favicon, video, semantic tags, ...
  • Project Showcase Page (projects.html)
  • Contact Form Page (contact.html)
  • Iterative improvement/conversion with AI
  • Any other ideas?

A Brief History of Web Design

Website design

Document and Website Structure

Publishing Website

  • Publishing your website
  • Create and deploy a static website via GitHub Pages in 5 minutes
    • Follow Quickstart
    • Create a new repository named <your_github_id>.github.io
    • Add index.html to the repo root

Linking Project Repository to Your Domain (Optional)

How the Web works