Skip to content
Gallery
Business Development
12dd Organizational info 👋🏾
Web Dev
Pre-Dev checklist
12dd Timeline
Client Development
Share
Explore

Pre-Dev checklist


Gaps:

Padding/Margin
Stacks - p/m - 20/20px
Containers - p/m - 20/20px
Sections - 20/20
Grids - padding
Between sections
Major - 80
Minor - 40

Font:

Base font (16px) Find scale - H1, H2, H3, H4, p1, p2, p3, button font, (primary, secondary, tertiary)
⁠
image.jpeg
⁠
⁠

Colours

(primary-main, secondary- xxx, buttons,


Design Assets

jpeg images
webp images
Compress

​Icons

jpeg images
webp images
Compress
Gradients
Buttons

2) Development Checklist🏅


Set breakpoints - 4 total (all standard breakpoints max and min)
Icons should be in pixels
Build sections laterally vs vertical (top-bottom)
Build with breakpoint measurements -
1587 and up
1280 (1585 - 1001)
735 (1000 - 750)
420 (749 - 320)
Use Viewport Height (vh) for sections - desktop to mobile
Use percentage (%) for grids - desktop to mobile
Troubleshooting for bugs (set section or container to auto then set back to vh)
Add page transitions
Add all H tags (H1, H2, H3, H4, P1, P2, P3)
Have a notebook for designs
Set standard gap size (px) for stacks
Set standard margin size for page sections
Add alt text to all pictures on all pages
Use sections as gaps for main sections (in pixel)
Use (fr) for width measurements only - 2fr
Change text behaviour to wrap, xxx
All pictures on mobile have to be one height in vh (40vh)
Work on Equal and balanced spacing (between sections, cards, more)
Make your LCP text based
For grids: 2x2: row height - 50% x 2, means section height must be determined. Row height - 50vh/maxc x 2, means section height is automatically determined by row height x 2.
For grids: Type 2 above for: random sized grids and cards. Type 1 above for: perfect grid symmetrical grid
Mobile Stack spacing (32px standard) - add 32px as top and bottom padding of card stack is in
Image - 40vh standard)
Padding - 20px standard
Scale properties for smooth transitions for card corners on all break points



Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.