The seven skills every Designer needs to know

Web design skills

Are a bit like the infinity stones Thanos was chasing. Except they are much more tangible (they don’t involve a trail of destruction and otherworldly beings). And instead of being tied to different aspects of the universe, they have to do with the powers of the browser. Together, all six skills are the gems in the toolbox of designer skills.

Block Vs inline-block

To make a long story short, block-level elements(for example, a div) by default take up the full width of a page and sit on their own line. All this means is block-level elements don’t allow other elements next to them.

Inline elements (like a link) sit inline with other text - meaning other text sits next to it. Inline-block is a special hybrid category with characteristics of both block and inline-block(but kinda has its own quirky/unique behavior too!!).

Centering things

This skill is related to knowing the concept of block / inline-block. If you've ever tried to center a div, text (don’t forget to set it to inline-block!), or any other element of your choosing then you know how frustrating it can be to center stuff using CSS. Well, it's even more frustrating if you don't learn the right skills in the correct order(speaking from experience here). You’ll notice that these skills layer and build upon each other!

Like I said earlier, you don't just start centering stuff in CSS without more fundamental knowledge, like block / inline-block.

I like to use margin-right: auto; and margin-left: auto; for most block-level stuff, and text-align: center; for text (usually table cells and sometimes headings).

Browser / user agent styles

I'll admit I know the least about the technicalities of user agent styles. I’ll paraphrase what I was told. Every browser has default styling to ensure that pages render correctly. This might sound great, but only if you're not a developer! Sometimes you can swear you wrote your CSS to do a specific “thing” but wondering why your code isn't working for a user using browser X. By the time you realize that it’s the user agent interfering with the rendering of your design, you've got more than a few gray hairs.

Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser but you can help yourself by using a default style set when you start coding.

Box-sizing

This is another topic I learned further down the road. But some people never learn it! The default box-sizing rules end up rendering elements wider than we set them. Stuff like padding and borders gets distributed in unpredictable ways. Knowledge of the CSS box-sizing rule gives control back to developers. I like to use these “adjusted” settings.
More about box-sizing! It even has its own holiday

Typography / line-height units / letter-spacing / margin-top
When I first started learning web design, I remember thinking how overrated typography was. As far as I was considered, as long as the words were on the page I was happy. I had no concept of Design, let alone the subcomponents like visual hierarchy / visual patterns that go into creating a cohesive and memorable design.

I am fortunate to have great mentors who taught me the importance of test-driven user-centered design and prioritizing readability from the start of every project. In my projects, I use a MAX of two fonts per page- one for headings and another for body text. I use a unitless line-height and em unit for letter-spacing to set things relative to the font size.

Now that you have all that beautiful content with amazing typography on the page, things are starting to look pretty camped aren't they? Well, whatever you do make sure to set a margin-top on your elements, NOT a margin-bottom. Because you never know what will be beneath an element, but you DO know that you'll always need space above that element.

@media rule

The @media rule is an indispensable tool in the CSS responsive design toolbox. An example of a CSS function and control flow, you use this rule to apply CSS based on the user device. I usually use it to apply a set of CSS rules based on screen size(width and height), but you can use it to target everything from speech synthesizers to content meant only for printed documents!

Flexbox
The basics of flexbox are that you declare display: flex; on a block-level element to display the children elements in their default row position, or column if display: column; is set. Flexbox is a one-directional(X or Y axis) layout system that along with grid (to be discussed in a future blog post) are the most powerful CSS layout systems currently available. Considering that CSS was never meant for layout in the first place, you can imagine the warm welcome these systems received.

If these tools feel too difficult to read-through, let alone master.. Don’t fret! With a bite-sized approach and proper goal setting, anything is possible.

P.S. Special thanks to Sheriff Derek @ Perpetual.education for his consultation on the skills mentioned in this article!