ฝัง
- เผยแพร่เมื่อ 5 พ.ค. 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 HTML5 in one afternoon with our beginner course: www.udemy.com/course/coding2g...
Checkout our website for more:
👉 www.coding2go.com
Host Your Own Website With Hostinger:
👉 www.hostinger.com/coding2go
✌️ 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.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
MUSIC & LICENCE
Track: "Little Things"
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/QmMj1I
Track: "Scared Of The Glizzy"
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/xPJ3rV
Track: "Take Off", NEFFEX
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/GcQeOy
Listen on Spotify: go-stream.link/sp-neffex
Track: "Tropical Nights", Nico Sainato Tracks
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/Hk8DVL
Listen on Spotify: go-stream.link/sp-nico-sainat...
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
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 😂
Incredible content, no BS, just tip after tip
I love how straight to the point you are, no lengthy intro no bullshit, i just love it , you got a new sub
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!!!
That glass effect was super awesome 🥶
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!
Learned alot, & you didn't waste any time, much appreciated
This is genuinely one of the best tips and tricks videos I’ve seen
Nice one! First time seeing many of these.
These are very helpful thanks for sharing ❤
U gimme almost trick I don't know and still find it till I watched this video. Thanks
❤❤❤
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
you make it very simple and clear~! thanks a lot!!
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 👋
Best video. Thanks for sharing this useful content.
Great video! Thanks for share
What an absolutely fantastic video thank you
Very helpful, thank you bro 😍
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.
Great video, I have only known about :hover pseudo class
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.
It was amazing... Thank you so much man
Love these simple yet so useful videos! Keep up the good work! 🎉
Thank you! Will do!
That was no bullshit straight to the point, informative, clean and helpful. New subscriber here.
Thanks, glad you like it! Welcome to the channel ✌️
Great quick tutorial.
That was cool tricks, thanks dude blessings for you
That was really helpfull, thank you.
Nice vid, actually didn’t know most of these
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 !!!
Many many thanks sir, great tips and content.
Thanks for this amazing video
Thank you, today I learned something new 🥂
Great content... Make more
Thanks for sharing❤
Gradient trick for text is awesome, dude, thank you
Glad you like it!
Really helpful video. Like your simple way of teaching.
Could you please create a multi page website building video using html, CSS and js?
Worth every second
Thank for the tricks
Thanks today I learn something new brother ❤🎉
awesome, thanx brother
شكرا ❤ thanks it was amazing
really this tutorial was mind blowing 😊
More Videos Like this please
Thank you dear:)
Thanks it was amazing
Thanks!
nice video, thanks bro
🎉🎉😮 am speechless
fricking amazing! ❤🔥❤🔥❤🔥
Thank you❤❤
Thanks
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?) 😉
Cool features
such a great video. subscribed
Thanks 💙
Great content
Thanks brother
I love this content❤
Great.❤
Make video on sticky thead or give alternative way to sticky.
Position sticky don't apply if parents are using overflow.
subscribed inmediatly!!
Thanks, welcome to the channel 💙
I was shocked💥😮
For accessibility concerns please don't misuse a checkbox for that purpose. Other than that some awesome tricks in here, especially the snapping slider.
Great bro
Great content, i learned something so you have my subscribe
Awesome, thank you! Welcome to the channel 👋
Cool😮
Your content ✨️, that's why I subscribed to you 🎉,how many years taken to learn those techniques 😅
GoodJob!
I just found your content. Amazing video.
Thanks and welcome ;)
Loss of devs appreciate this kind of teaching approach
Great work mate. Can u also make a video on css viewport function? For example I have an animation and it will only animate when the user reaches that part. I tried and failed.
Cool 🆒😎
pure gold
I knew all those tips, up to the last.
linear gradient not working on chrome and edge for body colour
Can we use the tricks for flutter code
say i have 2 elements or more shown in a slider, and the wrapper is the larger than two or more elements, is the snap function still usable?
Yes it will work for that too. In that case I would recommend setting scroll-snap-align: start; on the cards instead of center to have make it snap on the left side.
DAAAAAAAAAAMN
Css is now nestable so u can create a button style and in the button add the svg style.
Subscriiibed !!!!!
Thanks! Welcome to the channel 👋
The pseudo-classes (has, not etc) arent fully supported on all browsers so I would refer from using them in professional projects.
what are you talking about? :not was supported since the birth of firefox... and :has is supported in all major browsers (firefox was last to add it, at the end of last year)
This guy need some good tip
can you please get rid of blind mode? it's 2 am and i'm getting constantly flashbanged
Damn I'm getting old, fact that I don't know about new css
Bro, I’m looking for a tool that uses CCS, with able to visual view what you’re doing in the front end, while coding it…
What you need is a Live Server. Use Visual Studio Code as your code editor and go to the "Extensions" window in the sidebar to install the "Live Server" extension. Now when you have your project folder opened with vs code you can right click any HTML file to "Open with Live Server". That will open the website in the browser. Now whenever you change something in your code and save the file using CTRL + S, the browser will refresh automatically. You don't have to reload the page manually anymore. It works for HTML, CSS ans JS files.
neUmorphism would be correct
POV me who is still learning HTML and watching this video 😂
Koi baat nahi, dhire dhire aage badhte raho :)
@@BlockPotatoYT I didn’t understand nothing
This video is greater than Harry Potter. ❤
Are these all supported in all browsers?
Browser support is a very good question. Its always different but almost every property shown in this video has around 96-98% global Browser support on caniuse.com which is very good. Only the resize property has 82%, but it will work in most browsers.
I believe they're all unavailable in the North Korean Red Star Browser and the Opera Mini Uganda Edition Pro Plus Browser. Such a shame, these are very cool css features, but better safe than sorry right?? 😒 Who cares bro. Imo as long as it's supported by chrome and firefox they should be considered ok to use, especially now that IE is dead too.
Using form elements like checkboxes to toggle menus or create drop-downs is a bad practice for accessibility. Yes, it’s achievable through CSS, but it’s definitely not accessible. You should use HTML elements where they are intended for.
Either way, you need javascript for consistency. Just another way of looking at it. I think this trick can be used on other elements.
wow very useful!
I'm amazed with the video so amazing ❤❤❤
It’s “neumorphism” not “new morphism”
You are right, I made a translation error. It happened because "neu" actually means "new", but apparently it doesn't need to be translated.
Came here to learn new words for my shiny ai prompt. No way I'm typing all these on my own.
Thanks!
Thank you too! Welcome to the channel 💙