10 CSS Pro Tips - Code this, NOT that! 

How to debug code give some tips

Which type of code if you want to run html css in vscode install live server

Dont know if anyone cares but if you are bored like me during the covid times you can watch pretty much all the latest movies and series on instaflixxer. Have been streaming with my brother for the last few months =)

@Patrick Luka Yea, I've been using InstaFlixxer for since november myself :)

Why do people bother with SASS over SCSS? Isn't it better that whatever you write in SCSS can be reused in small CSS snippets as well if you want to in the future?

You've been missing out, probably the best thing in this video.

Me too!

I use all of these... except clamp too :))))

Note : Not supported in IE11

@@hamza_omari eeeehh....

*based on a true story*

Xd

margin-bottom: 0px;

@@AndiKod pok

display : flex; flex-direction : column; justify-content : flex-end;

I was thinking that too...

Awesome👍

Fr! :3

how does one use emojis ?

indeed this was a useful video

Good tip- plus if you're doing a professional project usually you have some kind of analytics to see how many users access the site/use the app on mobile vs desktop, etc, so you can kind of decide what should be the 'main' look and what should be a screen-adjusted layout of that. Also fwiw for anyone this might help, and based on a thing that I definitely didn't recently have to deal with- don't procrastinate your media queries to doing them all at once after you style your pages/components; if you can, try to do all or as much of you can of them for each component as you develop its styles. Sometimes you get lucky and can just set a container width to like 50/60/70vw and good ol margin 0 auto, but sometimes you can have something like a thing that I definitely didn't recently have to deal with where you're like 'wtf subheader why do you keep escaping through the container's border on xl screens??' Plus if resize media queries are a thing your app needs, they're a lot easier to manage one page/component/feature at a time. ETA: I once did something I was really pleased with where I looped through list items to grab their ID then assign that value to the content property of a before pseudoelement as a way to number things and style the number, and now I feel like a tit after having seen that counter thing.

Phones tend to be slower too and the layout is simpler and more one dimensional. It's much easier to add things than trying to remove them.

Mobile first isn’t even a thing anymore, since mobile screens got so big. Design in a way that the style automatically adapts to the viewport.

@@Linuxdirk aka rEsPoNsIvE 🥴

@@Optable Not even that. Just don’t have breakpoints.

U R a life saver

I remember when I was first trying to play with positions, and always wondered "why does this put it in so weird place, and not in the center, if I described that it should have moved it 50% from left and 50% from top? wouldn't this mean it's equal so then center?" lmao

I'm a noob XD this did confuse me. I'm so glad I read comments :D Thank you xx

I had zero idea few seconds ago. Thanks buddy you explained it very well

nice

Safari cries with clamp

Same here

I'd also like to be as good at CSS as you bro. I'd like to get helpful materials from you (materials that can help me get better at CSS), that's if you some and you if you don't mind..... what's your social media bro (Instagram or Twitter) so I can hit you up

ikr :')

Same.. also didn't know about these two specifically

TIL! Very cool :)

I remember manually adjusting the padding of my anchor link destinations to fix this issue on one of my sites. This is an amazing solution that will serve me well. Thanks a lot!!

Oh my god, I never new this! thank you so much!

This saved my ass recently on a job. 10/10 One of the best newer properties!

Great tip! Do you know if this plays nice with JavaScript methods like window.scrollIntoView(), or is this only for auto-scrolling using IDs?

Idek what float is😂

Nightmare in debug street.

I use combinations of zero-width joiners and underscores for all of my class names.

We need keyboards with emojis

@@JeyPeyy You can get VS Code extensions which allow you to type ":muscle:" and get the flex emoji

@@precumming I'm sure my coworkers will love that such an extension is required to work with my code 🙃

@@tomasvn09 thank you kind stranger

@@skynet1024 LOL kind stranger

Thanks!

LOL =))))

Can you guide me to a video tutorial on this?

Yeah I also need a video for this, sounds interesting 🤔

@Anja and @SK: Have a look at the LayoutLand channel made by Jen Simmons. A good example, where she thinks about HTML first and then about styling is: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--hmOZU7Zk10.html

DOM sounds like a character of 2f2f for me, pitiful.

Trueee

The first time I was introduced to media queries, I was like, "Wow, this is incredibly cumbersome. WTF? Who the hell would want to write 3 versions of the same layout?"

@@addanametocontinue I'm just beginning and I'm excited about media queries, your comment spoiled me

@@addanametocontinue your profile picture background colour is same as mine 😀😃

❤️👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html 👈❤️..

Thanks! I am new to all this and was wondering how that part made any sense. Now it (kinda) does.

If you see !important everywhere... !run

Omega|lul

Nice catch 👌😂😂😂

Of course! That’s what’s naturally happens cuz overflow is visible by default 😂

just overflow:hidden 😂

lol it was funny tbh

ayy backend gang all the way

I always find back-end devs saying CSS is hard so baffling when back-end seems like the real big brain stuff

It totally blow my mind.

Indeed, the autofit property is pretty cool. Try out flex-wrap: wrap. It does almost the same thing 😀

In case we have a display:flex , what do we could do instead?

@@rodrigolustosa9090 grid is ideal for multiple column/row layout while flex is ideal for single column/row. I suggest you change it to grid

❤️👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html 👈❤️......

@@rodrigolustosa9090 flexWrap : 'wrap'

I think the best unsaid tip is to focus and master the basics before going further and use frameworks, it's probably true for most stuff in software development.

raw is always better ;)

@@Mwtorres89 Tell Gordon Ramsey about it

You can still use Bootstrap while using CSS. I frequently use css in my bootstrap code so that it does exactly what I want it to do, as opposed to the default bootstrap behaviour.

Although raw is better most companies find it a time waster and will set you up woth tailwind or other frameworks. Buisness is about efficiency after all. I also say this because many a cocktail devs. Will claim css is easy and yet have come here to learn the 30 extra things they never heard about on css. What I'm saying Is css has ALOT and can become overwhelming. The basics aren't bad and mostly gone over in the video. Padding, margin, border and flex box along with grid are important.

69 likes dude

@@jathur_ yeh bruh 🤗

Same

24 years?

@@NielsNL1 1999 is 24 years, yes you are correct

l love ccs too but i lm new at dev