OIM3690 - Web Technologies

2025 Spring

Session 12 (3/04)

Today's Agenda

• Welcome/News/Announcements
• Review
• Lecture
  • Document and Website Structure
  • Website design
  • Publishing Website
• How the Web works

Welcome/News/Announcements

• It seems many have trouble getting GitHub Student Developer Pack.
  • We will publish website via GitHub Pages using public repo.
  • Other free options: Vercel, Cloudflare Pages, Netlify, etc.
• Next Class:
  • Quiz on HTML + CSS
  • Start JavaScript
• 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, multimedia
  • Block-level elements VS. inline elements
• CSS
  • Syntax
  • Internal CSS vs. external CSS vs. inline CSS
  • Selectors - basic, advanced, pseudo-elements ::, pseudo-class :
  • CSS layout: flex, grid

Quick Quiz

• How do we center an element horizontally?
  • text-align: center;
  • margin: 0 auto;
  • display: flex; justify-content: center;
  • display: grid; justify-items: center;
• What is the commonly used tag to embed other content/document?
  • <iframe>
• What is svg?
  • Scalable Vector Graphics
  • YouTube: SVG Explained in 100 Seconds

Coding Conventions

• HTML Style Guide and Coding Conventions
• Google HTML/CSS Style Guide

A Brief History of Web Design

• Web Design Museum
• Wayback Machine - Internet Archive
• Version Museum
• Internet Artifacts

Document and Website Structure

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

Website design

Publishing Website

• Publishing your website
• Linking Project Repository to Your Domain
  • Add index.html to your project repository.
  • Acquire a domain
    • Free domain (.me, .live, .tech) from GitHub Student Developer Pack
    • Paid domain from any domain registrar
  • Follow the steps of setting up github pages with your domain.
  • Add repository description on GitHub.
  • Test your website.
  • Submit project domain to Canvas.

How the Web works

• MDN: How the Web works
• MDN: How Web Application Works
• GitHub: How the web works in detail