OIM3690 - Web Technologies

2025 Spring

Session 05 (2/04)

Today's Agenda

• Welcome/News/Announcements
• Quiz 1 - HTML (Canvas)
• Review
• Debugging Practice
• Chrome Developer Tools
• Session 05 - Lists and More CSS

Welcome/News/Announcements

• Exercises: Feedback has been 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

Happy Groundhog Day!

• Try: Google "groundhog day"

What we have learned so far...

• HTML
  • basic tags
  • images
  • links
• CSS
  • Three types of CSS:
    • External CSS
    • Internal CSS
    • Inline CSS
  • What if there is conflict?
• Checkout HTML Vocabulary and CSS Vocabulary

Debugging Practice

• p {font-size:18;}
• p {font:arial;}

• img{
    margin-top: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
  }
  

• img{
    float: left;
  }
  img{
    border-color: red;
  }
  img{      
    border-width: 5px;
  }
  

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
  • Create New issue in OIM3690/WebTech
    
  • or Create New discussion

CSS Basic Box Model

Chrome Developer Tools (F12 / or Ctrl + Shift + I)

Session 05

• Lists and More CSS