Frontend Development: JavaScript

🚀 ReDI Fall 2020 🚀

Lecture 18

Semantic HTML

What we will do today

  • Analyze an HTML page
  • Show the correct usage of some semantic tags
  • Exercise
  • Events and callbacks
  • Chrome DevTools

Analyze an HTML page

Analyze an HTML page

  • html lang
  • meta viewport
  • links and scripts loading
  • DOM parsing
  • image loading
  • assets preloading

Semantic HTML

  • header
  • nav
  • main
  • aside
  • footer
  • section
  • article
  • paragraphs
  • anchor
  • ul/li

Semantic Forms

  • label for
  • input type
  • fieldset legend
  • button

Exercise

Refactor my website replacing all the div by the correct tag

Events and Callbacks

Events and Callbacks

Events and Callbacks

Events and Callbacks

Events and Callbacks

  • DOM Events
  • XHR and fetch
  • setTimeout, setInterval
  • Promise vs Callback

Exercise

Return a Promise from a setTimeout event