Grid architecture - how to view grid inspector in Chrome

I am working on the Angles blog project https://www.codecademy.com/courses/learn-css/projects/grid-architecture. I am struggling to envision the grid structure in my head (so that I can work out how to overlap elements) and want to view the grid inspector using the Chrome developer tools. I can do this when viewing a normal web page but when using the browser split 3 ways for the Codecademy modules, I don’t know how to view the html/css for the right hand section so I can see the grid. Any suggestions? It’s probably something really obvious! I am a complete beginner and only started coding a few weeks ago.

https://www.codecademy.com/courses/learn-css/projects/grid-architecture

Hey there @emilyrichards9097863 :grinning:

If I am understanding your question correctly,
you use Chrome dev tools to view the page the same as else where.

If you hit the inspector button at the top left corner of the dev tools, you can hover over an element to view its HTML and CSS.


An alternative idea would be to copy your code onto your computer and view it through your webbrowser. You could also copy your code to an online editor like repl, and view it there.