HTML

  • Document structure
  • Transport
  • Elements
  • Debug
  • Home task






Document structure

  • Text file
  • XML-like structure
  • Doctype
  • Tags (self-closing tag), attribute, comments 
  • HTML5
 

<head>

Elements that can be used inside a <head> element: <title>, <base>, <link>, <style>, <meta>, <script>

<body>


WTF, IE 7?

Transport


HTTP

  • HTTP is a stateless protocol
  • DNS, NAT (ping)
  • Man-in-the-middle (tracert)
  • GET, POST
  • First rule of remote communication – Don’t
  • SPDY

Elements

  • iframe
    • same-origin policy
    • mixed content security  
    • X-Frame-Options
  • video
  • audio
  • canvas
  • svg
  • contenteditable
  • localStoreage vs cookie
  • DOM
  • load vs DOMContentLoaded

Recommendation

  • How to structure elements
    • class name based
  • Load speed optimization
    • cdn
    • bundling
    • lazy-loading
    • cache, prefetch

Debug

  • Hosting
  • Editor
    • VS
    • notepad
  • Edit-save-F5
    • or live reload
  • Chrome dev tool
    • $0

Home task

  • Registration form (all inputs)
  • User profile
  • Product list

HTML

By Vladimir Gaevoy