10 CSS PRO Tips and Tricks you NEED to know

In this video you will learn 10 CSS Tricks for Beginners and Advanced Developers that want to learn modern css concepts. These 10 css pro tips can boost your productivity. You will learn how to write better code in css, fix common css problems easily and how to write professional css code with just a few lines of code. Including CSS Grid Tips, CSS Flexbox Tips, columns property in css, better form designs, accent-color, caret-color, drop-shadows, overflow property tips, How to animate to height auto in css, how to use clip-path in css, attr function in css, and conic gradients

Host Your Own Website With Hostinger:
✌️ And get a huge discount with our code: CODING2GO

Concepts you will learn in this web dev project:
✔ HTML, CSS
✔ How to animate to height auto
✔ CSS Pro tips for beginners
✔ css tips and tricks
✔ how to improve in css
✔ how to write better css code
✔ how to write clean css code
✔ css grid tips
✔ columns property
✔ drop shadows in css
✔ accent-color
✔ caret-color

[pierwszywolnynick]

this is the perfect pace of teaching, no time wasted, perfect examples, quality content. I actually learned something new about css and that's rare in youtube videos

[PicSta]

I am following Lun Dev for a long time by now, and he has some great, highly valuable content. What you both are sharing is the great content and information, strict to the point. Not much, blah blah.

[parthjasani]

If you want to add transition to height : auto; simply add "interpolate-size: allow-keywords;" property

[tobiasfedder]

The thumbnail is outrageous; suggesting grid is for noobs and columns for pros. Very different layout mechanisms, solving clearly different problems.
Excellent rage bait. Great content. 👍

[ioannesbracciano]

I love you, the `columns` property is exactly what I was looking for for a project! Thank you!

[dannny]

The column property really helpful. Definitely gonna be using it

[joanmonterrey]

About the tip #7, there's a new way to animate the auto value with no javascript.

.container{
overrflow: hidden;
height: 1.5rem;
transition: height 150ms ease;
...
interpolate-size: allow-keywords;
}

.container[open]{
height: auto;
}

And that's it! but of course, the interpolate-size property isn't widely accepted yet for the browsers, at this date it has 44.68% of acceptance (:

Btw, I loved tip #9!

[martinpenev]

Only saw 2 videos by you and already subscribed. Great content!

[domidanger]

I love your videos. It's amazing how much one can learn even after working as a web developer for years 😅

[gusalvestavo]

Great content and straight to the point!! Thanks for teaching me something new

[mattwood]

The problem with the columns for masonry is that it's gonna read down instead of across. Which would be be problematic for dynamic content if you're using an Ajax load more for example. How ever a display grid masonry is in the works.
Also with the accordion it's best to stick with the details summary tag for acessability purposes. If yiu go the JavaScript route you're also gonna have to do your aria exampled states and your tab keyboard support.

[codesthenos]

pure gold video, cant explain more usefull things in less time, no possible

[RASTUDIO_]

Big don came to YouTube who is very passionate to build and teach coding every one who want to become a professional in this field...
Good work, make complete video on full stack web development .
Love from Pakistan, I can not speak English but l like so much your videos as well as your coding 2 go channel. By the way, your channel is gift for me to learn coding in my life, your videos and your coding level on the next level, before watching this video, I would say that you have a great experience Fabian Sir...
Thanks for this amazing and informative video...

[fabo]

Awesome! A lot of useful informations here, subscribed!

[RohitKumar-mygq]

One question is that all topic you discuss here are they covered in udemy course?

[lenniii]

Hey which Visual Studio Code add-ons do you use?

[notme]

Can you show us your setup, i.e. how you have the browser immediately show results whenever you change your code?

[benvindadossantos]

I have learnt something very useful, thank you

[Arygua]

I had actually thought about using a cobblestone design recently but was not sure how feasible it would be.
I went with a simpler rotating marque but its cool that its actually really simple to do.

[SergeyNeskhodovskiy]

You can have an expandable panel with an opening transition even without any javascript at all. Just use a hidden checkbox and Make the "summary" its label so that when it's clicked the invisible checkbox is checked and toggles the 1fr for the container as shown in the video.