How the web works · HTML essentials · MP1 launch

Agenda Slides Open fullscreen ↗

Post-Class Notes

TL;DR

We looked at how the web works and started reading HTML. Your username.github.io site is your long-term project, while in class we work together in the oim3690 repo. Get comfortable with browser DevTools for inspecting any page, and kick off MP1 by finding a client and starting the conversation.

What we covered
  • Your personal website (username.github.io) is your long-term project. Keep improving it on your own time. In class, we work in the oim3690 repo
  • Copy the index.html that AI generated for your personal website into your oim3690 repo. This is the file we'll use to learn HTML by reading and modifying it
  • Browser DevTools (Ctrl+Shift+I on Windows, Cmd+Shift+I on macOS) is your best friend for this course. Use the Elements tab to inspect HTML/CSS and the Network tab to see requests
  • Changes you make in DevTools are temporary and local. Refresh the page and everything goes back to normal
  • You can use nslookup (or dig on macOS) to look up IP addresses for any domain, and tracert (Windows) or traceroute (macOS) to see the network path
  • RGB color values (e.g., rgb(255, 0, 0)) are more precise than color names (e.g., red). Both work in CSS
  • Your "I Don't Understand" questions from today's breakout are great. We'll answer them next class when we go deeper into HTML structure

To do before Wednesday (5/27):

  1. Find your MP1 client and start a conversation with them. Read the full MP1 instructions
  2. Copy your index.html from username.github.io into your oim3690 repo
  3. Update your oim3690 README using the README template. Fill in your name, semester, and add your personal website link to the Projects table
  4. Finish logs/wk01.md and start logs/wk02.md. In wk01, include your "I Don't Understand" list from today's breakout under the Questions section
  5. CP1 due Sunday 5/31: repos exist with correct structure, first 2 logs written
  6. Monday 5/25 is Memorial Day, no class