Tech for PMs 1 - Build your own landing page

Message from Yann

[Landing page]

In this free workshop you'll code and design your own landing page using HTML/CSS & the Twitter Bootstrap CSS library. We will also cover lots of design pro-tips to find icons, fonts, colors.

👉 Overview

  • Go through HTML / CSS core notions
  • Discover lots of graphical tips and tools (fontawesome, Google Fonts, Coolors, etc..)
  • Introduce Bootstrap and its responsive grid system

Pre-Session Materials

👉 Pre-requisite

  • No pre-requisite, this is a workshop for beginners!
  • This is a 100% online workshop on Zoom
  • Install Chrome (https://www.google.com/chrome/browser/desktop/index.html) and VS code (https://code.visualstudio.com/) before coming

Session Materials

Link for workshops platform:



Post-Session Materials

Design mantra:

  • Good design = design you don’t notice, be simple and subtle
  • If you’re a bad designer, be a good design copycater!
  • Begin with fonts and colors
  • For well proportioned sizes, use multiple of 8px ( 8px, 16px, 24px, 32px, 40px,..)

Great references for…

And more:

Yann’s UI kit