Webpage planning steps
create layout
- identify sections first. (navbar, footer, hero etc.)
- identify the elements (images, dropdown, searchbar) in the section
- decide how to group elements (flex or grid) for a groups of elements in a section
use semantic html
Most commonly used:
- header - general header or of a section
- nav
- section
- article
- aside
- footer
Use them instead of div as a container element.
design examples
UI examples for different tasks Checklist for UI compponents