Legacy Mistakes
HTML didn't just take over the world. In fact, there was a whole world before HTML. WUT? I know, I'm trembling in shock... but I hadn't been born, so, there kind of wasn't a world. And, HTML owes a lot to its predecessors. As do we all to our parents. Nonetheless, it's how we make code from text. Now, in four one-minute lessons, I'll teach the basics of HTML, CSS, and Responsive Design.
Before CSS Grid and Flexbox, designing for the web was a hero's journey. First, we set display to flex making whichever element a Flexbox-element as opposed to a CSS Grid-element. Then we set justify-content to center to center horizontally and align-items to center to center vertically.
Common Design Mistakes
Heres what I want you to take away from this example: Always write your CSS selectors with the very minimum level of specificity necessary for it to work. Including all that extra fluff may make it look more safe and precise, but when it comes to CSS selectors, there are only two levels of specificity: specific, and not specific enough.
Since I don't focus on just one element at a time, I commonly find myself accidentally typing out a redundant style declaration. I always do a final check after I'm done so that I can make sure that I haven't repeated any selectors; and if I have, I'll merge them.