5 CSS tricks every Web Developer should know in 2023

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

КОМЕНТАРІ • 452

  • @Mdbootstrap
    @Mdbootstrap  3 роки тому +9

    I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video!
    I don't run ads on tutorials - the only value I get is your engagement in the MDB community.
    So if you would like to show your support:
    - Encourage more people to Keep Coding ---> Send this video to one person
    - Stay tuned for new content ---> Subscribe & ring the bell
    In the description, you will find links to some useful, free resources:
    📥 Download Material Design for Bootstrap - FREE open-source UI KIT
    🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course)
    🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall)
    ⭐Support the creation of open-source packages with a STAR on GitHub
    👪 If you have any questions - don't hesitate to ask on our Facebook group
    Thank you for your support!

  • @IhorVyshniakov
    @IhorVyshniakov 3 роки тому +226

    Thanx, great tricks!
    TIME CODES:
    0:12 - CSS Blend mode
    2:34 - Clipping
    5:33 - Animations
    8:59 - Google fonts
    10:36 - Gradients
    My advice 4 you - make time codes, please, that allows easily switch between these tricks. Everything else is great!) Keep doing this...)

  • @husseinjalaleldin8933
    @husseinjalaleldin8933 Рік тому +1

    I am new on your channel .. I hope you keep it like that ... calm ... creative and polite

  • @highfade
    @highfade 3 роки тому +16

    I been doing web dev for over 10 years, and you're the freaking man. I'm so tired of cookie cutter hello world examples and beginners on UA-cam pretending to explain anything beyond what I get from the docs. Again, you are the man. Thank you for the amazing content.

  • @ZachBinder95
    @ZachBinder95 3 роки тому +7

    Background blend blew my mind. Clipping and animation I've seen but am not familiar with personally. Fonts and gradients I use often.
    Every web developer should know media queries

  • @TokyoXtreme
    @TokyoXtreme 3 роки тому +7

    About a minute or so in, I realized that I’ve already watched this video before. But yeah, I watched it again. Good stuff, my man.

  • @ildikoedit9110
    @ildikoedit9110 3 роки тому +2

    Thank you, as a beginner I found these very useful.
    BTW I Immediately recognized your Polish accent :D

  • @christinelacosta9886
    @christinelacosta9886 3 роки тому +4

    Im just a 3rd yr college student in the philippines. After studying for almost 3 yrs, finally! I found my place in I.T industry. I find web dev interesting! So i started studying about it recently. Your vid makes me more excited to pursue the course. TYSM! Yey!

  • @ApoLk_
    @ApoLk_ 3 роки тому +5

    I'm learning HTML and CSS and this channel is helping me A LOT, I just want to say, thank you! I'm loving to program on those languages and your videos basically helped me with almost every major question I had bt now and showed me things that otherwise would take me double the amount of time for me to just figure it out by myself.

  • @sanmeetsingh4
    @sanmeetsingh4 3 роки тому +4

    I knew 4 of them but didn't ever thought of using them like that (the clip path one blew me off ) ! Amazing content

  • @pavaniyarlagadda3473
    @pavaniyarlagadda3473 3 роки тому

    Thank you !!! Clip path nd blend mode are awsome

  • @michal3833
    @michal3833 2 роки тому

    this guy knows all of the color codes by heart...!

  • @vanitymeetstechnology8792
    @vanitymeetstechnology8792 2 роки тому

    I learnt bootstrap very help full thing from you and MDB, created a web site for our Church.. so happy..TQ

  • @lisarogers5873
    @lisarogers5873 2 роки тому

    Really awesome tips. I love the shape/colored backgrounds. Simple but adds a little punch to the websites.

  • @premkishore5374
    @premkishore5374 2 роки тому

    that clip path was just breathtaking❤‍🔥

  • @archiem6323
    @archiem6323 4 роки тому +6

    Blend-mode. I learn something new today. Thanks!

  • @nizamuddinshaikh3185
    @nizamuddinshaikh3185 3 роки тому +1

    Excellent tricks shown! Thanks MDB for sharing. 👍😃

  • @Mustafa-ji3cp
    @Mustafa-ji3cp 3 роки тому +1

    thanku men cliping and background-blend-mode is new to me

  • @victorpinasarnault9135
    @victorpinasarnault9135 3 роки тому +1

    Very good.
    Liked and subscribed.
    Thanks.

  • @harishkandikatla9791
    @harishkandikatla9791 3 роки тому +2

    CSS Blend mode is awesome!
    It really helps, thanks for sharing!!

  • @suryaadiwaskito3945
    @suryaadiwaskito3945 3 роки тому +1

    Thank you very much for the tips n trick, it's very useful for me who new on this

  • @everydayonlineshopping3074
    @everydayonlineshopping3074 3 роки тому +1

    I like that...Can you make some more vid's please...You are AMAZING.

  • @dhwajkothari9047
    @dhwajkothari9047 3 роки тому +1

    Awesome video dude......its great work
    learned a lot.

  • @richardstudent4139
    @richardstudent4139 3 роки тому +1

    Very helpful. Thank you very much!!!

  • @Heavenig
    @Heavenig 3 роки тому +1

    This video is very neat and bold to learn

  • @GamerKittyEuphoric
    @GamerKittyEuphoric 2 роки тому

    please do more CSS tricks o-o... this is awesome. I love seeing this stuff.

  • @hajimeippo804
    @hajimeippo804 3 роки тому

    thank you very much.. blend mode was the best

  • @dariusdubose666
    @dariusdubose666 3 роки тому +2

    These tips were definitely features that I did not know about. Thank you.

  • @proxpyi3154
    @proxpyi3154 3 роки тому +55

    CSS= Counter strike source

  • @kirinkappa5662
    @kirinkappa5662 4 роки тому +133

    "We don't need this body anymore"
    ...
    Initiates astral projection.

  • @manishpanchal457
    @manishpanchal457 3 роки тому +1

    Dear sir, Your video is awesome and what you say in your title so deserve 100% for this video you provide absolute information in this one video thanku for making this video awesome and knowledgeable sir ...

  • @IlhomDadadjanov
    @IlhomDadadjanov 3 роки тому +1

    Very useful functions which I couldn't before I found this tutorial. Thanks.

  • @dewasembiring7286
    @dewasembiring7286 3 роки тому

    Thanks a lot man, you answer my question for blend, clipping, and animations

  • @talhaekrem9741
    @talhaekrem9741 3 роки тому +1

    Thank you. That was very helpful.

  • @Tony-yh3ei
    @Tony-yh3ei 3 роки тому +3

    Blend mode and clip was new to me, thanks bro!

  • @danielprytz
    @danielprytz 3 роки тому

    Im in love with this blend-mode man

  • @mariocalcetin7602
    @mariocalcetin7602 3 роки тому +3

    What good tricks friend, thank you very much and greetings from Chile.

  • @mashaallah1546
    @mashaallah1546 3 роки тому +1

    It's really amazing....
    We need more like this.....

  • @brandongoldsmith1765
    @brandongoldsmith1765 3 роки тому +1

    Wow background-blend-mode is amazing

  • @BadGirl-pn3qu
    @BadGirl-pn3qu 3 роки тому

    Very useful tricks! Thank you!

  • @deepaksuthar7631
    @deepaksuthar7631 3 роки тому +1

    I saw your video first time, and I love you sir ❤️

  • @lesalmin
    @lesalmin 2 роки тому

    Didn't know the two first ones. Thanks.

  • @shankarim3365
    @shankarim3365 3 роки тому +1

    please I need angular videos for front end then angular using CSS, and JavaScript

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      Here are some Angular related videos I hope you find them helpful :)
      ua-cam.com/video/Wjv6qUMUOxw/v-deo.html
      ua-cam.com/video/DjPPTlj-43A/v-deo.html

  • @esagecantu
    @esagecantu 3 роки тому +1

    The first three were very informative. I will use it for my site. Mucha gracias.

  • @mohammedumar6272
    @mohammedumar6272 3 роки тому +1

    It is really awesome which application or app you use to code sir plz

  • @jbriones4144
    @jbriones4144 3 роки тому +1

    I'm literally learning as a beginner and it amazes me to see all these cool websites that people are able to create. Awesome video! Thank you!

  • @gorkemzz8735
    @gorkemzz8735 3 роки тому

    I just discovered this page , i love it .

  • @adityanariampully8756
    @adityanariampully8756 3 роки тому +1

    wow this was very usefull!!! Thank you bro

  • @jenniferward6821
    @jenniferward6821 3 роки тому +1

    Thanks that’s terrific. Subscribed and liked

  • @SAIEN333
    @SAIEN333 2 роки тому

    This is amazing stuff for a beginner. Thanks

  • @neatdesign78
    @neatdesign78 3 роки тому

    wonderful tutorial, CSS needs people like you. :)

  • @shashithasandunil9464
    @shashithasandunil9464 3 роки тому +1

    Thanks clip and background-blend-mode is new to me...

  • @MrSammotube
    @MrSammotube 4 роки тому +1

    Great video. I have not kept up with CSS, but this really helps add a lot more to websites.

  • @chickennuggies0242
    @chickennuggies0242 2 роки тому

    Dude wow you are awesome! Thank you for this video 🙏🏽

  • @mercedesmulet2372
    @mercedesmulet2372 3 роки тому +1

    Thank you for these tricks! So well explained :D

  • @battlepumpkin6895
    @battlepumpkin6895 3 роки тому

    Very very nice tricks and explanation, good stuff!

  • @nwxxzchen3105
    @nwxxzchen3105 3 роки тому

    Clip path, blend mode, background gradient thanks👏👏👏

  • @garrywillits8025
    @garrywillits8025 4 роки тому +2

    I've been a web developer for 20 years but moved into programming about 12 years ago and lost track of new css advancements. I knew most of these except for animation. I know about animating svg images but I didn't know you could alter css properties over time. I will think about how to use this in our react project. Thank you.

  • @azurewitch
    @azurewitch 3 роки тому +1

    Thank you so much man!!

  • @anshvarun653
    @anshvarun653 4 роки тому +4

    thank you so much for showing clip path maker! I have been using a svg ellipse and then alot of media queries for it to scale it on every devices.
    Thank you for this CSS trick 🙌🙌🙌🙌🙌🙌

  • @chinmaymathur2430
    @chinmaymathur2430 3 роки тому +1

    You have done a great job

  • @John-wx3zn
    @John-wx3zn 2 роки тому

    Yes, a very nice gradient tool indeed. thank you.

  • @andriimatviienko7727
    @andriimatviienko7727 3 роки тому +1

    Thank you for amazing tutorial!

  • @DreQueary
    @DreQueary 3 роки тому +2

    The blend mode and clipping ive never knew. Excellent video sir. 😀

  • @schylervandeneikhof1719
    @schylervandeneikhof1719 3 роки тому

    For quick comprehensives I use uigradients. They just throw simple gradients at you to copy and paste on your prototype. Or finished design.

  • @Webtricker
    @Webtricker 2 роки тому

    This is very helpful and informative tricks for every web developer.

  • @vasto1
    @vasto1 3 роки тому

    Thx you so much! Googlefonts trick was very helpful.

  • @conscious_competence3703
    @conscious_competence3703 3 роки тому +1

    Thank you so much for sharing this is awesome.

  • @vtgus
    @vtgus 3 роки тому +5

    Great content! I would add pseudo-elements like ::before and after to play with additional effects and also the box-shadow property (with or without insets)

  • @dustedskaters
    @dustedskaters 3 роки тому +1

    Thank you brother! Keep up the amazing work :)

  • @2late2stop
    @2late2stop 3 роки тому

    Amazing. Really interesting. Thanks.

  • @bezbezov8867
    @bezbezov8867 3 роки тому +1

    Good job. Thanks!

  • @jean-yvesmartineau1590
    @jean-yvesmartineau1590 3 роки тому +1

    Awesome video thank you !!

  • @smiling_madly596
    @smiling_madly596 3 роки тому

    Really awesome tutorial! Thanks for this.

  • @chelseyhaynes22
    @chelseyhaynes22 2 роки тому

    You make it so much easier to understand css. Amazing video! Thank you!

  • @BubbleBeeKid
    @BubbleBeeKid 2 роки тому

    wonderful tricks sir. Thanks for sharing.

  • @codeforweb7602
    @codeforweb7602 3 роки тому

    Great tutorial! Thanks for sharing!

  • @alexdorosin6168
    @alexdorosin6168 3 роки тому +1

    Hi! Awesome video! What keyboard are you using? I like how it sounds

  • @ahmedbakhach2490
    @ahmedbakhach2490 4 роки тому

    great job
    clip and background blend are new to me

  • @castlerock7770
    @castlerock7770 3 роки тому

    not the most exciting video to watch but I have learned 5 things I didn't know how to do or that CSS could do before it so thumbs up for that.

  • @Shane-vh5nv
    @Shane-vh5nv 3 роки тому +1

    Cool tips. I think that unless the same image is used in different ways it makes more sense to apply the blend mode directly in photoshop.

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      Please keep in mind that not everyone has photoshop license

  • @instynct3190
    @instynct3190 3 роки тому

    I just started learning CSS, and this looks really helpful! Thanks!

  • @klake12
    @klake12 4 роки тому +1

    this video deserves way more views, thanks for the tips!

  • @MitchelStewart
    @MitchelStewart 3 роки тому +1

    One of the best tutorial vids out there

  • @julianpherez4625
    @julianpherez4625 3 роки тому +1

    The first is amazing and the best part of video.

  • @mangalwagh8694
    @mangalwagh8694 3 роки тому +1

    Nice information 👍👍👍👍

  • @locutusbn
    @locutusbn 3 роки тому +2

    Cool. I didn´t know about these CSS possibilities.

  • @daniyalshah1736
    @daniyalshah1736 3 роки тому +1

    Great man❤️, just the thing i wanted 🔥, already subscribed to your channel

  • @thomasschneider8474
    @thomasschneider8474 3 роки тому +21

    Thank you for your tricks. Really helpful.
    One thing though: careful with the fonts. Not everything is actually free. The license agreements should not be ignored. At the moment in Germany there are font providers dying to bring users to court for using fonts ten years ago that didn’t have a license for screen usage back then but now suddenly have.

    • @tenc6491
      @tenc6491 2 роки тому +1

      Thanks for the heads-up Thomas. Much appreciated!

  • @christosvaz
    @christosvaz 3 роки тому +1

    This was very helpful and detailed, thank you.

  • @darwinmandac5978
    @darwinmandac5978 2 роки тому

    These tricks will make you look like a pro-Webdev eventhough you are a complete beginner

  • @sarminkhatun5595
    @sarminkhatun5595 4 роки тому +1

    Wowww ♥ ♥ ♥ ♥ Boss. plz.make more like this

  • @zj3733
    @zj3733 3 роки тому

    What is best practice to add effects to a website : using CSs or using Js?? What is lighter 🤨 and THANK YOU 🙏🙏

  • @Santhoshkumar-uk7em
    @Santhoshkumar-uk7em 3 роки тому

    Really Nice Tips,
    Thanks.

  • @uwemaier7294
    @uwemaier7294 3 роки тому +2

    So cool - and simple if you know it. Thanks for this great insight, I copied the fonts topic already, in animations I want to move graphics around in the top element.

  • @brentdunklau4536
    @brentdunklau4536 3 роки тому +4

    Awesome - didn’t know any of this

  • @ankanpoddar8815
    @ankanpoddar8815 3 роки тому

    Liked for blend mode and clip path ✅

  • @tinchodev
    @tinchodev 3 роки тому +1

    Very usefull, thanks bro

  • @lacai527
    @lacai527 3 роки тому +1

    Ooh trying To make a portfolio, ya just made it harder!!! Amazing video and trickery

  • @ashwinisuryawanshi5947
    @ashwinisuryawanshi5947 4 роки тому +1

    Wow, tricks are awesome and easy to understand, thanks