From the course: CSS: Advanced Layouts with Grid

Unlock this course with a free trial

Join today to access over 24,300 courses taught by industry experts.

Drawing layouts with pen and paper

Drawing layouts with pen and paper - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

Drawing layouts with pen and paper

“

- [Instructor] This may sound silly, but in my earliest days of working with the web, long before CSS Grid was available, or even Flexbox for that matter, I would take a pencil and paper and draw out the layout I wanted. At that point, I was using this technique to help me understand how to write logical and semantic HTML. Fast forward to present, and this is still a technique I like to use, except now in addition to visualizing a page layout, it's helping me think through how I'm going to use grid. Because grid works from the outside in, you have to define your grids before you start placing items in them. Which means having a rough idea of what your grid or even multiple grids will look like before you start writing CSS. So here's an approach I like, and just for the record, I'm not pulling out my ruler to make straight lines or do any formal wire framing. Literally just taking a pen or pencil to a piece of paper. First, I start with some drafts about how I want my layouts to appear…

Contents