OIM3690 - Web Technologies

2025 Spring

Session 06 (2/06)

contain

Today's Agenda

Welcome/News/Announcements

  • Office Hours
    • By appointment: in-person (preferred) or Webex (please specify)
    • VSCode extension - Live Share
  • Graded Homework 1 due 11/14 Friday
  • 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
  • CSS
    • Syntax
      • <style> must be located inside head!
      • selector {property: value;}
    • Box model
    • Block-level elements VS. inline elements
    • position
  • HTML Vocabulary and CSS Vocabulary

Quick Quiz

  • How do we change the text color of an element, say p?
  • How do we move an element, say an img, to right side and the rest of the content flows around it on the left side?
  • How do we fix the element to the top-left corner of the page?
  • How do we fix it to the bottom-right corner of the page?
  • How do we fix it to the center of the page?
    • transform: translate(-50%,-50%);
    • or use Flexbox
  • More about position: MDN, CSS-Tricks, W3Schools

Use GitHub/Issues or Discussions

  • Please check Issues on your GitHub repository WebTech.
    • Reply if we need to continue the conversation.
    • Reply (with evidence) and Close if you think it is fixed.
  • If you have any question regarding class content/demo code

Session 06

--- <style scoped> h1 { font-size: 1.5em; } </style> # Debugging 101 - What to Do When Coding Gets Tough 1) Do you understand **concepts** and **syntax** being used? 2) Have you attempted **example/demo code**? 3) Have you read **supplemental** materials? 4) Have you tried any **debugging approaches**? 5) Have you had enough **rest**? Are you feeling tired or stressed? 6) Have you asked for **help**? 1) Reach out to your peers, professors, or online communities. 2) Remember to give credits for use of code and **cite URLs as references in comments**.