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