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.
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.
@@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. 😁
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).
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.
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.
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 TH-cam. 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.
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!!
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 ❤️
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!
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 🚀
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.
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!
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!
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!
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
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!
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
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 😊
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.
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.
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.
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.
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 :)
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
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.
Hmmm, how many rows... Uhm, master Kevin, those rows don't need to have the same height, do they? 3 rows should work fine there, if the middle one is not too high, and the first and second one adding up to the third. (2fr 1fr 3fr) And the items can be named to give them a "role" in the layout. So no numbering the children. And placing them with grid-template-areas is so much easier than using spans. And I have seen those work with media queries. The sound advice to take away from this video: If you get stuck, go get lunch!
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.
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 :)
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 :)
right off the bat it does seem like a classic grid layout with a matrix2d transform applied to it ive been obsessed with that function lately so it kind of makes sense edit: damn didnt know perspective existed.
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.
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.
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.
@@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. 😁
The feeling is mutual
Makes so much sense... Maybe preserve-3d should always be followed by adding it to all descendants.
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).
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.
EXACTLY!
I love how you actually show the whole process, not just magicaly knowing everything. It helps me feel less like a failure XD
I thought I clicked on someone else's video so I had to recheck if it's Kevin. Fantastic Video as always
Same
Had to double check it was a Kevin video
I'm loving this series, really really useful to see a glimpse of what actual work looks like vs a tutorial.
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.
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.
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.
I also had math in mind. For me (x - y) * -1 is equal to (y - x)
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.
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 TH-cam.
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.
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!!
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 ❤️
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!
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 🚀
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.
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 :)
Nah man, Kevin is so nice. he doesn't block anyone.
2:25 in and the tutorial already "payed" itself. Thank you very much for your always awesome content and insights.
That trick on left was awesome
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!
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!
Ah, is that it? I always forget that shortcut 😅
Alt+shift+cursor down should also work i think.
ya you don't even have to drag, just place the cursor at start, then alt+shift+click at the end
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!
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!
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!
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
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!
Love these style of videos, please keep them up! I feel like I get more out of these than the standard tutorials
This video is an absolute treasure trove of knowledge! The comments too, Thanks Kevin and the awesome CSS-loving fanbase!
Seriously dude you’re a big inspiration, I appreciate it.
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
Keep doing this, it's very interesting to see how you think and figure out issues step by step, I love it
To get the inverse that you wanted with calc() you just needed to divide instead of multiplying :D
Wooow... This was amazing start to finish.
please make more on this format this is very educational and interesting, great job
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 😊
I swear I learn something new in every single one of your videos lol
that missing at the end for the first 10 mins was driving me up the wall :)
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 ❤❤❤❤
what a beginning!!! Super hilarious!!!
This is my fave type of video
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. 😬
Thank you Kevin
This was awesome...
Learned a lot about CSS and the grids on this!
Awesome video.
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.
Grid areas are great in situations like this one. They are just so much easier.
I learned a lot from that. Thank you for sharing.
The fallback strategy at 11:30 is really elegant
Big up to youu Mr. Kevin 👏 this is amazing !
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 :)
one word.. LEGEND!!!!
I was planning to watch 10min and I finished the whole video Haha ! Great video ❤
Awesome job buddy. Thanks for sharing 🙏
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.
always relevant.. Thanks Kelvin
Really enjoyed this
It is superb! Thank you Kevin for all knowledge you share with us. Love you :)
Nice work. I really like this format. Keep it up.
47:43 That's why I learned Backend first ))))
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.
THE CSS KING
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
Now I understood he is a CSS king 🤴 even if he says he isn't!
Wow that was awesome to watch. Very educational. Thank you :)
Great way to outsource my difficult dev work, I'll call Kevin 😂
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.
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.
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 :)
That look at 47:40. lol I feel ya, man.
loved your process and hope I could use some of your thought process. 😊
47:36 we have all been there and thats the reason we love coding because afterwards 😂
I'm pretty much learning grid now.
Always a fan.😊
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 :)
Wow Caleb ! Never thought you were in css
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
This is more entertaining than a game stream😁 for me
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.
you can't divide by "vw" using css calc
That's dope!
That is one insane website 🤩
it would be awesome content revealling how they did it at the end
Hmmm, how many rows...
Uhm, master Kevin, those rows don't need to have the same height, do they? 3 rows should work fine there, if the middle one is not too high, and the first and second one adding up to the third. (2fr 1fr 3fr)
And the items can be named to give them a "role" in the layout. So no numbering the children. And placing them with grid-template-areas is so much easier than using spans. And I have seen those work with media queries.
The sound advice to take away from this video: If you get stuck, go get lunch!
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.
awesome work Kevin.. :-)
they're using media queries and use common break points with transform translate
what you're probably looking for at around 45:00 is the reciprocal
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
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 :)
Definitely like this style of video! Although I find myself shouting out answers lol.
I feel like grid template areas has to be easier than those nth child span things
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
Enable gh-pages for repo, it is just one click
I'm not sure it's a default setting, but I think you can Ctrl + Alt + W to emmet wrap
Damn, i dont think i would be ablde to do that... Learning frontend.. I think u can create something like this with years of experience
that was the best intro ever lol what you mean you blocked my number lmao
MORE 3D MORE 3D 🍿🥤
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 :)
Your definitely legend 🔥🔥🔥🙏
i think you could have used the inverse for the shifting (1/x) or the negative logarithm to make it less extreme
imagine this was a big brain add for xfai
haha, nah. I really know *nothing* about it at all, 😅
This is super crazy 🤪 fun cool 😎
right off the bat it does seem like a classic grid layout with a matrix2d transform applied to it
ive been obsessed with that function lately so it kind of makes sense
edit:
damn didnt know perspective existed.
I think the Image sliding under text is just a bug that they didn't bother to fix. Don't stress yourself out lol
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.
Hmmmmm: perspective with a vw value? Intriguing maybe?