OIM3690 - Web Technologies

2025 Spring

Session 21 (4/10)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Deploy a Static Website with GitHub Pages
  • Lecture:
    • More on Array
    • More on for loop

Welcome/News/Announcements

  • Project
    • Create a public GitHub repo for your project website
    • Product Requirements Document (PRD): Due 4/12, Saturday
  • 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, image, link, list, id, class, div, span, table, form, multimedia, ...
  • CSS: syntax, internal vs. external vs. inline, selectors, flexbox, grids, ...
  • Website: design, ...
  • JavaScript
    • Event, element
    • Variables, types, functions
    • Conditional statements
    • Access and validate form inputs
    • Array
    • Iteration: for loop
  • Debugging

🌐 Deploy a Static Website with GitHub Pages

  • On GitHub.com, create a public repo <your-username>.github.io
  • In GitHub Desktop:
    • Clone the repo
    • Add your website files (e.g. index.html, etc.) into the folder
    • Commit and Push
  • Done! 🎉
    • Visit: https://<your-username>.github.io
    • GitHub Pages auto-publishes from the main branch. No extra setup needed!
  • (Optional) Connect a custom domain:
    • In your repo → ⚙️ Settings → Pages → Add custom domain

Arrays and Iteration

--- # Quick Survey Do you use the following type of software or apps? If ***yes***, **what** do you use? * Time management/To-do * Note-taking * Password manager * AI tools (besides ChatGPT) --- # Software (that I use *almost* daily on <i class="fa-brands fa-windows"></i> ): - AI Tools: ChatGPT, Claude.ai, Perplexity.ai, GitHub Copilot, Cursor - To-do: [TickTick](https://ticktick.com) - Note taking: [Notion](https://www.notion.so/), [Obsidian](https://obsidian.md/) - Password manager: [Bitwarden](https://bitwarden.com/), [1Password](https://1password.com/) (paid), iCloud Keychain (for Apple) - Programming: VS Code, Git/GitHub, [Windows Terminal](https://github.com/microsoft/terminal) - Utility tools: - [Everything](https://www.voidtools.com/support/everything/) - Fast search in Windows - Microsoft [PowerToys](https://learn.microsoft.com/en-us/windows/powertoys/) - [f.lux](https://justgetflux.com/) - adjust screen color temperature - Snipaste - Telegram / Slack / Discord