Cool 3D grid layout | Can I clone it?

[@amit_sheen]

You could've called... 😉🤣 Great video, great work. Regarding the issue of perspective. Yes, it can be on the direct parent, but it can also be on the parent above it (the container), or the section above the container, or even on the body itself. But it means that all of the divs 'in between' need to have a preserve-3d on them. That means you could have kept the perspective on the section, but then you had to add preserve-3d on the container and the grid itself.

[@KevinPowell]

I knew I needed a preserve-3d 😂 - thanks for the insight there... I was sure what I was trying to do should work, lol. I'll have to clarify in a video that looks more on getting started with 3D stuff that's a bit more polished and researched.

[@RukshanDissanayake]

@@KevinPowell I know why you got confused here. Last week I found a code that I did three years before using rotateY. It was working fine back then on both Chrome and Firefox. I didn't have the preserpective and preserve-3d on the direct parent. Now it still works on Firefox but not on Chrome. Had to do a lot of testing to get it to work on Chrome and yes now you have to use preserve-3d on the direct parent. Amit's comment is really helpful to understand what was going on. You should have done this video a week before and it would have saved hours of my time. 😁

[@okonkwoonesmus7372]

The feeling is mutual

[@VarunGupta3009]

Makes so much sense... Maybe preserve-3d should always be followed by adding it to all descendants.

[@non-religiousdevourer6876]

Recommendation: In the end, once you're done trying to clone it, it would be cool to compare yours to the CSS of the original to see how different the code is (also showing different approaches to same problems).

[@spencer5051]

I'd also say, about 3/4 through the video, you should have broke from the original design and improved on it instead of trying to copy some broken junky behavior.

[@VarunGupta3009]

EXACTLY!

[@Eldalion99999]

I love how you actually show the whole process, not just magicaly knowing everything. It helps me feel less like a failure XD

[@Error-gc1rr]

I thought I clicked on someone else's video so I had to recheck if it's Kevin. Fantastic Video as always

[@afzalmahmud1974]

Same

[@notmyname327]

I'm loving this series, really really useful to see a glimpse of what actual work looks like vs a tutorial.

[@PeterSedesse]

Really awesome. I would vote for this style of video where you show your mistakes and then talk your way through them, it is so useful.

[@suedealchemist9486]

Same, I watched it from start to end, and for once I really felt like I was learning. It's 100x more insightful than a normal tutorial.

[@SpykePorcupine]

Just wanted to comment saying I super appreciate you taking the time to build the CSS like it's part of a larger project. It provides a lot of insight into how to think long-term about keeping CSS clean as a project scales, and it's something that's missing from a lot of JS/CSS/web dev content on KZbin. In particular, the mix of utility and modifier classes and making use of the modular nature of using var() as you did is a great middle ground between using plain old CSS and something like Tailwind.

[@zachjensz]

Had to double check it was a Kevin video

[@ilikethis412]

Great tutorial! Hopefully I can help simplify sliding the grid under the text: You had “left: calc(calc(1000px - 100vw) *-1)” And you can use algebra to “open the parentheses” and get “left: calc(100vw - 1000px)” Think about it this way: As your screen width grows, you want the distance from the left edge to increase, and as it shrinks you want it to decrease, even become negative. As you play with perspective you might find that you want to change the scale at which the left margin grows, or it’s offset, or as you did set a min, but that would be the simplest way to create this slide effect.

[@HackZ2k10]

I also had math in mind. For me (x - y) * -1 is equal to (y - x)

[@therenshres]

margin-left: calc(calc(-3rem + 3.5vw) * 4); I guess give smother effect. Have a positive margin or 0 margin and then gradually make it more negative.

[@jaydenmoon1165]

Dang I love videos like this - seeing someone at your level still getting frustrated and dealing with it then coming back and owning this challenge was awesome - love it Kevin!!

[@SitSkw]

Wow, I am so impresed that you were honest about your frustration and that you show how normal it is to struggle with challange even for such a pro like you :) respect!

[@ed.puckett]

I like this new exploratory style in this video very much. In the past I felt like I was exposed to a lot but it was hard to remember it when it was all done. In this video, where you were exploring more, I felt like I could follow along and understand your thought processes and things just clicked more. Thank you for your great content!

[@endofmysteries]

I can't believe I watched the entire hour here :) I am really glad you showed your thinking process and trial&error. I really enjoyed it! what a cool 3D design too :D

[@thoribonner195]

kevin, i just really enjoy watching your videos. you’re such a warm presence. i admire you. you’re a wonderful teacher. thank you for being you!

[@rope321]

Hey Kevin, at 7:08 you can hold the middle mouse button and drag down to get multiple cursors instead of Alt + clicking each line!

[@KevinPowell]

Ah, is that it? I always forget that shortcut 😅

Alt+shift+cursor down should also work i think.

[@IkethRacing]

ya you don't even have to drag, just place the cursor at start, then alt+shift+click at the end

[@mohamedmarzuq747]

Yaay, I'm very happy now because I discovered that being stuck when I'm developing a website is totally ok. Whenever I'm being stuck, I thought the problem is this is not my field But when I started watching his video I'm very much motivated and inspired ✨ Thankyou so much Kevin for the video 📹. Means a lot 🚀

[@pratikthorat3480]

Dude everybody gets stuck especially using CSS. Me you everybody. (PS: Kevin doesn't get stuck. He's lying. He is not a human so we cannot blame him for being a god) But yeah, It's alright to get stuck. It enables us to learn new things.

[@afzalmahmud1974]

People like me who are still learning web development will be indebted to you. Because you can give good quality content for free. Always appreciate you sir. Love you ❤️

[@1Joren]

Glad there's tutorials on youtube where the producers care about a11y. Good to hear why you pick links and why you put aria-labels on them :)

[@jackdeespadas]

2:25 in and the tutorial already "payed" itself. Thank you very much for your always awesome content and insights.

[@sparky-makes8373]

As someone just getting starting in code and web dev, these videos are incredibly helpful and inspiring to see. Thank you for taking the time and sharing your process!

[@diegomarzo4001]

This is beautiful Kevin!!!! Thank you so much for this things. This is the kind of stuff you show to people and say: "This is just CSS" and they do not even understand what do you mean because it is mind blowing!

[@GetPsyched6]

This video is an absolute treasure trove of knowledge! The comments too, Thanks Kevin and the awesome CSS-loving fanbase!

[@eternalheckler]

I love the variety in your channel, and love this kind of content in the mix! I feel like the speed you go at is perfect, and it is so cool to see somebody at your level just playing the game!

[@Noraia]

I really like this kind of video! It's very interesting to see how you start with the design, break down everything, focus on this and that and how you solve your problems! I also learned so much new stuff again and it's way more understandable and more pleasant for me to watch than videos where people know exactly what they have to do and just write line after line if you know what I mean 😊

[@daleryanaldover6545]

I don't work with grids pretty much often but rather than having a grid inside a grid, you can instead do a flex container with the feature grid inside. Then have the flex container have relative position and the feature grid an absolute position. After that have the feature grid get its width wide enough on wide screen and set the right property to 0 so it would stick to the right side of the parent flex container. Finally have the feature grid z-index of -1 and try making the screen smaller. This way we let the feature grid flow by itself and go under the left section when the screen shrinks. * width sizes are just sample, tweak to your desired number * 3d properties and grid are omitted .flex-container { display: flex; position: relative; max-width: 1200px; } .left-side { min-width: desired minimum width; max-width: 50%; } .featured-grid { omitting grid props.... width: set most suitable width on wide screen i.e. 700px ot something; position: absolute; right: 0; // actually this should be a negative number like -10rem but to demonstrate making the grid flow under the left side I will just stick with zero z-index: -1; } On paper this should work without calculating offset for featured grid since it gets push to the left the more we shrink the page until it goes under the left element. This is really fun Kevin, I get to use my brain power a little

[@ZeZa1515]

Love these style of videos, please keep them up! I feel like I get more out of these than the standard tutorials

[@elliott6565]

50:00 left: max(0, calc(calc(800 / 100vw) - 1px)) gives you a left value between [0; +infinite[. 800 represents the window width (in pixel) at which the left value will be 0.

[@gykonik]

you can't divide by "vw" using css calc

[@Eltopshottah]

Seriously dude you’re a big inspiration, I appreciate it.

[@alexkuzava3100]

Keep doing this, it's very interesting to see how you think and figure out issues step by step, I love it

[@eyaldavid7532]

Question please: Around 44:30 - you tried to set min / dynamically transform it according to the screen.. 1. Why didn't you simply set a padding -Right - Left with Precentage (%) - so it will auto re-size it? 2. Regarding adding a Position: Relative on it - didn't you had to add a Position: Absolute - for that to take place? Thanks in advance! Eyal :)

[@DutchVIII]

Showing the proces and all te mistakes is realy helpfull

[@farfazzi]

please make more on this format this is very educational and interesting, great job

[@VarunGupta3009]

Wooow... This was amazing start to finish.

[@spydergs07]

This was awesome... Learned a lot about CSS and the grids on this! Awesome video.

[@avneet12284]

That trick on left was awesome

[@SteveBonin]

Hey Kevin, I really like your videos. You have inspired me to get back into writing code rather than wordpressing it all the time. I would really like to see you do a video like this one, where there is a spotlight effect shining on the feature grid. I have been playing with this idea today and it is not quite right, so I thought I would write you and give you the idea. Thanks, and keep up the great work, it is really inspiring.

[@NiborGnittekeduog]

At 15:40 you say left and right padding of 1rem, but you set the first of the two numbers. You got me all doubting myself (and even look it up), but that really is the top and bottom haha

[@m00nta3D]

Hey Kevin, I love this kind of video, it shows me how you think and how you solve problems and as a beginner I needed that. thank you so much ❤❤❤❤

[@darpananeja4751]

what a beginning!!! Super hilarious!!!

[@fa8ster]

The fallback strategy at 11:30 is really elegant

[@SPEZIALOKOCHA]

Love your work and the style of this videos. It's so nice to see how you try to find the solution. Gives me hope for my work. 😬

[@ryanisthewind]

Nah man, Kevin is so nice. he doesn't block anyone.

Since people are mentioning snapping windows around you can also create a new desktop with win+ctrl+d and then you can quickly switch between them with ctrl+win+left/right arrow. It may be better for presentations than alt+tabbing.

[@Ibraheem_ElAnsari]

I was planning to watch 10min and I finished the whole video Haha ! Great video ❤

[@stevemelons]

To get the inverse that you wanted with calc() you just needed to divide instead of multiplying :D

[@stefanosilvestri89]

Hi kevin, quick question: @ 23:32 if you switch the order in HTML of the anchors "anti slippage" and "dex liquidity" , wouldn't that solve your positioning problem?

[@INAVACL]

I swear I learn something new in every single one of your videos lol

[@adil8132]

Big up to youu Mr. Kevin 👏 this is amazing !

[@dave6012]

Kevin you are a boss. Just one small suggestion, since you’re using windows, there is a built in window manager. Press windows+arrow to snap windows around to half, full, quarter, third, etc. I recently discovered this (by accident) and it is a lifesaver/game changer.

[@TomaszOstroga]

It is superb! Thank you Kevin for all knowledge you share with us. Love you :)

[@cgranqvist]

Love the video. I would really like to see a video on what you have setup as a local webserver that you are running. Thanks :)

Nice work. I really like this format. Keep it up.

[@kaleab27]

Grid areas are great in situations like this one. They are just so much easier.

[@joedoe9958]

one word.. LEGEND!!!!

[@mana24]

Wow that was awesome to watch. Very educational. Thank you :)

[@pixelinercom]

Great vid Kevin! Btw in VS Code if, what you want to select is in a single line under each other, you can push the keys [Shift] & [Option]. Makes it so much faster :)

[@TrueWordsOfEternity]

that missing at the end for the first 10 mins was driving me up the wall :)

[@Ryangosden]

Nice! Thanks for opening me up to CSS perspective. A little comment on the original design, as much as the concept is cool, it's not very obvious to users that the icons are buttons.

[@josvelema2362]

thought the same! looks more like a banner of some sort. It looks cool but i'm not immediately drawn to hover and click there.

[@KevinPowell]

Oh, totally. I don't think it's a great design, but saw it as a fun challenge that could open some interesting doors for a video :)

[@archiem6323]

Always a fan.😊

[@nullcheque]

This is my fave type of video

[@kettenbach]

Awesome job buddy. Thanks for sharing 🙏

[@eyaldavid7532]

Dear Kevin, Just found out about you last night. Thanks for your time and effort and for sharing and inspiration! Do you have a complete course we can take? (maybe like UDEMY or others?) Thanks in advance! Best Regards, Eyal :)

[@aryan7069_]

Really enjoyed this

[@SushilKumar-ig8ls]

loved your process and hope I could use some of your thought process. 😊

[@edgardfrank9]

Hey Kevin.. couldn’t you have used a calculated transform on the X-Axis for the 3D grid so it would have looked like it was moving in and out instead of just from left to right going under the text. I know it’s not what the design was originally but it would be a minor tweak for a better look, wouldn’t it? BTW: love your videos and tips ☺️

[@acapdevila]

I'm going for my third month at my first programming work. It's actually hilarious how much stealing (if we consider stealing like copying/using bootstrap stuff, or libraries, or components that already exist). It's pretty much 50% of a jr's work. The other 40% it's finding out why it doesn't work, and how to make it function. And the other 10% it's actually doing the jira tickets.

[@forrest_lump]

17:10 check your rows. You only need 3 instead of 6. Why won't you show all buttons on small viewports? How does the visitor reaches those contents then? My tip: If things get that complicated then do it direct in the Devtools of Firefox.

[@sultonbekrakhimov7887]

47:43 That's why I learned Backend first ))))

[@agilmo]

I'm not sure it's a default setting, but I think you can Ctrl + Alt + W to emmet wrap

[@mangoesareonsaleatcoles660]

You can steal fonts that are paid by using the network tab, it shows outbound requests for fonts which you should be able to download

[@michaelengelby732]

You aligned the feature grid to center at the very end! That had me triggered hard. That would of been much earlier for me. LOL

[@obinnaukoofe8626]

always relevant.. Thanks Kelvin

[@Eltopshottah]

47:36 we have all been there and thats the reason we love coding because afterwards 😂

[@notkamui9749]

i think you could have used the inverse for the shifting (1/x) or the negative logarithm to make it less extreme

[@peternicholson26]

Great way to outsource my difficult dev work, I'll call Kevin 😂

[@complexlity]

How do you wrap a whole highlighted block in a div (or another tag)? After CTRL + SHIFT + P, I don't know what to do next

[@trinkel8]

Definitely like this style of video! Although I find myself shouting out answers lol.

[@maxtsh]

THE CSS KING

[@GauravKumar-ue7nz]

Thank you Kevin

[@M4erSam]

they're using media queries and use common break points with transform translate

[@mohamedmarzuq747]

Now I understood he is a CSS king 🤴 even if he says he isn't!

[@raymonddaugherty]

That look at 47:40. lol I feel ya, man.

[@PixieSpright]

First such video of yours that I'm watching ("stream of consciousness"). I can totally see why people like it. Feels much more helpful for developing my own thought process than a normal tutorial (though these have their place too). More please.

[@uffecarlsson18]

awesome work Kevin.. :-)

[@maheshguptha9796]

This is more entertaining than a game stream😁 for me

[@aryan7069_]

32:50 skew or rotate maybe

[@nemeziz_prime]

That is one insane website 🤩

[@zhptm9488]

awesome video man just wondering how can i move the whole text box im trying to move it to the left i tried multiple thing it messes with the feature-grid

[@dkrvalho]

I'm sorry for newbie question but your "'grid-template-rows" in ".feature-grid" shoudn't be "repeat(3)"? And child 1. 4, 5 and 7: 1,5. Isn't this solve your problem whit spaces?

[@balajiravi9259]

Your definitely legend 🔥🔥🔥🙏

[@HaKazzaz]

it would be awesome content revealling how they did it at the end

[@jonmayer]

21:12 why I hate doing CSS positioning. Best laid plans...

[@shmuelisrl]

what you're probably looking for at around 45:00 is the reciprocal

[@sanmeetsingh4]

Wow Caleb ! Never thought you were in css

[@inspiringvideo2814]

Hi Kevin, how do you make your css comment autocomplete when you type /* ?

[@valentino7057]

I'm pretty much learning grid now.

[@caveman3991]

I have a question , I can clone but I don't feel like I can bring any authentic design from my own self.

[@cristianjuarez1086]

I cant believe it took him more than 20min, something that me the noob Jr i am could do in 10, it gave me a little more confidence lol

[@ScriptRaccoon]

Awesome tutorial! One comment: 39:35 The perspective value does not increase/decrease the 3D effect. It is just the (z-)distance from you and the 3D object. Amit already told you ;). The 3D rotations are independent from that value and do not change the distance.

[@arkprince9413]

why not use grid template area for creating the grid ??? i think it would have been much easier .answer me please I want to know why my idea is wrong