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 (Desktop and optionally mobile)
  • 🙉 Then start building each page in isolation in HTML+CSS, just get the layout roughly complete
  • Then start to connect the pages together in HTML + 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 (or jut make one landing page)
  • Then add responsive.css to support mobile screens, make sure the website also works in horizontal layout on mobile devices
  • (Optional) Then re-build the html in Jekyll, so that we can have a blog, and reuse html/css elements across pages
  • (Optional) Add Google analytics, MailChip to the newsletter component, and add Custom google fonts


  • 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
  • Just begin. Start a markdown page and write only divs with dummy colors. Then improve as you go. Dont try to solve everything from the start etc.
  • Get as much feedback as you can after a couple of revisions in sketch.
  • It can sometimes be a good idea to make a couple of variations in sketch.

Similar posts:

  • responsive landing-page
  • how to make a landing site
  • making a landing page from scratch
  • how to make a simple one page landing page