Edit A Line CSS Changes All Design | Zero To Hero CSS Tutorial

In this video, join me to learn how to change one line of code to change the entire design using only html and css.
The container property shorthand CSS property establishes the element as a query container and specifies the name or name for the containment context used in a container query.
Step by Step:
00:11 Introduction Demo
01:14 Design Product Card
07:53 Container property
10:14 Supported browsers
-----
This youtube channel not only revolves around topics about website programming using HTML CSS Javascript, but also website design, ideation and implementation.
All codes are free. Sharing will help us grow faster.
#css #html #tipscss
-----
React Js Tutorial: • React JS
Design Slider - Carousel web: • Animation Card Slider ...
Design Template Website: • Parallax Scrolling Web...
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Effect Image using HTML CSS Javascript: • How To Make Zoom Image...
Design Animation Menu Web: • Design Navigation Menu...
Design Effect Card: • How to make Awesome CS...
There are many other series: www.youtube.co...
-----
Contact With me:
Instagram: / lundev.web
Email: [e-mail]
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support.

[@lundeveloper]

An interesting line of code changes an interface, isn't it interesting? Don't forget to like and subscribe to the channel to watch new videos ❤❤❤ Thank you ❤❤

[@kushangshah-be7hn]

Your css and html was already legendary level from the beginning.

[@Earth_env]

Woop thats great 👍

[@RenanGirotto]

Great example on how to use @container with style, this create a lot of possibilities to organized scalable modifiers for components.

[@amjadbhutto7925]

You are awesome dear, God bless you for being there to help out the new learners like me!!

[@AbdullahHamed-ti1hw]

Awesome, Thank you for the tutorial, very clean and neat.. easy to follow and code nesting is very well structured - Keep on growing bro.. All the support.

[@lundeveloper]

Thank you so much ☺️☺️😍

[@MrPeepa]

Hey nice video! small suggestion you should've used data-attributes instead of css variable to get the values, as that is the recommended way for the example you've shown!

[@codingsolution24]

You made a very important and well-crafted video with great content.

[@inteltone]

extremely interesting information, thanks for sharing! 👏

[@MAR22_ar]

WOW 💥💥

[@davidd.larred7238]

Thanks for your content, great work as always.

[@lundeveloper]

Thanks a lot. Hope it will be useful 😍😍

[@nirban7689]

Great work sir, you're all time fav css teacher

[@AzeemAsim]

Awesome.

[@Tay74514]

This is next level bro🎉

[@AaronSarmiento29]

Keep going! amazing stuff

[@solarspear27]

This is just awesome!

[@1barut]

Just amazing!

[@sumonmitra3651]

Thank a lot sir.. very good work

[@ramzandiscovery]

Wow amazing man 👍

[@heidardotdev]

wonderful tutorial please
continue thanks

[@gilsonconceicao5201]

thanks for share. I was trying to get this shape

[@satyamrajpro]

Really Appreciate your work, there are other ways too, like you can add a :has() attribute too, to do the same as you did with container. Another thing is that, can I get the source code please?

[@lundeveloper]

great, yes, has() can replace container in this case

[@EricFressange]

Nice trick for the reverse radius.
For the conditional custom property, what is the interest ?
It's simpler to use a modifier class or a custom attribute, no ?

[@sharpie882]

There are sectioning elements other than divs lol. But good tutorial

[@landrit.]

Can u please create a CSS tutorial to become this good 🙏🏻

[@_u_nknownuser]

THANKS BRO... APPRECIATE

[@itsme8419]

From the "Zero to hero" name I know you are Indian my guy.

[@tika6050]

nope, he's cambodian, he doesn't know english

[@ipunitbhardwaj]

you wouldn't say that If you knew what his channel's name would sound like in India...

[@slappy_chimp]

​@@ipunitbhardwaj😂😂😂 exactly

[@do7705]

Hes from vietnam or cambodia I guess

[@khaledMohamed-tp4wx]

Not Indian. He's Vietnamese. you don't have to guess, just open the channel info and you'd see his location.

[@Art-01]

Hello We really appreciate what you do, we are constantly learning new things. Can you make a video about Woocommerce products as well, so that we can use these codes on Woocommerce products too. Hope you post more videos also about Woocommerce and possibly Elementor. Thank you

[@Mohamad_Amine7939]

pls can you share how to do this
i love your awesome tutorial

[@AvidorKatz]

I didn't get the purpose of style --isNew. I mean what are the benefits compared with class?
And this promo element of the card is begging to set its border radius smaller than the card border radius. Subtract gap size between card and promo from card border radius.

[@MahmoudGamal-sx3bj]

Your content is🔥. Please keep uploading awesome CSS content it's really helpful

[@lundeveloper]

Thank you so much bro 😍😍😍

[@CoderGeek-u6m]

How do you get the icons?

[@fdelaneau]

Love the design and the concept, but I don’t understand your use of @container in this case. How this is different from simply applying a data attribute or even a class to the block ? @container is really useful when you want your card to have different layouts depending on the size available. The new container style query will be useful to parse styles values outside simple booleans, but it is not yet supported in Firefox and safari.

[@sidcena]

Which extension u using plz tell

[@LudovicFontaine-lb9cy]

Why don't you use data-attributes ? it's not easier and clearer ?

[@AndreasDemetriou]

What about translating the "Popular" and "New" texts of the content rule? Using css custom properties will work, right?

[@hariprasatht9082]

🔥

[@ava_crey]

Can you write what your current topic was in VS code

[@sobansaleem3492]

why is it my popular text is working on container query but box shadow isn't working

[@rgmazon]

what VS Code theme do you use?

[@ezetenduwilliams7322]

Apart from the horrible AI voice, it’s a great content. I’m suscribing.

[@FreakyYas]

kindly recreate old videos in english language

[@DmrHusam]

🎉

[@terokmaximus6841]

Can you teach us how to do this in bootstrap 5?

[@SRIRAMKANNAN-l1s]

Hi, could you please share this code because I couldn't find it in your website

[@lundeveloper]

Hello, sorry for the inconvenience. I usually do not post videos with little code on the website, so please write according to the code in the video 😥

[@SRIRAMKANNAN-l1s]

@@lundeveloper thanks for the reply. But why I need ur code is that. I wanna implement the CSS code which u wrote for card::before, that's y came across your video. But unfortunately I couldn't achieve it. That's am asking you to provide the code. Hope don't mind

[@High_lifestyle_clips]

which vs code theme is this ?

[@mrwang8672]

I like your editor theme and fonts, would you like to share them?

[@lundeveloper]

Yes. I shared it in a recent video

[@Neil_09]

What site are you using to generate your voices?

[@athardavid]

What's the font name?

[@Happy_Shaikh]

What is the name of vs code theme you used, btw nice content bro keep it up❤new sub

[@huyhoangnguyen3628]

can i have full source code ? I tried but it's doesn't work and i don't know where the bug is :(((

[@lundeveloper]

Sorry but I didn't save this source code 😥

[@ulsezer]

bro do you can give me that template please

[@udk0_057]

why is my vscode not vscoding like lun dev code's vscode vscodes😠

[@premium_edits]

I don't know 😠

[@sanzhang7851]

字体和主题是什么

[@learnwithashikur]

Thanks for your content, great work as always.

[@lundeveloper]

😍