These CSS PRO Tips & Tricks Will Blow Your Mind!
Vložit
- čas přidán 23. 08. 2024
- 10 MINDBLOWING CSS Tips and Tricks that solve typical JavaScript problems with CSS ONLY. You will learn elegant solutions for everyday css problems and productive shorthands for responsive web design, How to implement modern design trends such as glassmorphism or new morphism smooth scroll snapping in swiper, how to use the :checked pseudo-class to create eventListener in CSS only. How to fix a common :focus pseudo-class problem to create a dropdown menu in css without the need of javascript. And much much more.
BEGINNERS START HERE:
👌 Learn HTML & CSS in 7 Days
www.udemy.com/...
Checkout our website for more:
👉 www.coding2go.com
Host Your Own Website With Hostinger:
👉 www.hostinger....
✌️ And get a huge discount with our code: CODING2GO
#cssonly #csstricks #webdevelopment
RELATED CONCEPTS YOU SHOULD LEARN:
How to code a Navbar: • Create a RESPONSIVE NA...
CSS Flexbox: • CSS Flexbox Tutorial f...
JavaScript: • How to learn JavaScrip...
Todo App Project: • Build & Deploy a TODO ...
SOURCES:
developer.mozi...
developer.mozi...
developer.mozi...
developer.mozi...
developer.mozi...
developer.mozi...
developer.mozi...
developer.mozi...
developer.mozi...
developer.mozi...
MUSIC & LICENCE
Track: "Little Things"
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Track: "Scared Of The Glizzy"
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Track: "Take Off", NEFFEX
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Listen on Spotify: go-stream.link...
Track: "Tropical Nights", Nico Sainato Tracks
Music provided by Slip.stream
Free Download/Stream: get.slip.strea...
Listen on Spotify: go-stream.link...
CONCEPTS YOU WILL LEARN:
✔ HTML, CSS ONLY
✔ CSS Solution without JavaScript
✔ Responsive Web Design
✔ Smooth Scrolling in Swiper (scroll snapping)
✔ Modern UI Design Trends such as Glassmorphisn and New Morphism
✔ CSS Shortcuts and effective code solutions
✔ How do checkboxes and labels work (:checked pseudo-class)
✔ How does the :focus pseudo-class work in css
✔ How does the :focus-within pseudo-class work in css
✔ How to create a dropdown menu in css only without javascript
✔ How to use min() max() and clamp() functions
✔ How to resize elements in css
I hope you learned something new ;)
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
Subscribed immediately
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.
Very good video just subscribed. Please keep the vids coming
One trick I knew so far : to follow css-tricks.com
Very simple tutorial. Great content bro.
bro got straight in to the point, didn't waste a single sec of my life, worth it
Thought i was in like the 12th second or something 😂
and they are actually useful tips
I wasted by reading urs
I just got bombarded with information, not a single second to think about anything else rather than the CSS tips, just perfect!
I love how straight to the point you are, no lengthy intro no bullshit, i just love it , you got a new sub
Bro is the GOAT of CSS 💀
That glass effect was super awesome 🥶
Incredible content, no BS, just tip after tip
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!!!
it's not "new morphism", it's called "neomorphism"
I have heard neomorphism and neumorphism
@@pixl_xip I believe both are the same said different, not sure though
Love the scroll-snap! Thank you vey much! Also the straight-to-the-point character of your tutes is highly appreciated! Subscribed!
Thank you! I appreciate the kind words. Welcome to the channel 👋
For accessibility concerns please don't misuse a checkbox for that purpose. Other than that some awesome tricks in here, especially the snapping slider.
Why not? In what way is this a problem with accessibility?
@@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.
Do you have CSS beginner to advanced course? If no then you should definitely make one I will surely buy it.
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.
@@coding2go ok, roger sensei !!!
Interested!
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!
That background-filter is awesome. Always wondered how that worked. Clamp is a nice to know as well! Learned something new. Appreciate the video!
Thank you
The scroll-snap blew my mind! Instant sub.
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!
That was no bullshit straight to the point, informative, clean and helpful. New subscriber here.
Thanks, glad you like it! Welcome to the channel ✌️
That card snapping is a game changer for me! Good thing I stumbled upon on this channel. You earned a sub!
I absolutely love CSS, I’ve used the label trick before for dropdown messages. CSS is amazing
Gradient trick for text is awesome, dude, thank you
Glad you like it!
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
Thanks, will do.
This Dude is the G O A T of CSS
Finally found a decent view on CSS. 🎉
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.
Being a UI developer for 5 years, I swear I learnt a lot new things today
Auto subscribe. Very clean and detail explanation. Straight forward and showing examples directly. ❤
Im doing web development since 5 years now. Where have you been all that time? Amazing content, subscribed!
Learned alot, & you didn't waste any time, much appreciated
Oh my god. I bookmarked this just to refer to it again and again. Buddy, THANK YOU!!!
{alert("Great")}
This is a great video! Just a question, are most of these features supported by most modern browsers? They seem kind of new
Bro I really want to more videos like this...
It's really helpful me❤
More like these! Absolute learnt a ton. An 8 minute video I spent over an hour watching trying everything out. I absolutely am stunned!
This is genuinely one of the best tips and tricks videos I’ve seen
Great Video, learned something new and rest is definitely helpful and I would have needed sometime ago :). Btw Like the „straight to the Point“ Style
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.
Sure, I will make a video on that, though it needs some time until it comes out.
I didn't know about scroll snapping-that's dope. That new morphism one is cool too
Love it! The CZcams Algorithm should recommend you. I gave you a thumbs up 👍.
Thank you 💙
U gimme almost trick I don't know and still find it till I watched this video. Thanks
❤❤❤
amazing tips! clear and concise explanation. Great job! :)
Nice one! First time seeing many of these.
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.
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 ❤
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!
Glad you liked it!
Thanks brother. I am coding from years but didn't know these features exist.
great tips, straight in to the point
Really helpful video. Like your simple way of teaching.
Could you please create a multi page website building video using html, CSS and js?
Excellent. The missing space after the class name and open squirely brackets is getting to me!
I began coding when I was 17. I took a hiatus and now the game has completely changed. Wow.
Great video, I have only known about :hover pseudo class
🔥. Thank you for this! Feeling inspired!!
These are very helpful thanks for sharing ❤
Loss of devs appreciate this kind of teaching approach
your css is mindblowing. thks
Thank you so much! Explanation and presentation are awesome! Keep going in this way
Love these simple yet so useful videos! Keep up the good work! 🎉
Thank you! Will do!
No time waste to the point always love it ❤
I never knew people can be so creative with css. Haha
This is awesome, nice job!
Bro Thank you so much❤❤. This video is incredible and it worth to watch. You earned one more subscriber.
Wow, it's grt information for us, thanks for the video
you make it very simple and clear~! thanks a lot!!
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?) 😉
Awesome 👍, I will to try that. Thank you, dude.
Thanks! Have fun
Thanks for these great CSS tips.
Amazing video, straight to the point, won a subscriber
wowwwwwwwwwwwwwwwwwwwwwwww! bro your are not human you are alien
many many thanks to share this 😊
Amazing! Si much interesting tricks! Bravo!!!
Thanks men, you are the goat
some new CSS features are great
🎉🎉😮 am speechless
Great.❤
Make video on sticky thead or give alternative way to sticky.
Position sticky don't apply if parents are using overflow.
Awesome and usefull tips. Thanks for the great content.
Great video! Thanks for share
Hey I love the slider is there anyway to make it behave like mobile where you drag and drop all the time and not just when u go into mobile view?
Привіт з України! Щиро дякую Вам! Really well done. I gained a few things from here. Thank you.
Thank you, today I learned something new 🥂
Best video. Thanks for sharing this useful content.
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?
What an absolutely fantastic video thank you
4:02, 4:36, 5:36, 6:49 before thingy, overflow,
I knew all those tips, up to the last.
really this is so much crazy fitures 💖
instead of a checkbox it often makes sense to use details/summary
💯 True
Many many thanks sir, great tips and content.
Thanks today I learn something new brother ❤🎉
awesome tips! thanks!
It was amazing... Thank you so much man
Nice vid, actually didn’t know most of these
this video blew my mind, can i do this in sass too?
Ok the snap thing is really new to me :O
Beautiful!!!
That was cool tricks, thanks dude blessings for you
Was amazing 🤩
Dude .. this epic this
Take my sub👊
More Videos Like this please
Your content ✨️, that's why I subscribed to you 🎉,how many years taken to learn those techniques 😅
Good content, thanks.
Very helpful, thank you bro 😍