Visualizing HTML and CSS

If you are like me, then you also enjoy sketching things out. There’s something about seeing my code drawn out that helps me to make sense of it. So when I first started out with HTML and CSS, I would lay it all out in Google Draw:

Google Drawing of my HTML
The HTML, in question

This visual made so much more sense to me than the lines of text. An added benefit was that it helped me to structure my CSS as well. Margins, borders, and padding might as well have been targets on an unseen dart board for all I knew about them. Before I did the Google Draw I would just throw a dart into the abyss and see if it landed where it was supposed to. With the visual though, all that mystery cleared up instantly.

Pro-tips if you’d like to Google Draw your HTML as well:

  • Include all your class names and Id’s
  • Make siblings the similar shades of the same color
  • Draw as you code. Seeing what my HTML looked like in real time helped me to see where I was going with things.

And of course, here was the final result:

Yay! Final design

It was a simple website that used and external API to help decide what you should eat for dinner tonight. If you’d like to take a peek at if yourself, you can find my repo here.

Full-Stack Software Engineer