One Line Of Code By Master CSS
Вставка
- Опубліковано 18 вер 2024
- In this video, with the topic One Line Of Code CSS By Master CSS, I will share with everyone a particularly impressive line of code used in the layout, with the power to surpass grid and flex in CSS. And more specifically, this CSS property is also automatically responsive.
Full Series CSS Tutorial: • CSS Tutorial
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#javascript #code #css
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.
Is the video too short? If you find it interesting, don't forget to like and subscribe to watch interesting videos about programming and web design.
Bro can you please add something from 3js ... plzzz and animated related content..
Your videos are amazing and can you please bring some 3js content as well for animations...
@@anshikatripathi3466 thanks 4 you correction 🙄.
@@lundeveloper perfect length. Right to the point with no rambling
column-width:20em;
Should do the same thing
bro is curing my mental health
Like a miracle 😍
@@lundeveloper Miracle Worker😅😅
Bro is casually improving my skills 😢
That's great. 😍😍
Likeee😂😂😂😂😂😂
Facts!
Wow this is impressive! Years of CSS development and I never knew Masonry layout could be done that easily! Mindblown!
its new css feature supported only by latest browsers. thats why we did not know this before. the video forgot to said this important information
the funny thing is, that I encountered that type of problem about 2 weeks ago, struggled to somehow fix this and gave up on doing flex + media queries to split it into multiple cols when needed. That's a wonderful thing to know now.
This would be a perfect solution if the order of images, whether vertical or horizontal, does not matter.
The problem with this solution is when you wanted to order the images horizontally. If you can notice in the flex or grid method, the order of the first three images are horizontally laid. When it comes to the columns method however, the same images becomes ordered vertically.
I think fixing this issue would involve using javascript to reorder elements/swap rows and columns. But there might be another set of problems for making it responsive lol. I'll think about it next time 😅
Btw, great video as always!
🤯You are god of css
What's crazy is that I was thinking this one was a very recent feature that probably isnt supported in many places.
However, it's pretty much supported everywhere. I am mind-boggled why this is the first time I came across this.
Thanks!
To answer your pinned comment: the video is just the right length with enough information.
Thats crazy, right ? 😍😍😍
same here mate
Video is not too short.
The video is exactly perfect time.
In one line :
Man, you’re the best!!!
I just love this channel funny enough just few days ago i was just telling a friend that i needed to learn this masonry layout (didn't even know what it was called at the time). I tried Both Flex and Grid but couldn't achieve the layout. I manipulated my way around it but it wasn't efficient. Long story short you've just improved my skill and made me a better developer Big thanks to you.
Nice solution if the order of the cards is not important. thx
I was thinking about my next projects, and this is what I wanted to do, u are amazing bro!
It's great that this video is out there right when you need it ❤
amazing! i can remember first time when I solve this problem I don't know I used almost 200 lines of ungodly javascript and I love the way it's working cuz we always need to add JS to make remaining space divided equally but not anymore.
This is top tier teaching right here. GODAMNNNNN.
Watching this and you're on exactly 100k
The main issue with this is that images are not ordered "correctly"
Instead of showing the first images at the top of the list it orders them form top to bottom in the first column, and then it shifts to the next one in the next column, meaning the first top images in the following columns will not be the first images on the list, despite that is a cool workaround when order is not crucial, great work!
what would be the easiest way to order them vertically/horizontally?
5 Minutes. 3 different ways with cons and pros. Wow.
(Thanks! ❤)
Every each video made me realize how much there is to learn.
I'm glad it was useful to you 😊
same thing
Man, you are the best web design yt for real, terrific work, keep it up
However the proposed masonry layout will be from left to right - columns are up down to the next column. In some cases this matters - in some, like yours, the direction of flow does not matter.
I have been looking for this for a long time until I gave and realized it's no way. 😁 I just saw this today by chance. Thanks for the helpful content. ❤❤🎉
Generally in masonry layouts, you want the "first" elements in the list nearest the top. This method stacks things sequentially, so the 3rd item from the left might be the 400th item in the list. The stacking can also look "off" if the object sizes vary a lot. It's cool though, I've used it before.
Please make video on "Mosaic" layout...it to much similarity to "Masonry" but it fill all bottom space... please please please 🥺🥺🥺🥺
yeah he should
We need that!!!
@@HaseebAdnan0 yuppp brother... Mosaic gallery layout is really good 😊
I been looking for this for 4 years, thanks
We need videos like this daily, this is just too awesome.
Dude I needed this in work!! Thanks
THANK YOU, big fat THANK YOU!! I'll implement that in future projects!
congrats on 100k!
first time watching u
and i like it!
Thank you so much brother 😍
Thank you so much for this tutorial. This just pooped up in my YT feed at the right time. 😎
Again, the best channel for CSS tips and tricks in details. A lot of hours long courses don`t teach the little things and you are doing it, so its awesome. You are great!
Thank you brother 😍
i always watch your videos laughing, because I know there will be these random sfx 😂😂
Good content bro 👊
I have subscribed just watching 2 videos that came on my feed randomly. And you have earned it!
Thank you brother 😍❤️
And I was just struggling with making Masonry yesterday, you're a genius.
Wow! I've tried it with Tailwind CSS, and it completely transformed the vibe of the webpage-thanks, man. I love learning tricks and tips like this; please share more.
🤯wow, that’s amazing.
This is huge, I been struggling with this type of layout for months.
Glad this video was useful to you
It's really just one line of CSS code
ok but can you do that in minecraft also?
Good exercise would be to code-golf a minimal JS solution to reorder images upon loading more content so that old blocks remain in their old position :D
I would watch your videos more without the ai voice
He's not a native english speaker. If you saw his old videos you would know. let him be.
That’s completely understandable in that case, but there are a plethora of ai voices to choose from. This one isn’t the only option. It’s quite hard to listen to.
I thought I am the only one! It’s also hard for me to listen to this voice… So harsh and weird lol
I don't know why people still complain about AI voice in 2024. He's Vietnamese with extreme CSS skills. If he used his own voice we might not understand his accent and we will never learn from him. It's a brilliant idea that he's using advanced AI voice. AI voices are getting better each year. Just listen to TTS voices on UA-cam just 2 years ago. It was unbearably robotic. This one sounds almost like a human being and it will only get better over time.
@@தமிழோன் It is useful ofc, personally I'm not complaining about the usage of it, but rather about the voice itself. My ears don't like it at all. Not that it sounds robotic, but very harsh and... a bit laggy.
So I hope this particular voice will get better too!
I am super glad i watched this video ❤
i am still watching ur videos cuz they are awesome
Thanks, this will help a lot. :)
I subscribe your channel right away. Crazy and easy to understand your explanation 🐐
excellent, right to the point
bro helps me keep my sanity while doing webdevelopment
Just subscribed because of the sound fx because I already knew about columns in css.
Great tutorial tho 👍🏻
Awesome video as usual. And, by the way, this AI voice is perfect for the channel and its style. Please keep using it until something better comes up.
amazing css property bro
What a customized environment ✨
...
I love if you share the customization video for VS code brother ❤.
Oh god i'm creating a small website builder app, this is so gonna be helpful for the themes. Thanks 😭
JESUS! THANK YOU FOR SHARING!!!
😍
I like your new voice! Much nicer to listen to!
100K Soon 🎉🎉
Amazing know-how, thanks a lot!
mind blowing
Wtf bruhhhh😂😂😂
Am having special headaches rn 😮😮
Awesome! Thank you
Cool tech brother, leaving my sub!
Thank God I came across your channel,you're a genius
Thank you for watching my content ❤🔥
Amazing ✨ thanks a lot
Awesome!!
Good, very good
thanks, bro. your video is very helpfull to improving my skill
you deserve 100k ❤
Congrats on the 100k
Love ❤️ you brother , you really help by your contact...❤❤❤❤❤
Thank you ❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥
You are original and that why the peopple follow you, PD I like the gas/winds. Greetings from Argentina
Astonishing!
Subscribed right away.
Ghê chời, 10đ vì đã làm video này
100k sub rồi, chúc mừng chú 🎉
this is so helpful thank you for this type of Content,
Thanks for watching my content ❤️
bruh, why you have so low sub count? you are one of the best people on youtube when it comes to frontend
Thats awesome :D
wow man ur vids will make me a pro
this is my birthday gift!
Have a wonderful birthday!
Less than 2000 til you hit 100,000 subscribers.... good luck, very well deserved 👍
bro WHAT i overcomplicated this SO MUCH in comparison, thank you for sharing! I watch your channel since the beginning and I am so glad that you are consistent with the quality. Also, thanks for changing the AI voice! I didn't like the old jimmy alike voice, even more since all that stuff about him went public. Cheers!
you proof that why i am subscribed to you ❤🔥 Damm
Thank you so much brother, ❤🔥 ❤🔥 ❤🔥 ❤🔥
Sensei... We need more...
Extreme wow😊😊
Lifesaver ❤
best , bro thanks
Master god job
you are the best!!!
Thanks dud i always wonder how this works and finaly i get to see it with simple code 😊
😊
You are CSS god
VERY MUCH THANK YOU BRUUHHHHHHH !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Nice one!
❤❤
Gained new subscriber broo
Thanks brother ❤❤
I was searching this . Thank you
Thank you !
WONDERFUL!
love you bro you are the best of the best
Thank you brother, love you 😍
Amazing bro...
Thank you 😊
You are always show coll and useful css tricks. Thank you. Wish you more subscribers!
Thank God i found this channel
Thanks for watching my content 😍
You are the best