Introduction to Web Development with Zaio - Workshop 2

University of St Andrews
Sat, Oct 24, 2020, 12:00 PM (BST)

About this event

Diving deeper into HTML & CSS through building the Netflix landing page using display properties, media queries for mobile optimization, and a couple of animations and transitions. Netflix clone added to your portfolio.

  • Display, Span, Images, block, inline, inline-block, none
  • Flexbox
  • CSS grid, Columns And Grids
  • Position
  • CSS Units - What is the best measurement to use, px, em, %
  • Media queries
  • Web prefixes - Webkits
  • Netflix demo covering - Background images, Overlaying, Changing button shapes, flexbox, position & picture alignment, html5 video component, Styling nested divs
  • How to come up with a div structure when looking at a page - recommendations
  • Transitions - will cover position here
  • Add transitions to Netflix landing page
  • Have the Netflix landing page clone built and added to your portfolio!


  • VS Code (with Live-server extension)
  • Google Chrome