Making a product website

My notes on building a product website

The process

  • 🎨 Start by drawing in a notebook, to get a feel for what to build
  • 🖥 Then start designing each page in sketch for macOS (For mobile and desktop layouts)
  • 🙉 Then start building each page in isolation in CSS, just get the layout roughly complete
  • Then start to connect the pages together in css
  • Then start refining the css by adding images, fonts, colors, dropshadows etc
  • Then start making subpages, and link them up, so everything is clickable and works
  • Then add responsive.css, make sure the website also works in horizontal layout on mobile devices
  • Then Build the html in Jekyll, so that we can have a blog, and reuse html/css elements across pages
  • Add Google analytics, MailChip to the newsletter component, and add Custom fonts and animation


  • We do things in steps to not lose our bearings. Modern websites are complex, focusing on a subset at each step, makes things easier
  • Jekyll enables you to host your site for free on github, deployment is easily done via Github desktop.
  • Always start with pure CSS and HTML before adding backend and javascripts etc