The first step of coding a website is creating the interactive wireframes and prototypes. They are simple layouts to express the responsiveness using grids, modular type, modular spacing, and a few media queries.
Referenced lessons
This layout and series of videos combine together all these different lessons—so they should be watched first:
Video list
- Interactive wireframes: Setup grids & type
- Interactive wireframes: Header
- Interactive wireframes: Footer
- Interactive wireframes: Banner
- Interactive wireframes: Meat-/plant-eater section
- Interactive wireframes: Favourites section
- Interactive wireframes: Second page setup
- Interactive wireframes: Simple banner
- Interactive wireframes: Quick facts section
- Interactive wireframes: Intelligence section
- Interactive wireframes: Bunch of dinosaurs section
- Interactive wireframes: Push & pull
- Interactive wireframes: Grid offsets
- Interactive wireframes: Stretch & content fill
- Interactive wireframes: Simplified syntax