This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Layout Basics" Lesson
[00:00:00]
>> We're gonna pop into search params such as, One thing is we're not going to do details like this is an exercise I leave to you to do after the course is to go try and do details by yourself. Hop into search params above the form here. So here's his search params you can just delete that.
[00:00:27] We're going to do margin wise zero MX auto and then with 11 out of 12. This IntelliSense is magical it's great for teaching so what is my? Top and bottom right and, so instead of saying nt zero mb zero you can just say my which means up and down, right?
[00:00:55] Top and bottom. Then as you might guess, mx left and right and then auto is just like center it, right? No margin top and bottom but center on the x-axis automatically. Then w 11 out of 12 is I want this to take up 91% of the page There are 11 twelfths of its available space.
[00:01:19] As you can imagine, you can put three out of 12 here or something like that it'll do 25%. In our case, we wanted to take up most of the page but we want like a nice little looking gutter on the side. Okay, and then here on the form, we're going to add some stuff here.
[00:01:40] We're just going to say padding 10 margin bottom 10. Rounded, because we want like nice rounded corners. This is not, you know, web point 1.0 We're definitely strongly web 2.0. We're going to do large Select nice looking rounding roundedness background. We'll do a gray 200 nice light gray shadow definitely large we all like shadows.
[00:02:10] Flex so you can do display flex this way. Then we're gonna do flex we're gonna go into column direction and we're gonna do a justify center Then we're going to do items center. It's like it's gonna be flex in the direction of north south, right and then everything's going to be centered along the center axis.
[00:02:33] So item center. If you're not familiar with Flexbox and flex. Jen teaches a class on flex. Yeah, and Jen is a whiz when she's the best when it comes to CSS. Definitely take her class if you're interested in more that. All right, so now if we go over here to one of our details or search.
[00:02:59] Page, you can see here, you got like a nice little shadow here, we got like a nice looking kind of form here. Obviously we still need to work on the form controls themselves. But, so far so good that this looks a lot better than it did right instead of just being off to the side.
[00:03:20] So notice we got rounded corners here. That's what the rounded out large did shadow you can see there's a nice little shadow so looks like it's off the page a little bit and then the flex made it go north south with these controls here all right any questions about that.
[00:03:43]
>> Can you do grid.
>> We're gonna do grid in a bit, it's really cool Undeniably like whether not you like what we're doing right now this is fast right it's really fast to knock this out, particularly the more familiar you get with it. That is to me the biggest value prop of Tollens.
[00:04:01] I've never been able to code so fast with CSS. That's compelling.