OIM3690 - Web Technologies

2025 Fall

Session 03 (9/02)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Class Review
  • Formatting Code
  • Lecture
    • HTML

Welcome/News/Announcements

  • Please check your Canvas notification settings.
  • Please add me (zli@babson.edu) as collaborator to your GitHub WebTech repo.
  • Your class work:
    • Remember to commit and push to GitHub.
    • Feedback will be provided in your GitHub issues section.
  • 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"
  • Questions?

How to Ask Questions via Email/GitHub/AI

  • What were you trying to do?
    • The problem + context
  • What did you do?
    • Key steps / relevant code snippet / GitHub link
  • What did you expect to happen?
  • What actually happened?
    • Error messages, screenshots, console output
  • Copilot Agent Mode
    • Can suggest multi-step fixes automatically
    • But it may change many files without you noticing → review carefully!

What we have learned so far...

  • GitHub Desktop
  • VS Code
  • First HTML page
    • Basic tags
    • Copilot examples

Quick Quiz

  • What is HTML?
  • Can you see the <head> content in the browser window?
  • What tags have you seen?
  • How many different HTML headings are there?
  • Does pressing Space key multiple times create multiple whitespaces between words?
  • Is HTML case-sensitive?

Formatting is Important

  • Always use lowercase for
    • element names - i.e. <head>, <h1>
    • file/folder names
      • Many web servers (e.g., Unix, Apache) are case-sensitive.
  • Formatting Rules
    • Indent code for readability
    • Avoid unnecessary whitespaces (browser collapses them anyway)

How to Format Your Code in VSCode

  • Alt + Shift + F (⌥ Option + Shift + F on macOS)
    • Or right-click and select Format Document
    • Or open the Command Palette with Ctrl + Shift + P (or ⌘ Command + Shift + F on macOS) and type Format Document
  • Install VSCode extension - prettier for consistent formatting.

Debugging

  • Always format your code
  • Use Chrome DevTools
    • Press F12 in Chrome
    • Or Ctrl + Shift + I (⌘ Command + Option + I on macOS)
    • Or right-click → Inspect
  • Ask Copilot/ChatGPT for suggestions
    • ⚠ Copilot agent mode may change many files.
    • Always verify in VSCode/DevTools.

Lecture