can you draw a UI with only the code?

Could you draw a UI by only looking at the HTML and CSS? That's what we're going to put to the test today. I have prepared uh some HTML and CSS that I grabbed from Code Pin for Wes and Scott. They're only going to be able to look at the code and then they have to draw it. They're going to have a minute to plan and then 10 minutes to draw. At the halfway mark, I'm going to give them a lifeline. I'm going to give them a hint about one section of the image. But, uh, are you guys ready for this? I am ready. I am so ready for this. I think this is such a great idea and I think it's going to end horribly. Yeah. I can't wait to see your your scribbles. Okay. So, all right. So, what do we got here? We've got a card H2 Brussels. So, we've got the Oh my gosh. Who's using H2H3 H1? That's bad. Okay. Then we have the sky with clouds. Okay. We got circles. We got a small, medium, and tall. And then we have a table border radius. Okay, so it's a 100 pixel circle of the sky. Wait, where is sky? Sun, sky, sun, cloud. So in the sky, there is a sun and a cloud. Three clouds. Okay, there's no display grid or anything on this card. Uh, so things are just going to be going top floating right. The H1 is floating right. The H3 is floating left. And how big is this stuff? So the person using that is Thomas Valz. This is their weather card from Code Pin. It's pretty pretty standard. Looks kind of like material design. Um I do think the interesting part is going to be the sun and the clouds here because these are actually done purely with CSS. All right, their time starts now. They got 10 minutes to draw this thing. Should be straightforward. I mean, if you look at the HTML, nothing crazy. It's really just a matter of figuring out where the text goes. I I'm curious to see how they're going to draw like bolded text and if they can figure out this part here before the 5minute mark. We have a border card. The border card is going to be something like a width of 290. And I'm going to do 290 which isn't that much. Um and then I'm going to do it by it has a little border radius. Uh 470 which is you know a a card that kind of looks like this. There we go. That's That's maybe too much of a border radius if we're being entirely honest. Uh, all right. So, we got a card that is 290 by 470. Okay. Border radius 3 pixels. I think that's that looks pretty good. Uh, little bit of box shadow. You know what? Let's do the box shadow right now. I think that's going to win it for me. Look. Oh, look at that box shadow. Baby. Oh, wait. box shadow. One pixel over, two pixels down. Oh, it's like this. Nice. That's a nice box shadow for using a paint tool. Love to see it. That's okay. We also have a box shadow. Box shadow is going to be a one pixel and a two pixel down. So, we have this one. It goes one pixel over and then two pixels down. Okay. So, two pixels. A little bit beefier on the bottom here. And then with that layer, we can make that layer. Oh yeah, baby. Yeah. So sky locking in the the box shadow. Oh, there we go. I like that. To reduce the opacity. That's looking great. Now the card itself has Brussels cloudy 23°. Then we have the sun in the sky. And then we have the table of five. Okay, you know what? Let's do the table first. First things first, obey your thirst. We got a text of uh 2.25. Let's see H2. And this text is going to be some text. Okay. And since it is, it's probably just going to be text align left, right? I don't think there's a text align center on here unless I'm crazy. And then the H. So the H2 is first, then the H3, then the H1. H3 is floating left, and then the H1 is floating right. And then there are actually Oh, font size is quite a bit bigger on this one. Okay. How big is the table though? It's just about the height of it. The sun is 55 pixels and then the height of the H1, H2, and H3 are just based on the font size. So, I'm guessing it's going to be like half or so like that. And then it's broken down into one, two, three, four. Okay. So, then we have some clouds. We have a sky with a sun and some clouds. sky with the sun and some clouds. So, the sun is going to be a color of this and okay. Ooh, that's a beautiful sun. It's going to be a beautiful Sunday. Okay. Width is 55. Height is whatever. Top of -3, position relative, border radius. Okay, there's the sun. What a beautiful sun that is. Um, and then the sky. Oh, the sky. The wonderful sky. The sky. The sky is a container that wraps around this whole thing. And the sky is also positioned relative. And then each does a table have padding bottom padding. Is there any borders? No, there's not. So there's just going to be a little like a Monday, Tuesday, Wednesday, Thursday, Friday, and then it will say a low and a high. So yeah. And so Wes is dialing in that bottom table there. And I think he's got it right. He's got the It's got the uh degrees on top and then degrees below it. 67. I'm imagining the sky looks something like this. Okay. And then the clouds. There's three clouds. And how what do the clouds look like? The clouds. The clouds are a fluffy white F faming F in the chat. Let's go. So, we have Oh, the clouds are are kind of mysterious. So the there the there are there multiple clouds. There's three clouds. No cloud circle small whatever. But I just see cloud and and then afters. I don't see any classes for those afters. So we have a sun which is 55x 55 with a yellow background. Okay. Boom. Oh no. I don't want it scattered. Oh, that's why I'm on the wrong. Okay. There's my son. So that's curious. That mean leads me to think I'm missing something. But if they are height of 18 pixels and and their margin left of 10 um their position top 30 pixels and so we have Oh yeah. Okay. This actually changes things for me. Can I grab this? No. Um I'm glad I put the sun on a layer. Oh, I put it on the same effing layer as the text. You joking with me? And the cloud 51 circle small circle tall circle medium. A I that just looks like a cloud, right? So you grab a cloud color. I'm not even going to look at what color it is. So there is a a cloud that is like this. A slightly smaller cloud and then a even smaller cloud. Okay. I love their interpretations of these clouds here. I think so. The hint that I'm going to send them is just the center section of the card. They can actually see what they should be drawing here. And they're going to get the hint that that 23 degrees needs to be pushed down. All right. So, 5minute warning. And I'm going to send them this hint now. Raise 50%. Oh, there's a little bit of box shadow on the clouds. So, here's what we're going to do. 23. Oh, blue. My hint is blue. What is blue? The cloud is white. Okay, I need a new layer. Um, how do you add a layer? I had this all dialed and it was ever so slightly off. Okay. So, okay. Pump up the jam. Pump it up. Okay. This changes everything. How I'm going to do this cloud. And then I also need to erase on the blue layer because that no longer looks like that. There we go. Beautiful. Beauty. Okay. And then the text for the um the table. Do we know what about the table? The table. The table. The table. We don't have any font color for this. Okay. No, that's zooming. Add a layer. I don't want to copy it. No, I don't want that. Plus layer. Okay. But can I move layer down? Okay, good. Um, I'm going to go grab that blue color. It's kind of a bluey blue. Okay. And then we're just going to go big ass circle behind everything. Ready? Oh no. Oh no. You know what? Make a new layer. Go back here. We're going to No. What the hell is this scatter? The spray paint tool. And I don't think they're noticing that the 23° needs to be the right to the right of the icon. We'll see if they catch on to that. But that is in the that's in the preview. Oh, right here. That's why. Boom. Okay. And then we'll go back yellow slightly smaller 55 pixel sun. Okay. And then we'll grab our clouds. There was three clouds, right? One, two, three. I think I'm doing great here. Um, let's focus on paddings. Paddings. Tables. Box. Shadow. Cloud. We got the cloud. sky. Oh, I see the sky goes behind it. Okay, we nailed that. I think we nailed this, man. Robboto font. That looks like Robboto, doesn't it? You know, the one thing I didn't get was this this float right here. So, I'm going to head back to my other layers and because I did see that. Which layer is that in? Is that in this layer? That's in that layer. Okay, let's get rid of that. Let's erase that. I can't erase that on that layer. Okay, fellas. I think we nailed it. I think maybe if I could have done something better is maybe my text could have been a bit more on point. It's kind of hard to do text maybe. And maybe I should have actually got the right values, but fellas, I think we nailed it. I don't know how I don't think Scott's going to get the border rad the box shadow on this. And like that's that's the killer subtlety. I am Chrome. I am the renderer. I know CSS better than Chrome does. I'm fellas, I'm done. I do like Wes's. I would have to agree. He's doing great. He locked that table in early. And uh I will say though, his image his his icon is a little too big, right? And the and the 23° is not in the right spot. But I will say Wes is going to get brownie points for uh writing out the text, whereas Scott is using more of like uh scribbles to represent text. But a lot of the UI is text, so it kind of takes away from it. Now, that text was a What? What is the text? It's 20 three degrees. Let's see what Scott's doing. I peek on him. Oh, damn it. Scott got the Scott got the box shadow. My border is a bit too thick. Should we do a quick white white out the border? Oh, no. Oh, no. Undo. No, I'm gonna leave it. I think I think my son is gonna win it. Looking at Scots, his looks like dog The text is interesting here because let's see. Let's see. Let's see. It says Brussels. Is do I see anything that's text align center? Is there text align center on the table? Sure. Is there text align center on anything else? No. So, I think I think mine's way better. Okay, it very well may be. Let's do sky. Sky. Sky. 2 seconds. 2 seconds. Okay. Does that actually make this any better? That's it. That's it. Um 21 seconds left. No, he's cheating. Ref, will you please deduct him for not caring? Okay, good. Yeah, I stopped when he said done. I didn't been working. Oh no, I just realized a major mistake I made. Yeah, Wes, you're so confident looking at Scots. He's got the the the number beside the sun, which that's in the hint. Damn. Yeah, you missed it. I will say you got you guys did great. I think Wes's looks a little bit like a slot machine with those numbers 67 down there. But I would say you locked that in early, which is nice. Like you you nailed like reading that table and uh rendering it out. I do like erase some of my table. Okay. But I like Yeah. Yeah. The bottom of it. But I I like your your border width. I like your border radius. I do wish you would have put a little more effort into drawing instead of scribbles in terms of the text. Who? Scott or me? Scott. Scott. I'm using a trackpad. I'm using a trackpad. Looks awful, Scott. No, I love Wes's scribbles. Yeah, you got you got the Brussels in there. You got 23 67. So CJ, who did a better box shadow? We both got it. My box shadow. Well, what Wes did the box shadow first? Like they I didn't know I I didn't think anybody would figure out how to do it, but then uh Scott figured out how to how to reduce opacity on a layer and that like locked it in better. But I used I used the like spray paint tool though. M that's what box shadow is but your box shadow is consistent on both the right and the left and if you are reading that CSS there is a one pixel difference on the y-axis than the x-axis mine has a bit mine is a bit thicker on the bottom than it does on the side. Can you show us the answer? Scott's talking too much smack. Here's the official I know what it's going to look like cuz I already see it. It's right in front of me. The cloud gray. The cloud should be white. I I missed two things in the the hint. Oh yeah, and also you added borders to the dang table for some reason. Yeah, I will say Scott also locked in the color of the text. You got like the dark text and then the light gray text. So all my colors are better. All of my colors are better. The border is correct. There is no reset that removed the default borders from tables in this CSS CJ. So therefore, my borders are correct. You really wish that was the case. Look, I'm I'm sharing the official solution now if you if you want to take a look. Okay, so this is from Thomas Thomas Valz. on code pen and uh it looks very much like material UI coded, but yeah, I don't see any lines for the tables. I don't know where those got reset in the CSS. There's probably a included reset in code pen. I think there is. Uh let's see. That's okay. That was I didn't I didn't do those because I assumed Well, it's not using a CSS base or a vendor prefix. Guys, I just want to say if just purely looking at these, Wes missed the the text color. He generally missed the general layout of it. The the lines are wonky as hell and the colors aren't even close. Even the colors of the sun aren't even close. I will say he locked in the clouds of the icon before I shared the the uh he locked them in incorrectly. Yeah, I guess but he still had cloud. He he guessed that I guess it's called the the class name is clouds, but he did guess the general shape of the No, I looked at it. I looked at the CSS and I rendered it in my head because I know CSS. All right. Well, you let us know at home who do you think did a better job and also let us know uh if you did this. Maybe share your images on uh on X or Blue Sky. Your borders are not even selected. Anyways, yeah, we got to end the video, but I'm going to continue to fight this after. Thanks for tuning in, folks. Bye.