10 lifesaving HTML/CSS tricks for designers

Learning new things brings both joy and frustration, and development sits on the top of the frustration pyramid. Sadly, most job offers require that you both design and develop websites nowadays, so knowing how to code at least some front-end is crucial as a UX/UI designer.


Let me give you some tricks that helped me a lot while developing a couple of websites in these years.


10) The magic setup

This trick helps you prevent most of the bad-layout problems you can encounter in HTML.

Horizontal sliders, absolute-positioned items doing what they want, margins, and padding randomly everywhere: we don’t want them.


* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

Then, if you need to change something, you edit it on the specific item.

sometimes “display:block” could be harmful, but in most cases, you’re going to treat <a> and <span> as blocks like others.


9) Animated lines and decorations


you can see the line when I hover text.


Often you want to create interesting effects like animated underlines, appearing and disappearing background, etc.


Don’t create a new element, just utilize ::after and ::before pseudoselectors. They work great for these things.


Do not forget to set content property: if you forget it, the pseudo-element will not be rendered.


.item::after {

content: "";
position: absolute;
top: xyz;
left: xyz;
... properties you want;
}