Select Page

How css-tricks improved my work life

by | Aug 30, 2018 | Development, JavaScript, HTML / CSS

My relationship with CSS is some kind of a love-hate one and I think that is a sentiment a lot of web-devs share with me.
My biggest issue with it is, that it is really counterintuitive and most of the time it feels a bit like solving puzzles to make things align the way you want it to.

and oftentimes it feels a lot like

Properties that mean the same thing being worded inconsistently – I’m looking at you…

vertical-align: middle;
text-align: center;

And there is also some questionable naming with ‘grey’ (#808080) being darker than ‘darkgrey’ (#a9a9a9)…
In general there are too many quirks you need to just know. Unless you work with it every day, you need to google every second line in order to write your stylesheets.
There you can find all sorts of guidelines, help, blogposts with a nice mix of bad-practices and outdated information.
What helped me a lot is the website css-tricks.

learn everything you need to know about front-end web development with css-tricks


One of the most common things I use is the almanac.

I usually consult it when:
– I can’t remember the name of a property
– I forgot the order of values for a property
– I find a weird line in an unfamiliar stylesheet
What I also really appreciate is the amount of additional information you get for each property and the way the information is presented.
You can easily find all of the info you are looking for and a lot of cool and useful stuff that you can also do with it.
Everything is nicely sorted with code examples and demos in which you can also try out your ideas.
In the comments are a lot of FAQ to the specific topic and can be pretty helpful too.


The page also has a section called ‘guides’.
Most of the guides are grouped by topic.
Just to name a couple of topics: there are ‘form validation’, ‘how to center elements’, ‘colour guides’ and ‘how to efficiently use flexbox’, just to name a few.
“form validation” for example contains:
– Constraint Validation in HTML
– The Constraint Validation API (JavaScript)
– A Validity State API Polyfill
– …
“typography” contains:
– CSS Basics: Fallback Font Stacks for More Robust Web Typography
– That Fluid Type Stuff Again
– Methods for Controlling Spacing in Web Typography
… and many more.

Reading those guides has become one of my favourite pastime activities. I really enjoy wrapping my head around complex problems and having those ah-hah moments!
I feel like my understanding of those mysterious CascadingStyleSheets grows day by day, and working with it is becoming a smoother process in general.


For all the users that prefer learning with some audio-visual input there is also a video section with useful tutorials and good-to-knows 🙂


CSS-tricks really helped me a lot with finding my way into web-development and I still use it for its excellent explanations.
I would recommend it to everyone who wants to or has to work with front-end web development, because it makes life so much easier 🙂

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald, bevor es sich aufmachte die Welt zu Erkunden. Seit September 2016 unterstützt es Icinga zunächst als Developer und seit 2020 als Developer Advocate, und NETWAYS als Git und GitLab Trainer. Seine Freizeit verbringt es hauptsächlich damit Video-, und Pen and Paper Rollenspiele zu spielen, sich Häuser zu designen (die es sich nie leisten können wird) oder ganz lässig mit seinem Cabrio durch die Gegend zu düsen.
More posts on the topic Development | JavaScript | HTML / CSS

Kleine Weihnachtspyramide mit Raspberry Pi

Noch einmal schlafen und dann ist Weihnachten. Passend dazu haben wir von NETWAYS ein kleines Experiment zum selber Nachbauen vorbereitet. Es handelt sich um eine kleine Weihnachtspyramide, die sich mithilfe von Python Code und ein paar Bauteilen ein wenig bewegt und...

Alle Jahre wieder, kommt der Advent of Code

...zumindest seit 2015. Bereits zum achten Mal haben Rätsel- und Programmierfreunde rund um die Welt in der Nacht vom 30. November auf den 1. Dezember dieses Jahr gebannt auf die Veröffentlichung des ersten Rätsels gewartet. Ihr habt davon noch nie gehört und wollt...

Ansible – Testing roles with Molecule

Ansible is a widely used and a powerful open-source configuration and deployment management tool. It can be used for simple repetitive daily tasks or complex application deployments, therefore Ansible is able to cover mostly any situation. If used in complex or...

NETWAYS Support Collector Roadmap

Den Support Collector konnte ich bereits in meinem letzten Blogpost vorstellen. Für alle die den Beitrag verpasst haben, hier kurz umrissen was es ist: Bei dem Tool handelt es sich um einen von uns geschriebenen Datensammler, welche alle möglichen Support relevanten...