HTML


John Alexis Guerra Gómez


Slides:http://johnguerra.co/lectures/webDevelopment_fall2023/02_HTML/

Class page:http://johnguerra.co/classes/webDevelopment_fall_2023/

Readings discussion

  • questions?

Random Questions

  • What's a class?
  • What's an attribute?
  • What's the id?
  • What's the difference between the head and the body
  • Content vs Style
  • What's the DOM

Setting up your environment

Working online

  • Good for quick coding
  • All being taken care
  • Can share links
  • Good for asking questions
  • I recommend JSFiddle

Working locally

  • Better for debugging and organizing
  • Need setup
  • Better linters!!
  • I recommend Sublime
  • Or VS Code with Copilot

Setting up locally

Group Exercise

Here are some of the SF Airbnb listings for Sept 2023. Let's design a web page to display them and rate them.

Audience and objective

  • Who are we targeting? Users
  • What do we want them to do? Task

Resources

What do we have to show?

  • Listing
    • Host
    • Listing Info
    • Price
    • Images
    • Date
  • Neighborhood?
  • What else?

Wireframe it

Test it

Code it

Web Developer tools

Exercise

Design and write the HTML of your home page

  • Code it and put it on github

Share your results