These CSS PRO Tips & Tricks Will Blow Your Mind!

Поділитися
Вставка
  • Опубліковано 20 сер 2024

КОМЕНТАРІ • 235

  • @coding2go
    @coding2go  3 місяці тому +97

    Hope you guys learned something new. Feel free to share your own css tricks in the comments for others to see 😎
    Edit: I uploaded the source code for the tips on my website if you guys wanna check it out: www.coding2go.com

    • @MAALTECH
      @MAALTECH Місяць тому +2

      Subscribed immediately

    • @meew7571
      @meew7571 Місяць тому +1

      Bro god will blessed you for this tutorial. you just shared some cool tricks and explain it perfectly. hope you will share more tricks with great explanation like this.

    • @DrClappinCh33ks
      @DrClappinCh33ks Місяць тому

      Very good video just subscribed. Please keep the vids coming

    • @ashwinbarnwal1281
      @ashwinbarnwal1281 Місяць тому

      One trick I knew so far : to follow css-tricks.com

    • @haginss
      @haginss 20 днів тому

      Very simple tutorial. Great content bro.

  • @sandarushashinda6912
    @sandarushashinda6912 Місяць тому +462

    bro got straight in to the point, didn't waste a single sec of my life, worth it

  • @dedse3
    @dedse3 24 дні тому +62

    I just got bombarded with information, not a single second to think about anything else rather than the CSS tips, just perfect!

  • @militarykaliber-rp7ss
    @militarykaliber-rp7ss 28 днів тому +33

    I love how straight to the point you are, no lengthy intro no bullshit, i just love it , you got a new sub

  • @lonesakib01
    @lonesakib01 17 днів тому +21

    Bro is the GOAT of CSS 💀

  • @darknezx9542
    @darknezx9542 Місяць тому +42

    Incredible content, no BS, just tip after tip

  • @madhavanair3744
    @madhavanair3744 3 місяці тому +41

    That glass effect was super awesome 🥶

  • @manfromexistence
    @manfromexistence Місяць тому +34

    Bro, I watched so many CSS tricks but this trick you gave is so awesome. Thanks bro, I didn't realize until now that ':not' and ':has' CSS new selectors can be so useful and CSS scroll trick is also so awesome too. Thanks a lot!!!

  • @Htbaa
    @Htbaa 27 днів тому +7

    For accessibility concerns please don't misuse a checkbox for that purpose. Other than that some awesome tricks in here, especially the snapping slider.

    • @Semmelein
      @Semmelein 18 днів тому

      Why not? In what way is this a problem with accessibility?

    • @Htbaa
      @Htbaa 18 днів тому +3

      @@Semmelein because a checkbox alone tells nothing about the state of a menu. Just even try operating this example in a blind test with a screen reader.

  • @bakasenpaidesu
    @bakasenpaidesu Місяць тому +10

    Do you have CSS beginner to advanced course? If no then you should definitely make one I will surely buy it.

    • @coding2go
      @coding2go  Місяць тому +9

      We are currently working on a CSS course. The plan is to publish the course next month. We will let you know when the course is available.

    • @bakasenpaidesu
      @bakasenpaidesu Місяць тому +1

      @@coding2go ok, roger sensei !!!

    • @Think-Harder-Duh
      @Think-Harder-Duh 15 днів тому +1

      Interested!

  • @tiendatniit
    @tiendatniit Місяць тому +2

    Your video is really awesome! Eight years ago, I was completely focused on backend development. Only now am I realizing how much CSS has changed. It's crazy!

  • @emilhozan71
    @emilhozan71 21 день тому +3

    I'm big into JS-less sites and this video was fantastic. Such innovative design concepts - not to mention artistic and highly appealing.
    Earned a sub from me!

  • @yeetskeet691
    @yeetskeet691 21 день тому +1

    I absolutely love CSS, I’ve used the label trick before for dropdown messages. CSS is amazing

  • @rongitmukherjee
    @rongitmukherjee Місяць тому +4

    That was no bullshit straight to the point, informative, clean and helpful. New subscriber here.

    • @coding2go
      @coding2go  Місяць тому

      Thanks, glad you like it! Welcome to the channel ✌️

  • @Digital_1mpulse
    @Digital_1mpulse Місяць тому +3

    That background-filter is awesome. Always wondered how that worked. Clamp is a nice to know as well! Learned something new. Appreciate the video!

  • @RobertWildling
    @RobertWildling 29 днів тому +3

    Love the scroll-snap! Thank you vey much! Also the straight-to-the-point character of your tutes is highly appreciated! Subscribed!

    • @coding2go
      @coding2go  29 днів тому

      Thank you! I appreciate the kind words. Welcome to the channel 👋

  • @TrendingShorts-5G
    @TrendingShorts-5G Місяць тому +5

    please make more video on css and one thing you do different is first you visualize the problem and then provide solution this is really amazing and helpful for beginners

  • @ski257
    @ski257 14 днів тому +5

    it's not "new morphism", it's called "neomorphism"

    • @pixl_xip
      @pixl_xip 7 днів тому

      I have heard neomorphism and neumorphism

    • @ski257
      @ski257 7 днів тому +2

      @@pixl_xip I believe both are the same said different, not sure though

  • @mrcash1309
    @mrcash1309 4 дні тому

    Im doing web development since 5 years now. Where have you been all that time? Amazing content, subscribed!

  • @Moamal-Alaa
    @Moamal-Alaa 28 днів тому +2

    Great video bro, Just one thing you haven't mentioned in the video, If you rely on checkbox inputs to toggle the menu you have to make sure it won't ruin the accessibility, and as you mentioned users won't notice but the browsers, so becareful when you use checkboxes for other purposes.

  • @SebastianPerezDev
    @SebastianPerezDev Місяць тому +6

    Gradient trick for text is awesome, dude, thank you

  • @OpinionatedAnon
    @OpinionatedAnon 7 днів тому

    I began coding when I was 17. I took a hiatus and now the game has completely changed. Wow.

  • @SancLunatic
    @SancLunatic 7 годин тому

    In addition to the dark mode trick, the media query for prefers-color-scheme i think works 100% on all the latest versions of browsers.

  • @mrjohncrumpton
    @mrjohncrumpton 12 днів тому

    Excellent. The missing space after the class name and open squirely brackets is getting to me!

  • @EmperorInfern0
    @EmperorInfern0 12 днів тому

    Oh my god. I bookmarked this just to refer to it again and again. Buddy, THANK YOU!!!

  • @letmewatch.
    @letmewatch. 26 днів тому

    More like these! Absolute learnt a ton. An 8 minute video I spent over an hour watching trying everything out. I absolutely am stunned!

  • @user-hw9cs6te5y
    @user-hw9cs6te5y 21 день тому

    This is the perfect video!! Thank you very much, I learned a lot of new, interesting and useful things in just 8 minutes. Keep up the good work!

  • @gautam_nath
    @gautam_nath 10 днів тому

    Being a UI developer for 5 years, I swear I learnt a lot new things today

  • @darigames2859
    @darigames2859 Місяць тому

    This is genuinely one of the best tips and tricks videos I’ve seen

  • @PhucTran-zj5is
    @PhucTran-zj5is Місяць тому +2

    U gimme almost trick I don't know and still find it till I watched this video. Thanks
    ❤❤❤

  • @JoystickStereo
    @JoystickStereo 26 днів тому

    I didn't know about scroll snapping-that's dope. That new morphism one is cool too

  • @rahul360_
    @rahul360_ 22 дні тому +1

    Bro I really want to more videos like this...
    It's really helpful me❤

  • @jeloi9364
    @jeloi9364 5 днів тому

    amazing tips! clear and concise explanation. Great job! :)

  • @zainaltaf5460
    @zainaltaf5460 12 днів тому

    great tips, straight in to the point

  • @MiHawk-jn9oq
    @MiHawk-jn9oq 22 дні тому

    i love how you teach us the slide with snap. can you also upload a video how can you make a carousel type. for example, we have 5 slides, and after scolling the 5th slide, the one will popup is the 1st slide again.

    • @coding2go
      @coding2go  21 день тому

      Sure, I will make a video on that, though it needs some time until it comes out.

  • @Baccardi151
    @Baccardi151 Місяць тому +8

    Learned alot, & you didn't waste any time, much appreciated

  • @shfunky
    @shfunky Місяць тому +3

    Nice one! First time seeing many of these.

  • @bas9534
    @bas9534 9 днів тому

    thx for the tip, now time to give this lesson a try on real code.
    ps. like the way you straight in to the point ❤

  • @MattBramer
    @MattBramer 12 днів тому

    🔥. Thank you for this! Feeling inspired!!

  • @devilrjn1587
    @devilrjn1587 26 днів тому

    Thanks brother. I am coding from years but didn't know these features exist.

  • @fant0m858
    @fant0m858 2 дні тому

    your css is mindblowing. thks

  • @SUNNY-BB
    @SUNNY-BB 10 днів тому

    This Dude is the G O A T of CSS

  • @brandonelzy4196
    @brandonelzy4196 12 днів тому

    This is awesome, nice job!

  • @yashkhawale
    @yashkhawale 3 місяці тому +2

    Really helpful video. Like your simple way of teaching.
    Could you please create a multi page website building video using html, CSS and js?

  • @NaveenBandari
    @NaveenBandari 2 години тому

    Wow, it's grt information for us, thanks for the video

  • @coel312
    @coel312 19 днів тому +1

    This is a great video! Just a question, are most of these features supported by most modern browsers? They seem kind of new

  • @cwm161
    @cwm161 3 місяці тому +3

    These are very helpful thanks for sharing ❤

  • @ArmadilloFactory
    @ArmadilloFactory 21 день тому

    Finally found a decent view on CSS. 🎉

  • @MafuyuChan39
    @MafuyuChan39 18 днів тому

    Awesome 👍, I will to try that. Thank you, dude.

  • @naweendanushka3358
    @naweendanushka3358 Місяць тому +1

    Great video, I have only known about :hover pseudo class

  • @Belladonna_khaday
    @Belladonna_khaday 18 днів тому

    Bro Thank you so much❤❤. This video is incredible and it worth to watch. You earned one more subscriber.

  • @redakker
    @redakker 19 днів тому

    Thank you so much! Explanation and presentation are awesome! Keep going in this way

  • @Mustavii
    @Mustavii 18 днів тому

    many many thanks to share this 😊

  • @1230124
    @1230124 Місяць тому

    you make it very simple and clear~! thanks a lot!!

  • @garryalfonso1609
    @garryalfonso1609 16 днів тому

    Love it! The UA-cam Algorithm should recommend you. I gave you a thumbs up 👍.

  • @pawanbhatt9329
    @pawanbhatt9329 17 днів тому

    No time waste to the point always love it ❤

  • @erick-developer
    @erick-developer 23 дні тому

    Thanks men, you are the goat

  • @AA100HP
    @AA100HP Місяць тому

    Love these simple yet so useful videos! Keep up the good work! 🎉

  • @user-iv9bd6yk2h
    @user-iv9bd6yk2h 6 днів тому +1

    wowwwwwwwwwwwwwwwwwwwwwwww! bro your are not human you are alien

  • @halynakyryliuk8484
    @halynakyryliuk8484 23 дні тому

    Amazing! Si much interesting tricks! Bravo!!!

  • @havefun5519
    @havefun5519 23 дні тому

    some new CSS features are great

  • @bhimmagar9810
    @bhimmagar9810 10 днів тому

    I never knew people can be so creative with css. Haha

  • @DariánCapoteQuintana
    @DariánCapoteQuintana 16 днів тому

    Thanks for these great CSS tips.

  • @denhamk
    @denhamk Місяць тому

    Wow. That text gradient trick was 🔥!! Next can you show me how you blur the background when I hover over my megamenu 🤪 (like apple’s website?) 😉

  • @felixurbano1199
    @felixurbano1199 Місяць тому +1

    Great video! Thanks for share

  • @IcetipsVideos
    @IcetipsVideos 23 дні тому

    Beautiful!!!

  • @TheWellington1997
    @TheWellington1997 23 дні тому

    Amazing video, straight to the point, won a subscriber

  • @DevenSitapara
    @DevenSitapara Місяць тому

    Loss of devs appreciate this kind of teaching approach

  • @Netsuki
    @Netsuki 2 дні тому

    I actually use the gradient text very often. I am surprised that there is no function that just makes text directly have a gradient, without text clipping and transparency trick.

  • @theoldgamer3643
    @theoldgamer3643 14 днів тому

    4:02, 4:36, 5:36, 6:49 before thingy, overflow,

  •  13 днів тому

    Good content, thanks.

  • @Mustavii
    @Mustavii 18 днів тому

    really this is so much crazy fitures 💖

  • @mehranhosseinzadeh9060
    @mehranhosseinzadeh9060 20 днів тому

    Awesome and usefull tips. Thanks for the great content.

  • @kallymashigo6532
    @kallymashigo6532 3 місяці тому +3

    🎉🎉😮 am speechless

  • @orihisa
    @orihisa 25 днів тому

    awesome tips! thanks!

  • @blindsidedgames
    @blindsidedgames Місяць тому

    What an absolutely fantastic video thank you

  • @yuriyzadorozhnyi3849
    @yuriyzadorozhnyi3849 9 днів тому

    Привіт з України! Щиро дякую Вам! Really well done. I gained a few things from here. Thank you.

  • @user-it4pg5ox1q
    @user-it4pg5ox1q 9 днів тому

    Was amazing 🤩

  • @stephenmatthew7869
    @stephenmatthew7869 23 дні тому

    Dude .. this epic this
    Take my sub👊

  • @hw-moviespoint3109
    @hw-moviespoint3109 Місяць тому

    Great.❤
    Make video on sticky thead or give alternative way to sticky.
    Position sticky don't apply if parents are using overflow.

  • @shreyashamrutkar3225
    @shreyashamrutkar3225 27 днів тому

    Best video. Thanks for sharing this useful content.

  • @alirezamousavi3583
    @alirezamousavi3583 Місяць тому

    It was amazing... Thank you so much man

  • @TalesGrechi
    @TalesGrechi 22 дні тому

    Nice tips!

  • @fatihece3359
    @fatihece3359 Місяць тому

    Many many thanks sir, great tips and content.

  • @JakubSK
    @JakubSK 27 днів тому

    I knew all those tips, up to the last.

  • @___rv
    @___rv 9 днів тому

    Ok the snap thing is really new to me :O

  • @savilar369
    @savilar369 9 днів тому

    this video blew my mind, can i do this in sass too?

  • @josetovarrodriguez3525
    @josetovarrodriguez3525 Місяць тому

    That was cool tricks, thanks dude blessings for you

  • @techpukhraj
    @techpukhraj 14 днів тому +4

    {alert("Great")}

  • @Mr.Hitman.47
    @Mr.Hitman.47 Місяць тому

    Thank you, today I learned something new 🥂

  • @SandroWalach
    @SandroWalach 17 днів тому

    Is there a way to make the draggable part of the Resize change which corner it is on, and thus change which direction you want to resize toward?

  • @pain_equals_growth
    @pain_equals_growth 22 дні тому +1

    0:42 and 3:00

  • @marufahmad4385
    @marufahmad4385 Місяць тому

    Great quick tutorial.

  • @blackmmo3602
    @blackmmo3602 Місяць тому +1

    More Videos Like this please

  • @Trendi_Vibes
    @Trendi_Vibes Місяць тому

    Your content ✨️, that's why I subscribed to you 🎉,how many years taken to learn those techniques 😅

  • @user-co6il6eo3z
    @user-co6il6eo3z 22 дні тому

    I just subscribed to you channel 🎉
    This video was really helpful

  • @corneliollagas5378
    @corneliollagas5378 22 години тому

    Thank you sir

  • @NINJEDIT-S
    @NINJEDIT-S 17 днів тому +1

    Moral of the video: (atleast for me) use pseudo classes more

  • @khorium9626
    @khorium9626 Місяць тому

    That was really helpfull, thank you.

  • @devascript
    @devascript Місяць тому

    Thanks today I learn something new brother ❤🎉