Can You Draw a UI With Only the Code - CourtneyR.dev's 2nd Brain

Can You Draw a UI With Only the Code? ![rw-book-cover](https://img.youtube.com/vi/hRMzxv0zGsM/maxresdefault.jpg) 🔗 **Source:** [Can You Draw a UI With Only the Code?](https://www.youtube.com/watch?v=hRMzxv0zGsM) > [!note]+ Document Notes > tags: #css #frontend #ui-design #web-development #code-visualization > author: CJ, Wes Bos, Scott Tolinski > source: YouTube > reference: https://www.youtube.com/watch?v=hRMzxv0zGsM > date created: 2024-12-19 12:00 > > # 🏷️ Title: Can You Draw a UI with Only the Code? >  ## 🧰 Action Inbox - [H1] Practice visualizing CSS in your head — improves debugging skills #css - [H2] Try drawing interfaces from code — strengthens HTML/CSS comprehension #frontend - [H3] Use CodePen for CSS art practice — builds advanced styling skills #web-development ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Original CodePen by Thomas Valz](https://codepen.io/thomasvalz) - [Wes Bos YouTube](https://youtube.com/wesbos) ## 📝 Summary - Wes Bos and Scott Tolinski attempt to draw a UI based solely on HTML and CSS code - They have 1 minute to plan and 10 minutes to draw a weather card interface - The challenge tests their ability to mentally visualize CSS rendering - Both developers demonstrate different approaches to interpreting layout and styling - Key differences emerge in attention to detail, color accuracy, and layout positioning ## 📖 Main Content This video presents a unique challenge where experienced developers must translate code into visual representation without seeing the rendered output. The exercise reveals how different developers interpret CSS properties and demonstrates the complexity of mental CSS rendering. The target interface is a material design-style weather card from CodePen featuring Brussels weather data with temperature, sky conditions including CSS-generated sun and clouds, and a weather forecast table. Both participants show strong understanding of CSS fundamentals but struggle with precise positioning and color interpretation. The challenge highlights the gap between understanding CSS syntax and accurately predicting visual output, particularly with CSS-generated graphics and precise layout calculations. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/hRMzxv0zGsM?t=0) — [H1] Challenge Setup and Rules - Key idea: Developers must draw UI from HTML/CSS code only - Evidence: "1 minute to plan and 10 minutes to draw" #### ⏱️ [01:30](https://youtu.be/hRMzxv0zGsM?t=90) — [H2] Initial Code Analysis - Key idea: Both developers start by analyzing the HTML structure - Evidence: "We got a card H2 Brussels... sky with clouds" #### ⏱️ [02:45](https://youtu.be/hRMzxv0zGsM?t=165) — [H3] CSS Layout Interpretation - Key idea: Floating elements create layout challenges for visualization - Evidence: "H1 is floating right. The H3 is floating left" #### ⏱️ [03:20](https://youtu.be/hRMzxv0zGsM?t=200) — [H2] Drawing Phase Begins - Key idea: Different approaches emerge for card container creation - Evidence: "border card... width of 290... border radius 3 pixels" #### ⏱️ [04:15](https://youtu.be/hRMzxv0zGsM?t=255) — [H3] Box Shadow Implementation - Key idea: Both developers successfully interpret box-shadow CSS property - Evidence: "one pixel over, two pixels down... nice box shadow" #### ⏱️ [05:30](https://youtu.be/hRMzxv0zGsM?t=330) — [H2] Text Layout Strategy - Key idea: Table structure interpretation varies between developers - Evidence: "table of five... Monday, Tuesday, Wednesday, Thursday, Friday" #### ⏱️ [06:45](https://youtu.be/hRMzxv0zGsM?t=405) — [H1] CSS-Generated Graphics Challenge - Key idea: Pure CSS sun and clouds prove most difficult to visualize - Evidence: "sun is 55 pixels... clouds are fluffy white" #### ⏱️ [08:00](https://youtu.be/hRMzxv0zGsM?t=480) — [H2] Mid-Challenge Hint Provided - Key idea: Visual hint reveals center section layout requirements - Evidence: "23 degrees needs to be pushed down" #### ⏱️ [09:15](https://youtu.be/hRMzxv0zGsM?t=555) — [H3] Color and Positioning Adjustments - Key idea: Hint triggers layout corrections and color refinements - Evidence: "blue layer... 23° needs to be the right to the right of the icon" #### ⏱️ [10:30](https://youtu.be/hRMzxv0zGsM?t=630) — [H2] Final Details and Competition - Key idea: Last-minute improvements focus on text placement and borders - Evidence: "border is a bit too thick... Scott got the box shadow" #### ⏱️ [11:45](https://youtu.be/hRMzxv0zGsM?t=705) — [H3] Drawing Phase Completion - Key idea: Time pressure affects final detail work - Evidence: "2 seconds... I'm done" #### ⏱️ [12:15](https://youtu.be/hRMzxv0zGsM?t=735) — [H1] Results Comparison and Analysis - Key idea: Different strengths emerge in accuracy vs interpretation - Evidence: "Wes's looks a little bit like a slot machine" #### ⏱️ [13:30](https://youtu.be/hRMzxv0zGsM?t=810) — [H2] Official Solution Reveal - Key idea: Actual CodePen design shows material UI styling - Evidence: "from Thomas Valz on CodePen... looks very much like material UI" ## 📚 References - [CodePen](https://codepen.io/) - [Material Design Guidelines](https://material.io/design) - [CSS Box Model Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model) ## 🗣️ Paraphrase - Two experienced developers attempt to draw a user interface by reading only HTML and CSS code, demonstrating how mental visualization of CSS can be challenging even for experts - The challenge reveals different interpretation strategies, with one developer focusing on precise measurements while another emphasizes overall layout structure - Both participants struggle most with CSS-generated graphics and precise positioning, highlighting the complexity gap between understanding CSS syntax and predicting visual output ## 📰 Newsletter **Can You Visualize CSS in Your Head?** Ever wondered how well you really know CSS? This fascinating experiment shows two seasoned developers attempting to draw a UI from code alone. The results are eye-opening! **Key Learning**: Even CSS experts struggle with mental visualization, particularly around CSS-generated graphics and precise positioning. This highlights why browser developer tools are so essential for frontend work. **Practical Application**: Try this exercise with your own projects! It's an excellent way to deepen your understanding of CSS rendering and identify gaps in your mental model. **Community Challenge**: Share your own attempts on social media - it's a fun way to engage with fellow developers and test your skills. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create similar CSS visualization challenges for workshops - Education: Develop curricula around CSS mental models and rendering understanding - Developer experience: Improve CSS documentation with visual examples - Developer marketing: Promote interactive CSS learning through challenges - Community management: Foster CSS art and visualization challenges #### WordPress - Core: Improve CSS debugging tools in WordPress admin - Design: Create design token documentation with visual examples - Documentation: Add visual CSS guides to developer documentation - Training: Develop CSS visualization exercises for WordPress developers - Community: Host CSS challenge events at WordCamps ## 🧪 Hypotheses - Developers with stronger visual design backgrounds perform better at CSS visualization tasks - Practice with CSS art and animations improves ability to mentally render layouts - Tools that show CSS step-by-step rendering would improve developer understanding - Time pressure significantly impacts accuracy of CSS mental visualization ### 📊 Methodology - Controlled study comparing CSS visualization accuracy across experience levels - A/B testing of CSS documentation with and without visual examples - Longitudinal tracking of CSS visualization skill improvement through practice ### ❓ Questions - How does CSS visualization ability correlate with debugging efficiency? - What CSS properties are most difficult to mentally visualize accurately? - Could AI assistants help developers improve CSS mental modeling? ### 🔮 Future Research - Development of CSS visualization training tools and methodologies - Investigation of cognitive factors affecting CSS mental rendering - Creation of automated CSS-to-visual generation for documentation ### 💡 Implications - Practice: Regular CSS visualization exercises could improve debugging skills - Education: Visual-first CSS teaching methods may be more effective - Tooling: Better CSS preview and step-through tools are needed ### 🧠 Learning Styles Assessment Reading level estimate: 8th Grade #### 👀 Visual learners - Present: Side-by-side code and rendered output comparisons - Improve: Step-by-step CSS rendering animations, interactive examples #### 🔊 Aural learners - Present: Video format with developer commentary - Improve: Audio descriptions of visual changes during CSS rendering #### 🗣️ Verbal learners - Present: Clear explanations of CSS property effects - Improve: Analogies comparing CSS properties to real-world concepts #### 🧩 Kinesthetic learners - Present: Interactive drawing exercise format - Improve: Hands-on CSS manipulation tools, live coding exercises #### 🧠 Logical learners - Present: Systematic breakdown of CSS properties and effects - Improve: Decision trees for CSS property interactions #### 🧑‍🤝‍🧑 Social learners - Present: Collaborative challenge format with discussion - Improve: Peer review of CSS visualization attempts #### 🧘‍♀️ Solitary learners - Present: Individual challenge with self-assessment - Improve: Self-paced CSS visualization practice modules #### 🌿 Naturalistic learners - Present: Real-world UI examples and patterns - Improve: CSS ecosystem understanding and pattern recognition ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure in video description - Improve: Detailed alt text for visual code comparisons #### Keyboard navigation - Present: Standard video controls - Improve: Keyboard shortcuts for code section navigation #### Contrast and readability - Present: High contrast code display - Improve: Ensure color coding doesn't rely solely on color #### Media and captions - Present: Video with audio commentary - Improve: Complete captions including visual descriptions #### Forms and interactions - Present: Simple video interface - Improve: Accessible interactive CSS playground ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global accessibility of CSS concepts - Improve: Examples from diverse design traditions #### Inclusive language - Present: Technical but accessible terminology - Improve: Define jargon for newer developers #### Neurodiversity support - Present: Multiple learning approaches demonstrated - Improve: Alternative formats for different processing styles #### Representation - Present: Multiple developer perspectives - Improve: Diverse voices in CSS education content ### ✅ Logical Validity #### Strong reasoning - Deductive strength: CSS properties lead to predictable visual outcomes - Inductive strength: Pattern recognition from multiple CSS examples - Causal reasoning: Clear cause-effect between CSS rules and visual results #### Fallacies - False dichotomy: Suggesting only two approaches to CSS visualization - Appeal to authority: Relying on developer experience without verification #### Tone of voice - Overall tone: Playful and educational with competitive elements ### 🛡️ DARVO Analysis - No DARVO patterns detected in this educational content ## 🎯 Conclusion This experiment demonstrates that CSS visualization is a learnable skill that even experienced developers can improve upon. The challenge reveals the complexity of mental CSS rendering and highlights the value of hands-on practice with visual feedback. For developers, regular exercises in CSS visualization could significantly improve debugging efficiency and design implementation accuracy. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] CSS visualization challenges improve developer debugging skills > [!quote] [Can You Draw a UI with Only the Code?](https://www.youtube.com/watch?v=hRMzxv0zGsM) by CJ, Wes Bos, Scott Tolinski via YouTube. Published 2024. Accessed 2024-12-19. > "Even CSS experts struggle with mental visualization, particularly around CSS-generated graphics." Demonstrates gap between syntax knowledge and visual prediction ability. [view highlight](https://www.youtube.com/watch?v=hRMzxv0zGsM#H1) #xref #articleseed ID:rw_css_viz_001 ### [H2] CSS-generated graphics are hardest to mentally visualize > [!quote] [Can You Draw a UI with Only the Code?](https://www.youtube.com/watch?v=hRMzxv0zGsM) > "Pure CSS sun and clouds prove most difficult to visualize." Complex CSS shapes require more advanced mental modeling than layout properties. [view highlight](https://www.youtube.com/watch?v=hRMzxv0zGsM#H2) #xref ID:rw_css_viz_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Time pressure reduces CSS visualization accuracy - Applies to development debugging under deadlines - Evidence at 11:45 timestamp showing rushed final details - Links: [[CSS-Mental-Models]] [[Developer-Performance]] #### [Z2] Box shadow properties are easier to visualize than positioning - Both developers successfully implemented shadows but struggled with layout - Evidence throughout drawing phase comparisons - Links: [[CSS-Properties]] [[Visual-Hierarchy]] --- ### ✏️ Fleeting Queue - [F1] Create CSS visualization workshop for local meetup — based on video format #fleeting #inbox - [F2] Research CSS teaching methods that emphasize visual outcomes — education focus #fleeting #inbox - [F3] Test personal CSS visualization skills with CodePen challenges — skill development #fleeting #inbox --- ## Full Transcript [00:00] Could you draw a UI by only looking at [00:02] the HTML and CSS? That's what we're [00:04] going to put to the test today. I have [00:06] prepared uh some HTML and CSS that I [00:09] grabbed from Code Pin for Wes and Scott. [00:11] They're only going to be able to look at [00:12] the code and then they have to draw it. [00:14] They're going to have a minute to plan [00:16] and then 10 minutes to draw. At the [00:18] halfway mark, I'm going to give them a [00:19] lifeline. I'm going to give them a hint [00:20] about one section of the image. But, uh, [00:23] are you guys ready for this? [00:24] >> I am ready. I am so ready for this. I [00:27] think this is such a great idea and I [00:29] think it's going to end horribly. [00:31] >> Yeah. I can't wait to see your your [00:33] scribbles. Okay. So, [00:36] all right. So, what do we got here? [00:37] We've got [00:39] a card H2 Brussels. So, we've got the Oh [00:44] my gosh. Who's using H2H3 H1? That's [00:48] bad. Okay. Then we have the sky with [00:52] clouds. Okay. We got circles. We got a [00:54] small, medium, and tall. And then we [00:56] have a table border radius. Okay, so [00:58] it's a 100 pixel circle of the sky. [01:02] Wait, where is sky? Sun, sky, sun, [01:06] cloud. So in the sky, there is a sun and [01:10] a cloud. Three clouds. Okay, there's no [01:13] display grid or anything on this card. [01:15] Uh, so things are just going to be going [01:17] top floating right. The H1 is floating [01:20] right. The H3 is floating left. And how [01:24] big is this stuff? [01:25] >> So the person using that is Thomas Valz. [01:28] This is their weather card from Code [01:30] Pin. It's pretty pretty standard. Looks [01:31] kind of like material design. Um I do [01:34] think the interesting part is going to [01:35] be the sun and the clouds here because [01:37] these are actually done purely with CSS. [01:40] All right, their time starts now. They [01:41] got 10 minutes to draw this thing. [01:44] Should be straightforward. I mean, if [01:45] you look at the HTML, nothing crazy. [01:47] It's really just a matter of figuring [01:48] out where the text goes. I I'm curious [01:50] to see how they're going to draw like [01:52] bolded text and if they can figure out [01:55] this part here before the 5minute mark. [01:57] >> We have a border card. The border card [01:59] is going to be something like a width of [02:01] 290. And I'm going to do 290 [02:05] which isn't that much. Um and then I'm [02:07] going to do it by it has a little border [02:09] radius. Uh 470 which is you know a a [02:13] card that kind of looks like this. There [02:15] we go. That's That's maybe too much of a [02:18] border radius if we're being entirely [02:19] honest. Uh, all right. So, we got a card [02:23] that is 290 [02:27] by 470. [02:29] Okay. Border radius 3 pixels. I think [02:32] that's that looks pretty good. Uh, [02:34] little bit of box shadow. You know what? [02:36] Let's do the box shadow right now. I [02:38] think that's going to win it for me. [02:40] Look. Oh, look at that box shadow. [02:43] Baby. Oh, wait. box shadow. One pixel [02:46] over, two pixels down. Oh, it's like [02:50] this. [02:52] Nice. That's a nice box shadow for using [02:55] a paint tool. Love to see it. [02:57] >> That's okay. We also have a box shadow. [02:59] Box shadow is going to be a one pixel [03:01] and a two pixel down. So, we have this [03:04] one. It goes one pixel over and then two [03:08] pixels down. Okay. So, two pixels. A [03:11] little bit beefier on the bottom here. [03:13] And then with that layer, we can make [03:15] that layer. Oh yeah, baby. [03:18] >> Yeah. So sky locking in the the box [03:21] shadow. Oh, there we go. I like that. To [03:23] reduce the opacity. That's looking [03:25] great. Now the card itself has Brussels [03:30] cloudy [03:32] 23°. [03:34] Then we have the sun in the sky. And [03:35] then we have the table of five. Okay, [03:38] you know what? Let's do the table first. [03:41] First things first, obey your thirst. We [03:42] got a text of uh 2.25. Let's see H2. And [03:46] this text is going to be some text. [03:48] Okay. And since it is, it's probably [03:50] just going to be text align left, right? [03:52] I don't think there's a text align [03:53] center on here unless I'm crazy. And [03:55] then the H. So the H2 is first, then the [03:57] H3, then the H1. H3 is floating left, [04:01] and then the H1 is floating right. And [04:05] then there are actually Oh, font size is [04:07] quite a bit bigger on this one. [04:10] Okay. How big is the table though? It's [04:12] just about the height of it. The sun is [04:15] 55 pixels and then the height of the H1, [04:20] H2, and H3 are just based on the font [04:22] size. So, I'm guessing it's going to be [04:24] like half or so like that. And then it's [04:29] broken down into one, two, three, four. [04:35] Okay. So, then we have some clouds. We [04:37] have a sky with a sun and some clouds. [04:39] sky with the sun and some clouds. So, [04:41] the sun is going to be a color of this [04:45] and okay. Ooh, that's a beautiful sun. [04:48] It's going to be a beautiful Sunday. [04:50] Okay. Width is 55. Height is whatever. [04:53] Top of -3, position relative, border [04:56] radius. Okay, there's the sun. What a [04:58] beautiful sun that is. Um, and then the [05:00] sky. Oh, the sky. The wonderful sky. The [05:03] sky. The sky is a container that wraps [05:06] around this whole thing. And the sky is [05:08] also positioned relative. And then each [05:12] does a table have padding bottom [05:15] padding. Is there any borders? No, [05:17] there's not. So there's just going to be [05:19] a little like a Monday, Tuesday, [05:21] Wednesday, Thursday, Friday, and then it [05:26] will say a low and a high. So yeah. And [05:30] so Wes is dialing in that bottom table [05:32] there. And I think he's got it right. [05:36] He's got the It's got the uh degrees on [05:39] top and then degrees below it. 67. [05:43] I'm imagining the sky looks something [05:46] like this. Okay. And then the clouds. [05:51] There's three clouds. And how what do [05:53] the clouds look like? The clouds. The [05:55] clouds are a fluffy white F faming [05:59] F in the chat. Let's go. So, we have Oh, [06:03] the clouds are are kind of mysterious. [06:05] So the there the there are there [06:08] multiple clouds. There's three clouds. [06:11] No cloud circle small whatever. But I [06:13] just see cloud and and then afters. I [06:15] don't see any classes for those afters. [06:18] So we have a sun which is 55x 55 with a [06:22] yellow background. Okay. Boom. Oh no. I [06:26] don't want it scattered. Oh, that's why [06:29] I'm on the wrong. [06:31] Okay. There's my son. So that's curious. [06:34] That mean leads me to think I'm missing [06:36] something. But if they are height of 18 [06:39] pixels and and their margin left of 10 [06:44] um their position top 30 pixels and so [06:48] we have Oh yeah. Okay. This actually [06:52] changes things for me. Can I grab this? [06:55] No. Um I'm glad I put the sun on a [06:58] layer. Oh, I put it on the same effing [07:00] layer as the text. You joking with me? [07:02] And the cloud 51 [07:06] circle small circle tall circle medium. [07:09] A I that just looks like a cloud, right? [07:11] So you grab a cloud color. I'm not even [07:14] going to look at what color it is. So [07:16] there is a a cloud that is like this. A [07:21] slightly smaller cloud and then a even [07:25] smaller cloud. Okay. [07:29] I love their interpretations of these [07:31] clouds here. I think so. The hint that [07:33] I'm going to send them is just the [07:35] center section of the card. They can [07:37] actually see what they should be drawing [07:38] here. And they're going to get the hint [07:41] that that 23 degrees needs to be pushed [07:42] down. All right. So, 5minute warning. [07:44] And I'm going to send them this hint [07:46] now. Raise 50%. Oh, there's a little bit [07:48] of box shadow on the clouds. So, here's [07:50] what we're going to do. 23. Oh, blue. My [07:54] hint is blue. What is blue? The cloud is [07:57] white. Okay, I need a new layer. Um, how [08:02] do you add a layer? I had this all [08:04] dialed and it was ever so slightly off. [08:07] Okay. So, okay. [08:11] Pump up the jam. Pump it up. Okay. This [08:14] changes everything. How I'm going to do [08:16] this cloud. And then I also need to [08:19] erase on the blue layer because that no [08:22] longer looks like that. There we go. [08:24] Beautiful. Beauty. Okay. And then the [08:28] text for the um the table. Do we know [08:31] what about the table? The table. The [08:32] table. The table. We don't have any font [08:34] color for this. Okay. No, that's [08:37] zooming. [08:38] Add a layer. I don't want to copy it. [08:41] No, I don't want that. Plus layer. Okay. [08:44] But can I move layer down? Okay, good. [08:46] Um, I'm going to go grab that blue [08:49] color. It's kind of a bluey blue. Okay. [08:54] And then we're just going to go big ass [08:57] circle behind everything. Ready? Oh no. [09:00] Oh no. You know what? Make a new layer. [09:03] Go back here. We're going to No. What [09:08] the hell is this scatter? [09:11] The spray paint tool. And I don't think [09:14] they're noticing that the 23° needs to [09:16] be the right to the right of the icon. [09:19] We'll see if they catch on to that. But [09:20] that is in the that's in the preview. [09:23] Oh, right here. That's why. Boom. Okay. [09:28] And then we'll go back yellow slightly [09:32] smaller 55 pixel sun. Okay. And then [09:36] we'll grab our clouds. [09:39] There was three clouds, right? One, two, [09:44] three. I think I'm doing great here. Um, [09:48] let's focus on paddings. Paddings. [09:51] Tables. Box. Shadow. Cloud. We got the [09:55] cloud. sky. Oh, I see the sky goes [09:59] behind it. Okay, we nailed that. I think [10:01] we nailed this, man. Robboto font. That [10:04] looks like Robboto, doesn't it? You [10:06] know, the one thing I didn't get was [10:08] this this float right here. So, I'm [10:10] going to head back to my other layers [10:12] and because I did see that. Which layer [10:15] is that in? Is that in this layer? [10:17] That's in that layer. Okay, let's get [10:20] rid of that. Let's erase that. I can't [10:23] erase that on that layer. Okay, fellas. [10:26] I think we nailed it. I think maybe if I [10:29] could have done something better is [10:30] maybe my text could have been a bit more [10:33] on point. It's kind of hard to do text [10:37] maybe. And maybe I should have actually [10:38] got the right values, but fellas, I [10:41] think we nailed it. I don't know how I [10:43] don't think Scott's going to get the [10:44] border rad the box shadow on this. And [10:47] like that's that's the killer subtlety. [10:49] I am Chrome. I am the renderer. I know [10:53] CSS better than Chrome does. I'm fellas, [10:56] I'm done. [10:57] >> I do like Wes's. I would have to agree. [10:59] He's doing great. He locked that table [11:01] in early. And uh I will say though, his [11:04] image his his icon is a little too big, [11:07] right? And the and the 23° is not in the [11:09] right spot. But I will say Wes is going [11:12] to get brownie points for uh writing out [11:14] the text, whereas Scott is using more of [11:16] like uh scribbles to represent text. But [11:20] a lot of the UI is text, so it kind of [11:22] takes away from it. [11:24] >> Now, that text was a What? What is the [11:27] text? It's 20 three [11:31] degrees. [11:33] Let's see what Scott's doing. I peek on [11:35] him. Oh, damn it. Scott got the Scott [11:38] got the box shadow. My border is a bit [11:41] too thick. Should we do a quick white [11:45] white out the border? Oh, no. Oh, no. [11:48] Undo. No, I'm gonna leave it. I think I [11:52] think my son is gonna win it. Looking at [11:54] Scots, his looks like dog The text [11:57] is interesting here because let's see. [12:01] Let's see. Let's see. It says Brussels. [12:04] Is do I see anything that's text align [12:06] center? [12:08] Is there text align center on the table? [12:10] Sure. Is there text align center on [12:13] anything else? [12:15] No. So, I think I think mine's way [12:19] better. Okay, it very well may be. Let's [12:22] do sky. Sky. Sky. [12:28] >> 2 seconds. 2 seconds. [12:31] >> Okay. Does that actually make this any [12:33] better? [12:33] >> That's it. That's it. [12:34] >> Um 21 seconds left. [12:37] >> No, he's cheating. [12:40] Ref, will you please deduct him for not [12:42] caring? [12:43] >> I'm done. [12:44] >> Okay, good. [12:45] Yeah, [12:46] >> I stopped when he said done. I didn't [12:48] been working. [12:48] >> Oh no, I just realized a major mistake I [12:52] made. [12:53] >> Yeah, Wes, you're so confident [12:55] >> looking at Scots. [12:57] >> He's got the the the number beside [13:00] >> the sun, which that's in the hint. [13:03] >> Damn. [13:03] >> Yeah, you missed it. [13:06] >> I will say you got you guys did great. I [13:07] think Wes's looks a little bit like a [13:09] slot machine with those numbers 67 down [13:11] there. But [13:12] >> I would say you locked that in early, [13:14] which is nice. Like you you nailed like [13:17] reading that table and uh rendering it [13:19] out. I do like [13:20] >> erase some of my table. [13:22] >> Okay. But I like Yeah. Yeah. The bottom [13:24] of it. But I I like your your border [13:27] width. I like your border radius. I do [13:29] wish you would have put a little more [13:30] effort into drawing instead of scribbles [13:33] in terms of the text. [13:33] >> Who? Scott or me? [13:34] >> Scott. Scott. [13:35] >> I'm using a trackpad. I'm using a [13:37] trackpad. Looks awful, Scott. [13:40] >> No, I love Wes's scribbles. Yeah, you [13:41] got you got the Brussels in there. You [13:43] got 23 67. [13:45] >> So CJ, who did a better box shadow? We [13:47] both got it. [13:48] >> My box shadow. [13:50] >> Well, what Wes did the box shadow first? [13:53] Like they I didn't know I I didn't think [13:54] anybody would figure out how to do it, [13:56] but then uh Scott figured out how to how [13:58] to reduce opacity on a layer and that [14:00] like locked it in better. [14:01] >> But I used I used the like spray paint [14:03] tool though. M that's what box shadow is [14:07] >> but your box shadow is consistent on [14:09] both the right and the left and if you [14:11] are reading that CSS there is a one [14:14] pixel difference on the y-axis than the [14:17] x-axis [14:19] mine has a bit mine is a bit thicker on [14:22] the bottom than it does on the side. [14:23] >> Can you show us the answer? Scott's [14:25] talking too much smack. [14:27] >> Here's the official [14:28] >> I know what it's going to look like cuz [14:29] I already see it. It's right in front of [14:30] me. [14:31] >> The cloud gray. The cloud should be [14:33] white. I I missed two things in the the [14:35] hint. [14:36] >> Oh yeah, and also you added borders to [14:38] the dang table for some reason. [14:40] >> Yeah, I will say Scott also locked in [14:42] the color of the text. You got like the [14:44] dark text and then the light gray text. [14:46] >> So all my colors are better. All of my [14:48] colors are better. [14:49] >> The border is correct. There is no [14:52] reset that removed the default borders [14:56] from tables in this CSS CJ. So [14:59] therefore, my borders are correct. [15:03] You really wish that was the case. [15:05] >> Look, I'm I'm sharing the official [15:06] solution now if you if you want to take [15:07] a look. [15:08] >> Okay, [15:09] >> so this is from Thomas Thomas Valz. [15:13] >> Okay, [15:13] >> on code pen and uh it looks very much [15:16] like material UI coded, but yeah, I [15:18] don't see any lines for the tables. I [15:20] don't know where those got reset in the [15:21] CSS. [15:21] >> There's probably a included reset in [15:23] code pen. I think there is. [15:24] >> Uh let's see. [15:25] >> That's okay. That was I didn't I didn't [15:28] do those because I assumed [15:30] >> Well, it's not using a CSS base or a [15:32] vendor prefix. [15:34] >> Guys, I just want to say if just purely [15:36] looking at these, Wes missed the the [15:38] text color. He generally missed the [15:41] general layout of it. The the lines are [15:44] wonky as hell and the colors aren't even [15:47] close. Even the colors of the sun aren't [15:48] even close. I will say he locked in the [15:51] clouds of the icon before I shared the [15:54] the uh [15:56] >> he locked them in incorrectly. [15:59] >> Yeah, I guess but he still had cloud. He [16:01] he guessed that I guess it's called the [16:03] the class name is clouds, but he did [16:05] guess the general shape of the [16:06] >> No, I looked at it. I looked at the CSS [16:09] and I rendered it in my head because I [16:11] know CSS. [16:12] >> All right. Well, you let us know at home [16:14] who do you think did a better job and [16:15] also let us know uh if you did this. [16:18] Maybe share your images on uh on X or [16:20] Blue Sky. [16:21] >> Your borders are not even selected. [16:23] Anyways, yeah, we got to end the video, [16:25] but I'm going to continue to fight this [16:26] after. [16:28] Thanks for tuning in, folks. [16:30] >> Bye.  📄 **Full text:** ![[Full Document Contents/Articles/Can You Draw a UI With Only the Code.md|Can You Draw a UI With Only the Code? by YouTube]] ## Highlights - 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 ([View Highlight](https://read.readwise.io/read/01krnxsa26fd2hww5kr7eb2zv0)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krnxsa2r2zryhc8nephagygg)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krnxsa3kc1n49e81w4w2h0fg)) - Tags: 👻 ai highlighted