DEV Community

Cover image for 5 awesome CSS tricks for beginners

5 awesome CSS tricks for beginners

Tapajyoti Bose on July 11, 2021

Learning CSS is a life long journey. Everyday some new feature is coming up. With that said, there are quite a few features that I find to be used ...
Collapse
 
afif profile image
Temani Afif

I was expecting some new properties but I see properties that have at least 5 years old so please avoid the "awesome" and "you didn't know". It's only clickbait ..

Collapse
 
pierrewahlberg profile image
Pierre Vahlberg

A bit pessimistic, but your point is sort of valid. Even though these features are not brand new, a few searches on caniuse lets you know that a lot of cool css features are not very well supported. If something gains traction after 4 years however, i would approve it as "something new" since its recently been made usable.

Clip-path here is one such, not 100% supported but well adopted nowadays.

Also, an addition to the article. Css variables can be adjusted with javascript, which allows you yo create really cool color pickers that can generate conplementary colors or re-theme a UI based on a multi color selection that is applied from js :)

Collapse
 
afif profile image
Temani Afif

not pessimistic but I hate clickbait title. We can simply say "5 CSS properties for beginner" or "5 CSS properties to start you CSS journey", etc ... the "Awesome" "that you don't know" lead us to think that we will discover something innovative while it's not.
Clip-path exist since 2013 and is widely supported in major browsers since a lot of years.


Let's suppose all those properties are new and innovative, I don't see any detailed explanation on how to use them. I simply see the basic definition and 50% of the article is self-promotion and affiliate links.

Check the clip-path part, the "simple example" is leading to his personal website (a way to track more visitor) and he ended with a complex example taken from the Net. I doubt it's useful for beginner to get such example to better understand how to use clip-path

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose • Edited

I appreciate that you invested so much time in helping me improve the blog. Thankyou! :)

Collapse
 
juz14girl profile image
juz14girl

It's not clickbait for me as he puts the words "for beginners" and that alone is enough to understand that it is not for experienced one but rather for a people like me who's really new in this. Those that he mentioned above are really cool/awesome because it is for BEGINNERS and it isn't for people who's been in the industry for five years as you have stated.

Collapse
 
afif profile image
Temani Afif

the title and the article was edited after my comments so your comment is irrelevant now since you don't know the original title and content I commented for (the word beginners didn't exist)

Thread Thread
 
juz14girl profile image
juz14girl

I see, I get your point now. Thank you for clarifications.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

These properties aren't used often, hence the name. I mentioned at the beginning as well

Collapse
 
thomasbnt profile image
Thomas Bnt

Hello ! Mod here!

Your post seems not appropriate like affiliates links at the end. This is not the subject of this post, please remove it 😄

Your post "5 awesome CSS tricks you did not know" seems a bad clickbait since variables names on CSS is not a secret and also others points.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

I have changed the name & commented out the affiliate links. I didn't know that affiliated links were not allowed, could you link up the article where I can find these rules?

Collapse
 
thomasbnt profile image
Thomas Bnt

Nice change on your part regarding the title ! Better appropriate 💪🏼

It's not marked on the Code of Conduct or anywhere, we believe that a topic published on DEV should contain affiliate links when necessary and related to the topic of the article, while marking "This post includes affiliate links; I may receive compensation if you purchase products or services from the links provided in this article." for a clear disclaimer so readers are aware of it.

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose

Thanks for the clarification :)

Thread Thread
 
thomasbnt profile image
Thomas Bnt

Thank you for your understanding and your changes, I appreciate that 💪🏼🍨

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

I don't quite like the name "CSS Variables", because that makes people think of variables in programming languages. Calling them "Custom Properties" paints a much better picture of what they are and how they behave.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

They are actually called "css variables" as far as I know 😅

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

They are called custom properties, but even the spec uses the word "variable" to describe their behaviour. Still, custom property is a bit more accurate in describing their behaviour, specially after preprocessors have shaped what people consider a "css variable".

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose

Thanks for sharing this :)

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Thanks a lot for sharing this :)

Collapse
 
jaymindo profile image
jaymindo

Thanks for this ! great work

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

:)

Collapse
 
faruq_jada profile image
Faruq Ahmed

As a person who is just starting out as a developer, I found so many things new here. Thanks and keep it up🙌👍👍👍

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Glad you found it useful :)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

These are common knowledge?

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Apparently it does seem quite a few people are aware of these 😅

Collapse
 
martinromario55 profile image
Martin Romario Ntuwa

I'm a beginner in coding, so this article is very helpful. Thank you very much Tapajyoti.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Glad you found it helpful :)