From Mockup Design to HTML code

Here follows a checklist / guide on how to create HTML5 code from a mockup design.

Start from here:

And finish here:


Page Layout

  • Identify Boxes and sub-boxes
  • Position Boxes / Use Grid system
  • Put (placeholder) content

Repeat the above steps progressively per ‘level’… from outer boxes to inner boxes. (See example below).

Box Layout

  • Use a CSS normalizer
  • Identify margins & paddings
  • Identify box styles
    • background color/style
    • border color/style
  • Identify content text styles
    • Font family, weight, color, style, etc…
    • Text positioning, overflow, etc…


Please visit the Github Project: From Mockup to Code