Introduction to Web Dev: Let's Build Netflix! (Bootcamp #2 of 2)

Brunel University London
Wed, Nov 11, 2020, 4:00 PM (GMT)

About this event

Learning a new skill is hard. There is a LOT of theory - sometimes it's nice to have a guide and know that at the end of it you'll have something to show off. That is exactly what we are doing!

In the first part of this Bootcamp series, you will learn how to develop the landing page for the super popular Internet Streaming Service, Netflix using HTML5 and CSS3 (even if you have no experience)!

With the help of Zaio (A web development training agency based in Cape Town South Africa) - you will be able to create a Netflix Landing Page even if you have never coded before! This is a great experience for anyone who has considered getting into web development!

To be able to make the Netflix clone YOU MUST attend both workshops:

Workshop 1:

Learning the basics of HTML & CSS through building the Netflix landing page, such as the basic HTML attributes, classes, CSS selectors, and much more.

  • What is HTML and CSS?
  • Terminology and syntax
  • HTML tags
  • File naming and project setup
  • Anchors
  • Attributes
  • strong and emphasis
  • CSS basics
  • Classes and Ids
  • Internal & external CSS
  • Borders
  • The box model
  • Margin & padding
  • Lists
  • Images
  • Centring elements
  • Styling your page

Workshop 2

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!