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
Gotchas
- 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