Second attempt at Tribute Page. How do I visualize my use of divs?

I started over from scratch on my tribute page and am trying to flesh out the HTML part before the CSS, making sure to use a lot of divs this time. I just wish there was a visual aid to help with the divs. Maybe I will leave notes.

Judging from what I can see in how the divs are nested, it goes like this:

there is div “main”. div “image” is nested in div “main”, and so is div “tribute-info”.

So the boxes of the elements are nested in the divs like this:

—img caption
end of main

I’m already getting confused trying to type it out. When I try to separate them out looking at them, it kind of gets to the point where all my brain and eyes sees is not an element tree, but a bunch of abstract letters and numbers.

One trick for visualizing your divs is to add the following rule to your CSS.

div {
  border: solid 1px red;
  margin: 2px;

This will allow you to better see what’s going on.

Hope it helps!

1 Like

I would try to use more semantic tags such as header, main, et al. It will make it easier to update and navigate the layout when you need to quickly find sections. You can better format the sections by their tag names as well, which will make it easier to visualize the overall layout.

This helps a lot, guys. Thank you, I will try it out.

It’s so close to finished, I just need to get past " 1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size."