gotcha! wireframes and the power of intuitively grasping css.

a mock-up is a non-interactive “image” of a webpage that represents what it should look like while giving a general idea of the purpose (such as a nav-bar or a button) of its respective elements while a wireframe actually breaks down its elements into their constituent tags and functions. the mock-up can be done by an artist with little to no knowledge of code, while the wireframe would have to be done by the coder or team of coders in order to simultaneously work on the page without disagreeing on how the different elements actually tie together.

:first-child is a great way to only modify the first child of an element and :not(selector) would be very useful to select all elements other than one particular element you want to remain untouched.

selectors and pseudo selectors alone were a great “gotcha” moment regarding the power and usefulness of css, in addition to learning of the syntax of selectors (using spaces to select all children/grandchildren, using > to specifically select a child). learning the grid-template-area and flex properties also went a long way in demonstrating the power of laying out a solid foundation for the limitless possibilities of using html/designing satisfying websites. but to be honest, almost every single “thing” i learn about css is a pretty major gotcha moment, since its power rests in creating an entire library of pure aesthetic functionality which a 2d page can physically encompass.