OIM3690 - Web Technologies

2025 Spring

Session 03 (1/28)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Class Review
  • Formatting Code
  • Session 03
    • images
    • links

Welcome/News/Announcements

  • Please check your Canvas notification settings.
  • Please add me (zli@babson.edu) as collaborator to your GitHub WebTech repo.
  • Exercises: ex01.html
    • Remember to commit and push your code/changes 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"
    • Use Slack/GitHub when asking code-related questions
  • Questions?

How to Ask Questions via Slack/GitHub/Email

  • What were you trying to do?
    • The problem and context
  • What did you do?
    • Any relevant code snippets, or GitHub link to the code
  • What did you expect to happen?
  • What actually happened?
    • Screenshots or descriptions of any strange behavior or errors
    • Any relevant debug console or terminal output, such as error messages

What we have learned so far...

  • HTML:
    • Basic tags
  • Quick Quiz:
    1. What is HTML?
    2. How many different HTML headings are there?
    3. How do we break a line?
    4. How do we add a copyright symbol?
    5. Does pressing Space key multiple times create multiple whitespaces between words?

Common Beginner Issues in ex01.html

  1. <hr></hr>

  2. <p1>I chose Babson...</p1>

  3. <body>
  ...
  <p></p>My favorite sport is <strong>table tennis</strong>
</body>

  4. <p>My favorite sport is <em>basketball</p></em>

Formatting is Important

  • Always use lowercase for
    • element names - i.e. <head>, <h1>
    • file/folder names - i.e. ex01.html
      • Many web servers (e.g., Unix, Apache) are case-sensitive.
  • Indent your code
  • Avoid unnecessary whitespaces

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
  • You may need to install VSCode extension - prettier

Debugging

  • Always format your code
  • Use Chrome DevTools
    • Press F12 in Chrome
    • or Ctrl + Shift + I (⌘ Command + Option + I on macOS)
    • or right-click and inspect.

Session 03