Making a landing page from scratch


For me it’s hard to use something existing and trying to customize it. When something has matured, it’s hard to wrangle it to be something else. Unless the changes are miniscule. They often are not. Building something from scratch is sort of simpler, because you can always start with simple bricks and a state that is pristine and has no legacy and things to worry about. But what do you start with?

Sketch out the design in a notebook, one for desktop, and one for mobile. And use figma or sketch to make the blueprints how the site should look. Use a 12 column grid with gutter and margins. Google this to get the sizes needed. Elements should snap to the 12 column grid. try to use simple row spacing. like 6, 12, 24, 32, 48, 96, 128 etc.

  1. Start with the fundamentals. Simple divs. Simple colors. Figure out the basic layout alignments and page structure. Just create pseudo code at first to just figure out the scope. Then comment out everything but the basics, and slowly convert the pseudo code to production code. We do this because HTML and CSS is such a messy language, and you often times get stuck if you start coding production code from the beginning. Basics of css: #id is more unique elements and .class common reusable elements (CSS, HTML)
  2. Add Simple text and dummy images (CSS, HTML)
  3. Start adding links and sub-sites (CSS, HTML)
  4. Start moving html code and css into a backend system, jekyll wordpress etc
  5. Once the site works for desktop. It’s now time to retro-fit it for mobile.

Happy coding