I Rebuilt 𝕏 From Memory  🔗 **Source:** [I Rebuilt 𝕏 From Memory](https://www.youtube.com/watch?v=Mytj4HHgv-g) > [!note]+ Document Notes > --- > tags: [css-layout, frontend-challenge, css-grid, flexbox, developer-content, ui-recreation] > author: [MISSING] > source: YouTube > reference: https://www.youtube.com/watch?v=Mytj4HHgv-g > date created: 2026-09-05 > --- > > [!info] Generated analysis — not the author's words. Sections below are machine-written > > from the captured source. Only text inside `> [!quote]` blocks is verbatim from the author. > > Do not quote or attribute any other line to the named author. > # Title: I rebuilt 𝕏 from memory > ## Summary > - A developer-content YouTube video (channel/creator not identified by name in the transcript; two named participants, "CJ" and "Wes," appear) sets up a timed challenge: Wes, described as a heavy daily X/Twitter user, must recreate the X (Twitter) profile-page layout from memory in 20 minutes using a provided starter HTML/CSS file, with no AI assistance — a rule Wes immediately bends by using editor autocomplete. > - CJ, who prepared the challenge, deliberately shuffled the order of the sidebar navigation icons so Wes has to recall the correct order separately from recalling the layout, and used deliberately messy starter markup (nested divs, a stray `<footer>` element, `<br>` tags) that Wes has to fight before styling anything. > - Wes works through the build in a fairly disciplined order: overall grid layout (left sidebar, main column, dropping the right sidebar for the given screen size) first, then the individual post/tweet card (avatar + name/handle/timestamp row, then the stats row of icons using a `::before` pseudo-element trick to swap icon backgrounds per `<span>` without repeating markup), then profile bio/avatar polish, then sidebar icon spacing, running out of time before reordering the sidebar icons or coloring links blue. > - CJ scores the result live: 4/5 on overall layout, 2/5 (with redemption points) on sidebar icon order (Wes recovers to 4/10 correct icon positions after a hint), and gives a final 3.5/5 stars overall, noting the honest gap between "looks like X in 20 minutes" and "production-quality, accessible, polished UI," which the video states takes closer to "3 more days." > - One recurring meta-joke: CJ bans AI code generation but Wes's editor autocomplete still suggests (and briefly inserts) incorrect markup, which CJ calls out as "AI is very wrong here" — used as an explicit contrast between autocomplete-as-assistance versus autocomplete-as-generation. > - Risk/tradeoff of using this as a teaching artifact: it's an entertainment-format speed challenge, not a tutorial; several technique choices are explicitly rushed ("I'm just pixel pushing here... normally I would make this stuff the most flexible thing in the world") and are called out by the participants themselves as compromises made for time, not best practice. > - Bottom line: the video is a live demonstration of how much of a familiar UI a working developer can reconstruct from memory alone — strong on macro-layout (grid/flexbox structure), weaker on exact visual details (icon order, exact spacing, color of links) that are easy to overlook without a reference open. > ## Main Content > The challenge format: CJ (who set up the exercise, off-camera commentary implies technical familiarity with the build) gives Wes a starter `style.css` (colors and base variables predefined) and `index.html` (deliberately poor markup, an icon sprite/reference section, and out-of-order sidebar icons) and 20 minutes to recreate the X/Twitter profile page layout entirely from memory, no AI. Wes immediately jokes that editor autocomplete is "old school AI," previewing a running bit for the rest of the video. > **Layout-first strategy.** Wes starts by identifying the macro-structure: a wrapper using CSS Grid with a left sidebar, a main column, and (initially) a right sidebar, which Wes quickly discards, reasoning correctly that at the given viewport/screen size the real X UI collapses that column anyway — a decision CJ validates on commentary as "valid" given the screen size, though it also means Wes skips a structural element CJ built into the challenge. Wes narrows the sidebar to a fixed width near 50px and moves the provided icon markup into it. > **Fighting the provided markup.** CJ deliberately shipped bad HTML — nested divs, `<br>` tags for spacing, and a stray `<footer>` element — forcing Wes to spend time restructuring rather than just styling. Wes at one point makes the markup worse by accident while trying to fix it ("now they're nested forever inside of each other"), prompting CJ's on-air suggestion that flexbox alone (no extra wrapper element) would solve the same problem more simply — a real, generalizable CSS lesson embedded in the commentary: don't reach for a semantic wrapper element (`<footer>`) purely to get a layout behavior (side-by-side placement) that a flex or grid property already provides on the existing element. > **The tweet/post card.** Wes builds the individual post card as a two-column grid (a fixed ~50px avatar column, and a second column for everything else), then places the name/handle/timestamp row using flexbox for the "info" line. For the stats row (reply/retweet/like/view icons), Wes's key technique: apply the same icon-via-background-image approach to a `::before` pseudo-element on each `<span>`, driven by `background-image` and `content` values per span, so each stat icon renders without needing extra markup per icon — CJ narrates this positively as a good move that avoids repeating HTML for every icon instance. Wes debugs a background-image sizing issue by temporarily setting a red background color to make the element's box visible, a standard and correct CSS debugging technique (isolate the box model visually before troubleshooting the content inside it). > **Time management and self-assessed tradeoffs.** With time running out, Wes explicitly narrates the shift from "build it right" to "build it fast": "I'm just pixel pushing here... normally I would make this stuff the most flexible thing in the world," directly acknowledging (not hiding) the difference between a considered, maintainable implementation and a timed approximation using hardcoded pixel values and `!important` overrides. Wes also uses a negative `margin-top` to pull the profile avatar up over the banner image — a common real-world technique for exactly this kind of overlapping-avatar UI pattern, applied correctly even under time pressure. > **What Wes deprioritized and why it cost points.** Wes never returns to reorder the sidebar icons (CJ shuffled them specifically to test icon-position recall, separate from layout recall) and never colors links blue, both flagged afterward as visible gaps. CJ's live scoring: 4/5 for overall layout (accurate structural recall, correctly dropping the right sidebar for the given screen size); on sidebar icon order, Wes initially forgets one icon ("the more icon") but recovers with a hint, ultimately getting roughly 4 of 10 icon positions right, worth 2/5 with a stated path to partial "redemption" points; final score 3.5/5 overall. CJ frames the gap explicitly as time, not correctness: "the real design is in the like 20 minutes to get there and like 3 more days to get it... very usable and beautiful and has really good UX" — i.e., the 20-minute build correctly captured the macro-shape of a familiar interface, and what's missing is the second-order detail work (exact spacing, icon order, link color, accessibility) that a real production build requires and that memory alone reliably loses first. > ### Notes > - **Autocomplete-vs-AI-generation distinction is made explicitly on air** and used as the video's recurring joke: Wes calls autocomplete "old school AI," and CJ later calls out a specific autocomplete suggestion as wrong ("AI is very wrong here... I don't know what model he's using"), which is itself a small, accurate point about editor autocomplete/AI suggestions needing verification rather than blind acceptance. > - **Grid for macro-layout, flexbox for micro-layout** is the pattern Wes follows throughout without stating it as a rule: the outer wrapper (sidebar/main split) and the two-column post-card (avatar/content) use CSS Grid; the info row, stats row, and Today I have a challenge for Wes and he has no idea what it is. [laughter] Wes is chronically online. He uses Twitter every day. He still calls it Twitter. You know Twitter like the back of your hand, [music] but can you rebuild it from memory? I have prepared an HTML file that has images, icons, super basic CSS, all the colors you'll need, but you have to recreate the entire Twitter layout from memory. No AI from memory. Oh boy. And uh we're going to score each of those sections one out of five stars. Five stars is perfect. And you'll have 20 minutes to do this. Are you ready? >> Oh my gosh. [music] Seems like not a lot, but yes, let's do it. All right, let's go. All right, 3 2 1 go. Okay, so we got style CSS. He's given me some basics here. We got black, white, gray, bg, index, html. Okay, body, uh icons. The hell is this, CJ? Are you joking? Who uses break tags? >> Can I just say I'm happy I don't have to do this. It's fun getting to just watch >> main. So Twitter, you got sidebar and you got your page, right? So like why are the ic the icons immediately I'm just going to move those inside of the left sidebar. Okay. And then I'm going to put a wrapper around all of this down here. Okay. So, I think what we want to do first is let's get like the layout in place. So, we'll go to our wrapper and we'll display grid on that. Um, CJ said I can't use AI, but I'm I'm using autocomplete. That's like old school AI, right? >> It is funny. AI autocomplete is considered quaint and old school. [laughter] >> All right, so we got wrapper, left sidebar, main right sidebar. You know what? I'm getting rid of the right sidebar cuz I don't think I don't think that even exists. Okay. So, go to our wrapper. Um, like that. No, it's like closer to 50px. Okay. Right away, what I'm going to do is just take my image. >> He's going for the collapsed sidebar, which I didn't expect, which is, I think, valid on this screen size. A collapsed sidebar would be valid. Also, the icons are not in the the right order. I purposefully mixed them around. So, he'll have to remember what order the sidebar is in. >> What? No. >> You [laughter] know, I'm happy I'm happy with that sidebar for now. >> I'm going to go ahead and put money on that. He's not going to change that because >> Okay. Yeah. >> There's too many other things, right? >> Yeah. And that's why there's an icon section cuz it not only has the sidebar icons, it has all the icons you need for the UI like the about section and buttons and everything else. >> Border dash inline one solid gray. That gray is too light. Do I even care about gray? BG. Yes, that's it. Okay. A banner. We got the avatar bio and then feed. So immediately CJ's awful markup here. Absolute garbage markup. CJ, >> I'm sorry. Well, Wes is Wes has got a point. >> No apologies at all. That's part of the challenge is make it make it good. >> And that is going to wrap the bio and then also the avatar. Um, so let's call it the avatar wrap is also going to be grid. Uh, we do need a gap. Um, and the template columns is going to be let's do auto 1fr. And then we'll take the avatar and grab the image and give that a width of 50px. Border radius 50%. Moving on. I'm just I'm just getting stuff in place here. Okay. So, let's go work on the posts. I think that's going to be the biggest win because there's so many of these posts here, right? So, these are in the feed. There is a tweet. Okay. So, >> by the way, when I uh did my interview at Google, they had me do this on a whiteboard. I was so confident in my HTML and they'd be like, "So, why did you choose to use the heading here?" And I was just like, "Does it semantically make sense?" I like I like made me question every choice I made. And I was very like, >> yeah, it was very nerve-wracking, honestly. >> What a silly interview though, like writing HTML on a whiteboard. >> So, the avatar, what does Twitter look like? Can I look? How much? What are we at? 14 minutes. I can't look. >> Of course not. No, you can't. [laughter] That's the whole point. >> It's just the avatar here and then everything else goes beside it. I'm going to take the tweet and I'm going to make it into a grid with two columns in it, which is one is let's just call it 50px and the rest is there. And then I'm going to take everything and say grid column 2. So it starts over. Oh, I got a display grid here. >> Okay. So I have the actual layout up on my screen. And you can see what he's trying to create recreate here. So he's doing it. He's putting it all on the same line. It's got the name, the handle, and then the time. What does Twitter even look like? All right, let's focus on this little bit right here. What do we got here? We got the info. Let's do the info. Okay, the info will be flex. >> So we got this. Why you putting dots in here, CJ? Do you care about accessibility at all? >> I copied that from Twitter. >> Um, >> yeah. And he has to remember what each of those numbers mean, which I think he can deduce like views versus replies versus retweets. >> I see what you're saying. Yeah. >> I'm not going to grid out the whole tweet just to place those there. Really, what should happen is >> this. Yeah, this is a tough one. >> We're going to put a footer there. >> And that is going to So, let's let's do this. Watch. We'll grab all of our infos. >> Here we go. >> And then we'll put a footer around all of our infos to all of our opening tweets and close the footer there. Now I effed [laughter] up my markup. Now they're nested forever inside of each other. >> This was a weird move by Wes to try and modify the HTML. He could just he could just set set it to have a flexbox. He doesn't need like a footer element. >> We are so past like nesting like fixing markup. Uh we have the tools, right? If there's any use for AI, I don't care how anti AI AI you are. There we go. Two unclosed media divs. Is that it? No, that's not right. >> No, AI is very wrong here. I don't know what model he's using. >> I'm bringing it back. >> Just command Z. Just command Z. Yeah, command Z it. Make it a flexbox. >> Oh, we're at 10 minutes. All right. Uh, Scott had to drop, so it's just me now. But how you how you feeling, Wes, so far? >> Pretty good. I I'm frustrated that the markup is not what I would expect. Um, and I'm having to spend just time like throwing rappers in there. >> I mean, I kind of want to give you some kind of hint. Like, I don't think you need a footer element. Like, I think that stats element could just be a flexbox, right? Like, is there anything stopping you from doing that? What I'm thinking is that the info and the stats need to go side by side. Is that not what are those on their own lines? >> I actually use the styles for the individual post page, but on the profile page that line doesn't even show. But on on the individual post page, technically they are two separate lines. [music] I would say that. All right. Okay. So, I don't need that a wrap. Okay. >> And then also those icons will need to be used in the UI like on the feed if that makes sense. >> Oh, I got to move them in there. You're making >> Yeah, exactly. Okay. >> Yeah. Okay. >> Yeah. >> Okay. I think my best bang for my buck right now is to focus on getting the tweets dialed [music] in, then fuss with the bio, and then get the sidebar dialed in, and then I think it will start. It'll feel pretty good. >> Cool. >> Back to it. >> All right. Okay. So, where did I put that footer element? Let's get rid of that. Rid of that. Okay. Um, you know what? I think the tweet itself has a different color. White. Oh, there we go. The white is an off white. So, I'm going to just go to the body. Oh, the color is white. I think the font is a little bit smaller. [music] Yes, just changing the font makes that feel so much better. Okay. Uh down to our info here. The info itself is gray. Okay, that's feeling a lot better already. So, the stats is display flex. It's too much [music] gap. Maybe like a 2px in there. Okay. And then we're going to grab each span put a before element content is going to be we got views like likes views likes retweets views and oh no replies is the first one. Okay. So what's reply? It's the chat bubble. Bookmark. No. Oh, bookmarks is another one. You know what? Screw it. I'm just going to put any any logo in there right now. We can figure out what the actual logo is. background URL play block content that width needs a [music] semicolon post CSS. Oh, [laughter] semicolon. Not a big deal. This is a great move though. So, I thought he was going to have to put the HTML on every single one. But if he can get this going with CSS, then he he's got the icons set for every single one. >> The before element. Okay. So the span itself needs to be flexed. Let's do background red just so I can see it. Why is the this element not showing up? Background size contain. There we go. >> There we go. Nailed it. Nailed it. Nailed it. >> Yeah. So now all he has to do is select each span child and then select the right icon for each one. It's looking good. >> Oh, baby, baby, baby, baby. Okay. stats itself needs a little bit of margin. >> I don't know if he's going to get this right, but the icons are technically spread across the bottom. So, it should be like justify space between. >> You know what I need to do is put an aspect ratio and then don't put a width or height on it. Baby, baby 5. >> Yeah, if he would just flex justify between, he wouldn't have to deal with the over. >> What's the width and height of these before elements? Oh, the gap. He's only got four and a half minutes left. I want to see him maybe try and go and work on the about area. I'm so good at flexbox and grid. I'm going to leave it like that. Uh let's bring it down a little bit. We have 4 minutes [music] left. Let's go back to the bio. Avatar wrap. Okay. Uh we want a border bottom padding 28. You know what? We want padding all around. Okay. Um um the image itself, the image margin top -50px. What? Oh, negative. Okay, >> there we go. >> I know I'm just pixel pushing here, but I'm I'm I'm hard on time. Normally, I would make this stuff the most flexible thing in the world. The image itself [music] also needs to be like much bigger. Why isn't it applying? I'm throwing an important on there. I don't care. You know what? I got 3 minutes left. I'm trying to get this thing >> now. He's only got 3 minutes left. I want to see if he finds the time to add the verified badge. I want to see if he's actually proud of that verified badge. If he can if he can get it into the HTML. Let's go back in the 2 minutes. Let's look on the sidebar here. Our whole layout here, which is I centered this. I should have centered that. Yes. Okay. >> Mhm. >> Um left sidebar. We're going to center everything. We are going to display flex flex direction column. Okay. Gap. Good. Oh, it's looking good. Looking so good. >> Not bad. It's not bad. They're not in the right order, but it's not bad. >> Icons are centered. Let's get rid of all of these icons that he gave me. >> Yeah, I guess 20 minutes was really wasn't enough time to figure out where all that stuff goes. >> This is looking good. I'm so good at this. I might be the best. 1 minute left. Let's just make the name like a little bit weight 6500. Make it a bit bigger. Okay. The handle is a little bit gray. Okay. That's what I like to see. This right now all of the text is white. So, if he can dial in like the boldness or the color like he did with the handle, that'll make it look a lot better. Also, links should be blue. See if he can figure this out in the last. >> What other colors do we have here? Blue. Gray. Gray. BG. No, it's a gray. Okay, let's do margin top 10. I feel like the description font size is going to be a little bit bigger or smaller. And then the details. Oh, 10 seconds left. Um, do we want to flex that as well? This is pretty much just putting flexbox on everything. Flex it. No. Uh, I'm out of time. I'm I'm rolling that back. Boom. All right. >> Okay. >> Holy. I am so I'm the probably best coder in the world. [laughter] >> Don't peek yet. I will go ahead and rate you. >> Okay. >> Uh first of all, I thought you would do the left sidebar, middle, and then right sidebar, but because you're on a smaller screen size, I'm going to throw out even the right sidebar cuz on a small screen size, it it hides that sidebar anyways. >> Yeah. >> Also, on a small screen size, it collapses the icons. My thought was you're going to put the text next to them and you'd have to remember what the text would be. Oh, you think I got time for that? No way. I put text. >> It's It's very close. Obviously, like you didn't set the icons probably. Yeah, some things need to be on the next line. >> Icons are not Yeah, spacing is a bit off, but layout. >> Layout is good. I'm going to give you a four out of five on overall layout. >> Okay. >> On the sidebar, I'm only going to give you a two out of five because you didn't reorder the icon. You didn't reorder the icons. >> Come on. >> Um, I'm going to give you icons. I'm going to give you a chance for redemption. So, >> okay, >> there are 10 icons. You get one one extra point for every icon that you can put in the right spot. >> Okay. So, the first one is Okay, we got home. Search is near the top. >> A few moments later. >> All right, I'm calling that. That's That's it. >> Are you sure? What about that more icon? You think that's in the middle of everything? >> Oh, sh I forgot about the more icon. Of course, the more is at the end. >> Nice. You actually were really close before you switch switched the chat around. So >> home is at the top. That's one point. Next is search. So search actually comes before notifications. >> Then search. Okay. >> Yeah. Then notifications, then chat, then Grock. I'll give you a point for Grock because it's roughly in where it should be. So that's two points. >> And then bookmarks, creator studio, then verified, then profile, and more. So you get you get you get four out of 10. >> Okay. You know, I don't even use the desktop. I use Well, I use Tweet Deck. >> Yeah, we we thought about that. So, it kind of makes sense that you don't know the UI perfectly cuz you're using Tweet Deck instead of X. Go to your profile page. That's what you're recreating. >> Yeah. So, >> oh [music] an you had an icon in the bottom. You're supposed to have an avatar icon in the bottom left. So yeah, comparing the two, >> I mean, general layout is there, but there's a lot more work to actually get it to looking perfect. I would have liked to have seen like coloring links as blue. I think that would have looked good. It would start. This is how AI works is like >> it looks like Twitter. It looks like Twitter. Yeah, >> technically there. And like the real design is in the like 20 minutes to get there and like three more days to like get it like where it's very usable and beautiful and and has really good UX. >> Yeah. So overall on this challenge I give you a three out of five stars. >> Uh plus one bonus star >> or half half a star for the sidebar. So 3.5 stars. All right. If you enjoyed this, if you think you could have done better, let us know down in the comments. Uh also there'll be a link to this repo if you want to give it a go. Obviously, you've you've been spoiled a little bit cuz you've seen the layout, but if you want to give this a try, see how hard it is, click the link in the description., I Rebuilt 𝕏 From Memory, YouTube, 01m1pq5fq2v7r3x0bgdttkn9bv.