Making A Product Website

My notes on building a product website

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

Making a product website