I'm sort of obsessed with the editing in your videos right now. Would you mind sharing any keynote file that you've used for one of these videos so I can see how it was done?
The whole video was clear up until the very end. You were showing how easy & seamless it is to change. But then at the end we have a red box at the bottom which has 'span 2' although it is a green-box declared by .green class? I am confused. Does the grid-template areas make grid-area redundant, i.e. could you have deleted all of the old code with span and stuff or not?
No old code deletion stuff occurred. But below is an explanation. `grid-template-areas` and `grid-area` work _together_. At the end, `grid-column: span 2` was what became redundant. More precisely, it got ignored due to `grid-area`. I admit I didn't focus on explaining how these props worked, but here's a deeper explanation about what happened at 4:30. The areas prop on the container say that element with `grid-area` = `red-box` should occupy the two cells in the last row. The `grid-area` is `red-box` on `.red`. This makes the red box occupy the last column. Additionally, the areas prop on the container say that an element with `green-box` as their `grid-area` will be placed at the top right position of the container. `.green` with its `grid-area` makes it sit at the top right.
What are the first 15 rows of CSS file?! I've tried this exercise on my laptop, but it didn't work the same way as in this video and I'm still confused about how the things work. Some piece of CSS code is obviously not shown in this video and I'm not able to figure it out for now.
The CSS file is shown in its entirety, but I probably had some `center.css` and / or `reset.css` file linked in the HTML which I don't show in the video.
@@theteachr Hello, please can you give the code for this? That'll really help me to follow everything better. My divs fill the entire width of the screen, and it's confusing
i am confused. you say 2 rows, but then an arrow is going from top to bottom to illustrate this. isnt a ROW, from left to right? isnt a column from top to bottom? I am confused.
Love the simple explanations and the accompanying visualisations to help!
Thanks for no 🎶🎶
This part of CSS was always confusing. Great explanation!
Thank you!
Nice simple overview I'm sure will help most people get a basic understanding on when to use what. Thanks
WOW! this is only explanation I'll ever need. THANK YOU!!
I'm sort of obsessed with the editing in your videos right now. Would you mind sharing any keynote file that you've used for one of these videos so I can see how it was done?
The whole video was clear up until the very end. You were showing how easy & seamless it is to change. But then at the end we have a red box at the bottom which has 'span 2' although it is a green-box declared by .green class?
I am confused. Does the grid-template areas make grid-area redundant, i.e. could you have deleted all of the old code with span and stuff or not?
No old code deletion stuff occurred. But below is an explanation.
`grid-template-areas` and `grid-area` work _together_. At the end, `grid-column: span 2` was what became redundant. More precisely, it got ignored due to `grid-area`. I admit I didn't focus on explaining how these props worked, but here's a deeper explanation about what happened at 4:30.
The areas prop on the container say that element with `grid-area` = `red-box` should occupy the two cells in the last row. The `grid-area` is `red-box` on `.red`. This makes the red box occupy the last column. Additionally, the areas prop on the container say that an element with `green-box` as their `grid-area` will be placed at the top right position of the container. `.green` with its `grid-area` makes it sit at the top right.
@@theteachr Oh ok alright so the old zombie code could've just been deleted makes sense
Great video, did a quicker and better summary plus comparison of it than some 20+ min videos
What are the first 15 rows of CSS file?!
I've tried this exercise on my laptop, but it didn't work the same way as in this video and I'm still confused about how the things work.
Some piece of CSS code is obviously not shown in this video and I'm not able to figure it out for now.
The CSS file is shown in its entirety, but I probably had some `center.css` and / or `reset.css` file linked in the HTML which I don't show in the video.
@@theteachr , thanks for reply. I'll try to play with that again.
@@theteachr Hello, please can you give the code for this? That'll really help me to follow everything better. My divs fill the entire width of the screen, and it's confusing
Love it, short and well explained, hate loooong blahblahblah
grid-template-areas looks like it can be very confusing since the markup is not changed but you're re-arranging the placement via css...
Changing the markup would be more painful.
@@theteachr Not really
gerat explanation and animations, you sir indeed are the teachr
Ничего не понял, но очень интересно))) если бы не так быстро объясняли, а чуть помедленнее и с расстановкой, то может быть и понял
Amazing and brief tutorial
hey can you tell me what ide you are using and how did you split screen
VS Code and Chrome split by macOS.
i am confused. you say 2 rows, but then an arrow is going from top to bottom to illustrate this.
isnt a ROW, from left to right?
isnt a column from top to bottom?
I am confused.
so after watching the VSCode example i understand what you mean. tricky stufff, flexbox
Arrow was showing the direction of how rows **flow** (top to bottom).
Thanks nice tutorial!
great explanation. I was expecting to see millions of views but only 6k?? that got me. thank you😂
Tremendous tutorial
Great explanation!
WOW
What do you make your animations with?
Used Keynote for this one.
that was awesome!
$
$$