2026 Frontend Development Crash Course - Cursor

What's up, everybody? Gary here. Got out the stage lights. Kind of excited now. Check this out. This is from last week's UI/UX design crash course that we designed in Figma. So, if you want to follow along with it, that portion, then definitely check out the description. There'll be a link to the Figma document.

So, anyhow, we're going to take that and we're going to make it this. We're going to make it this awesome thing where it works in the browser and we are using no hand-coding HTML, CSS, JavaScript, none of that. We're using the modern approach, the 2026 approach to make this thing work in the browser on your smartphones, your tablets, and do it in such a way we're not touching code. We're doing it with cursor. All right. So, you're going to learn how to take this design that we created in Figma and without touching code, learn how multiple ways. I'm going to show you through MCP servers and also just a custom way and how to get this thing translated to the browser and working almost like pixel-perfect. All right, so definitely by the end of this, because this is a crash course, you're going to be like completely dizzy with a lot of ton of information. So that's perfectly natural. If that's the case, definitely check out here's the shameless plug: designcourse.com because that is where I have full projects and sprint training coming up where you get to work with me one-on-one. All right, I'll stop the spam. Let's get started.

>> Okay. So, once you have this Figma document open from the previous video where we designed this, what I want to do is take this and duplicate it. Control D. And the reason I'm duplicating it is just so I have the original here. Because we're going to make some changes to this as we work on the front-end development portion. So, okay. The way this works is, you know, the very first thing that I try to consider myself or concern myself with is the background. Like that's the starting point for me. And then from the background, we move to the navbar up here, this header portion. And then we'll tackle things as we go from top, bottom, left, right.

So the background, you have to ask yourself, is it a solid color? Um, is it like a pattern background? Is there a photograph in the background? Is there a watermark? Is there like a a WebGL unicorn studio underlay? If you don't know what that is, you'll find out here in a bit. But that's the one question that you have to ask yourself. And you can get the answer in a couple of ways. Um, visually obviously, yeah, there's a gradient here in the background. I'm not sure if you could tell, but it goes from dark to this lighter version to dark again. Down here, this is all one solid color. But up here, pretty much in this selection, is a gradient because we're going from one color to another to another. And so if we click on rectangle 20, which I guess we can call backdrop, we'll see if we click on fill right over here, we have all the information for our gradient. Now, you could communicate this specifically to uh like cursor, which is what we're going to be using. Um, but what you could do also is just screenshot the damn thing. So, print screen. I have my print screen tool. I'm going to grab that. There we go.

And now we're going to switch emphasis real quick or focus to cursor. Now cursor is going to be the tool that I use. Now the first thing I'll do is we're going to start with a brand new project. So I'm going to click on open folder and then in my code folder I'm going to create a new folder. So control shift N here. I'm just going to call this um form fit. There we go. Select folder. And now we have a new instance of cursor opened up with this folder. Now if you don't see this sidebar, by the way, control L is what toggles that on and off.

So one of the first questions you also have to ask yourself, you know, before you get into the code portion is, do you want to use a specific framework? Um, do you want to just have regular straight-up HTML and CSS, which is the barebones way of getting a page up? Well, to answer that question, you have to ask yourself, what is the purpose of the project? Well, in this case, this is a marketing landing page. And ultimately, whether or not you need a framework like React or Vue or Angular, there's a bunch of them out there. It depends on the functionality that's going to be required for your project. For us, we could get away with this demo completely just by using vanilla regular straight-up HTML, CSS, and some JavaScript. That would work just fine because this is an informational page. Now, if you are entertaining the idea of having logins um, you know, and and user user registrations and stuff like that, then it would benefit you to use something like React. So it really just depends on what your use case and even in that case, if you do have a SaaS like software as a service you're building like some type of thing that has I you know users and and ordering and all that stuff, you can still have your front end be separated and just have HTML CSS and then you create like a subfolder in your project that is based on React. So there's a lot of different ways that you can approach it, but for this simple project, we're just going to simply use straight-up HTML CSS. We're not going to use React. We don't need it for this demo. It would be overkill. So that's the first thing. Plan of attack. Understand what technology, what stack you're using. A stack consists of, you know, React would be one part of the stack. I you might have MongoDB being your your database or you could use something else. A lot of these tools that go together, that's called your stack.

So for us, we're going to start off by directing it to create an index.html. Or guess what? We could do it ourselves right over here in the sidebar. We just click right there and then just type in index.html and then, you know, you can hit exclamation point enter. We can get some boilerplate HTML. Now again, this is this crash course is all about, you know, kind of front-end development but doing it in the AI way but understanding what this stuff is, kind of how it works from a high level like, you know, what what are tags, what are attributes? So the tag is like right here, the the red text. Um, attributes are the orange text. The values are the green text. You know, what is the purpose of the head? Why does it it? It's it's not self-closing. It closes over here. And then we have these other HTML elements inside of it. Um, then what's the body? The body is where all your HTML ends up going for your markup, for your structure. Understanding how HTML works is going to make you a more proficient vibe coder or AI-assisted developer. So I'm not going to get into the nuts and bolts of that right here, but you should definitely understand the basics from a high-level perspective at least.

Okay. So, what I'm going to do now, let's get rid of that. Um, is just save that. And over here, we're going to go back and remember I copied that gradient, right? Control + V. That pastes it right up here into the chat context, the chat window. And notice I'm also using Opus 4.5, which at the time of recording this, in my opinion, is just flat-out the best model. It's a little bit more uh expensive compared to some of the other ones, but you will get the best output for it. If you really want to work fast, Grocode is a lot faster.

Okay, so what I'm going to say is I'm just going to riff off the top of my head. I'll pause it and then we'll we'll go ahead and read the actual prompt, the very first prompt of our project. Okay, so I typed it up. Here is what I specified. It's not very lengthy at all. We're going to create a landing page using regular HTML, CSS, and JavaScript. The first step of this process involves specifying a background color and a hero section div element that will contain the navbar in the hero section. Here's what I'm talking about there. I'm going to pause right there. If we go back to Figma, what I'm talking about essentially is a div element. And now div is a HTML element like a tag. And it's just a generic layout container essentially. And you can visualize it. Uh, if I hit the frame tool or even just a rectangle tool, it doesn't matter. You don't have to do this. Uh, it's an invisible element that wraps around your content. And so I'm going to call this the hero section right here. This stuff. Now, let me just hide the fill and give it a stroke so we can kind of visualize what this looks like. So this is a div element. This is what we're instructing it to do, which will contain the uh actual navbar. And then also this stuff, this column here, and then this column here. And I'm going to instruct it, by the way, that we want a max width of about 1,600 pixels. You can actually see it's about 1,646 pixels right there already. And what that means is when you're dealing with responsive design, meaning like if you're on a desktop computer with a browser and it's stretching, you know, like real far, maybe the person maximized it, maybe it's it's not maximized. Well, then you want everything inside to be able to fluidly expand, but we're going to have a maximum width from which it stops expanding at 1,600 pixels. And you'll see how I communicated that in a second. Um, so let me go ahead and just delete that.

Going back out right here. The div element needs to have a gradient. All right. So the gradient information has been pasted from Figma and the background of the color of the website itself, the body element should be a flat background color. Now I left this empty where it says this hash sign. So what that means is here's how this works. So if I take this backdrop, we can see at the very bottom we have this color stop right there. That is this one right here. At this point, it is a flat background color. And that background color happens to be 191 A20. That's called a hex color code. And that is where I'm going to paste right here.

All right. So, also the div element that contains the navbar in hero section should be fluid up until a max width of around 1,600 pixels. And I also just realized I needed to add one more paragraph here. There should actually be two div elements. One that contains the background gradient, which is 100% width no matter what. So that background gradient will always go to the very left and right side of the browser or your device that you're viewing it in. And then there's going to be an inner content container that has no background. So, it's transparent, but it has that max width of 1,600 pixels applied to it. So, let's go ahead and see what it does. I will instruct it real quickly just to say, you know, use use the existing index.html in this project. All right, so let's hit send and see what it does.

Okay, it's done. Let's right-click. I'm going to choose open with live server. And honestly, it's been a long time since I've actually set live server up as an extension. Um, so do your research on there to see if that exists, if that's a menu option inherently in cursor or not. Okay, so here is the results. I don't see a gradient. So what happens when it comes to, you know, this whole AI-assisted development, I don't really want to call this vibe coding. Um, is sometimes there would be unexpected consequences and outcomes and maybe if you followed along exactly, you have something that might be different from mine because of the non-deterministic nature of LLMs. What that means is sometimes you can enter the same exact all the same exact input as I did and you'll get something different. So that's why understanding how to fix these problems and diagnose them is very important.

So, if I hit control shift I here in Chrome, this is going to give us access to the Chrome DevTools, which is what this bar is. Your bar may have shown up on the side here. You can dock it to the right or bottom, whatever. Now, what's important is we want to specifically click on this little element right there. And then if I click on this, it just allows me to view the HTML structure as long as I pull this down. Now, you're going to see right here we have our div class hero gradient. The reason we don't see the gradient, and I knew this was what the case was, is because I failed to specify. Let's give this a height so that we can actually see the gradient. The problem is if I have that selected, and we look right up here, which it just went away, unfortunately, it says there's a zero height because there's nothing inside of it yet. We haven't put in the the navbar. We haven't put in the hero section HTML. So it's it's resulting to zero for the height. Thus, we don't see the gradient. So what we can do temporarily just so we can see if it's working is right down here. Let's close that. I'll lift this up. Right with with hero gradient specified or whatever it decided to name it for you, we put an element.style. This is where we can specify some CSS. And so because I understand CSS, I can just quickly just type in height. And then I'll type in like 600 pixels, 600 px. Guess what? There is the background gradient. So the background gradient is based on the height of the element from which it's applied. So if I could type in a,000, you can see it makes it even larger. So the height of this gradient or this this element will dictate where that you know how big the the actual gradient itself is. Very important to understand, you know, just some basic stuff. Now if we refresh this browser, it's going to hide that change because anything any change we make in here in the browser outside of cursor because this is not a part of cursor. This is just Chrome. Uh, if you refresh it won't save your changes. This is just for quickly diagnosing things.

So okay, now now that we have that, let's go ahead and actually focus on the header portion or putting the navbar into our project. Now, before we go back to Figma for that process, I'm going to go ahead and add a folder. So, you add a folder by clicking the new folder button. And I'll just call this assets. This is where we're going to store the logo and any other SVG-based icons and stuff like that. And we can see we have the navbar right up here. We can move it around. And one of the important parts about this process is we want to make sure we left-click and drag this in and make sure that the navbar is, you know, right-aligned and it's it's flexible. It's it's fluid, right? So that's how we want it to behave in the browser. So you can kind of imagine you're you're mimicking what a brow a person with a browser might be doing. Uh, because the browser size might be here, it might be here. If it gets smaller than this, like a a phone, we're going to have to collapse that into a hamburger icon. And I'll show you that process as well to make it mobile. Um, but we just we want to make sure that this is set up correctly for this part.

Okay. But before we get to that, we want to take anything that's based on an an image-based asset. That could be a photograph like a JPEG or a PNG. It could it could be an icon which could be in the form of PNG or SVG ideally. SVG is scalable vector graphics and that essentially is uh not rastered, meaning it's never going to look blurry. You can make this thing as large as you want and it will never get blurry. That is the case of our logo because that's what we designed in the previous video. So if I double-click into here, notice it's called logo. Okay. Well, we want to name our layers when we export them because it makes um that that's the automatic uh name. It will name that file if that makes sense. Here, here's what I mean. So, if I take both of these or there's just this one logo layer, come over here to export and then I specify SVG for the type and hit export logo. Then we are going to come and real quickly then we'll see right here we have form fit assets and notice logo.svg. So, it gets that name from the layer name over here. Personally, I want to use lowercase. So, I'm just going to put a lowercase L. Hit save. All right. So, now if you were to go back, by the way, to your cursor, you'll see in assets logo.svg. We can click on it and there it is. That is our transparent background. Okay. So, that's another thing to understand about SVGs. They have transparency worked in.

Okay. So, now that we have that, what we can do is we can right-click on this and click on copy link to selection. Now what does that do? Well, if we go back to our visual or I said Visual Studio Code, that's a code editor I used to use years ago. Anyways, cursor. If we go back to cursor and we come over here and we paste that in, you could see it's an actual link to Figma. And this is the one one way that you can use Figma MCP server, which I'll talk about in a second, in order to translate your layout from Figma to cursor to HTML and CSS essentially here in the browser. So what I this requires though is you have to set this up first. So what you do in the chat bar again control L to get this out. Right up here we click on agent settings. Then you click on tools in MCP. Now you can see this says exceeding tools total tools limit for unfortunately sometimes it doesn't remember the fact that I've toggled most of these off. It will just toggle them all because there's a certain amount of memory that these take up and if you have this many like me, you don't want that type of situation. So, I'm going to go ahead and disable Chrome DevTools. I'm going to disable Figma localhost. We're going to leave this one here and I'll I'll talk about what that is in a second because that's what you're going to need. GitHub, I don't need I all these things I don't need. Let me keep going down here. I don't need render shad CN. Uh, stripe again, just don't need a lot of these. Now you can see that that uh the little message went away about exceeding tool limit but right here is Figma and this is the Figma MCP server and it uses that link that we just pasted in order to accurately attempt to translate all that information uh into HTML and CSS. So, I there is a document at figbug.com that helps you figure out how you set this up and add it to cursor. But real quickly, if you just go over here, um, let's see here, add new MCP server at the very bottom. Actually, I I don't want to click this because it's going to reveal sensitive API keys associated with many of these services. But that's how you set it up there and just use um the Figma help document that I'm going to remember to link here in the description that shows you exactly how to add the Figma MCP server. It's free. It's just a matter of setting it once and then forgetting and and also making sure that it's not erroring out like how you saw some of them were erroring. Um, so as long as this is toggled on and it says these tools are available, you're good to go to be able to use the Figma MCP server.

Okay, before we send this and we tell it what to do though, there's one step that is absolutely crucial that will determine the chances of this working out, you know, the first shot. And so what that is is it becomes entirely unnecessary or useless rather to use a Figma MCP server if you're not utilizing AI and you're not adhering to certain fundamentals and best practices. So we're selecting this frame right here. We can just call this, let's call this navbar. And it's a good idea when you're using the Figma MCP server method that I'm about to show you to name your layers. And the reason is because that is passed along into the context window of cursor based on whichever coding model you're using. For us, we're using Claude Opus 4.5. And that's how the MCP MCP server works. It's sending a bunch of data. One of the pieces of data happens to be the layer names. And the layer names is something that gives it a clue as to what it's working with. Here's nav. And then it says frame 1, 2, 3, 4. These don't really matter so much. It's not a big deal that they're named this, but the but as long as we got the logo, the navbar, and the nav, that provides extra context. But there's also more context that gets passed along outside of just layers. We also have all this stuff over here. And one thing that's real important is that you utilize styles and variables for colors as well as spacing. Here is what I mean by that. Right now, like for instance, if we're looking at we say we have the navbar selected right here, right? And we're looking at the spacing in between these uh links right here, right? Well, notice how it says 46. Well, if we adjust this number, it's going to be closer or smaller or whatever. We're going to leave it at 46. But here's the problem. This is not going to be passed in in and of itself because we want to apply a variable to it. So if I click apply variable and then go ahead and click plus here. So we're adding this 46 to a new variable name. Or we might already have a design system variable set up that matches. For instance, you could see 48. Well, this is a variable called 1,200, and it's already set at a value of 48. Pretty close to 46. But, so you can use this one without creating a new variable, or we can just specify, you know, our own number or value for that. Me, I'm just going to go ahead and use 1,200. Now, notice now it's wrapped in like this darker background color. And so, that's to let you know that that is a variable and it gets passed along. I don't include anything that's zero. I don't make those variables like in these uh these values right here which is vertical padding and and horizontal padding. Um, but what else do we have? We have color in here, don't we? Yes. Well, the color is already baked into the SVG logo that we we created. So, we don't have to worry about that. But the color here, if I double-click and then double-click into that one more time, you'll see it says selection colors. Now, this is outlined in purple, which means remember if you followed along in the design of this, this is a component. So, really, we want to find a component instance of that, the main component right here, which is up all the way over here. And we want to double-click into this. And then we have access to the actual fill color of the type. And then this is where we want to go ahead and click this right here. And then click plus. And then it's a variable. So we're creating a variable. We'll just call this nav links. Create variable. There we go. So now that will also be passed into context with the typography. Notice where it says nav links right here. That's what we just created. Now additionally, we have other things though because typography has multiple things outside of just color. We also have we have right here where it says typography. We can apply styles which will basically store the fact that this is 18 pixels for the font size. It's bold. It has a typography or a font of manrope. All this stuff. So we click this, hit plus, and then we're going to say nav type create style. Okay. So now all that important information will get passed into the MCP server as well.

Okay. So, outside of that, what else could we possibly consider ourselves with? Well, above it, we have a certain amount of whitespace, right? So if I click on the nav, the navbar itself, right? Well, oh, we're on the wrong one. Sorry. There we go. That was the the original. So if we click on a navbar itself, you'll see and we hold alt, it'll let us know how much distance exists from the top of this. Now you can get real anal and try to pass along all that stuff as much as possible. But part of the MCP server process when we send that first uh message over with that link, a part of it rec what it does is it screenshots this entire thing. So it passes that along in the context payload as well. So it will be able to see I through computer vision um to a fair degree I you know where this header or this navbar should be placed. So then we can make fine-tune adjustments thereafter in the in cursor editor which I'll show you as well. I'm sorry I'm talking a lot but I want this to be, you know, even though it's a crash course, I want this to be, you know, something that beginners can understand.

Okay. So, now that we have all that stuff specified, we're going to right-click. Oh, and by the way, before we do that, if we click here on the navbar itself and we look at all these properties, it's a good idea to come over here and be like, okay, is there anything that needs to be converted to an actual variable or a style? And in this case, no. Um, the width is set at uh 15, you know, 1596 pixels, but really we want that to fill the container. But the problem is is right now I don't have this set up to where it's a part of a container. It's not a part of a parent container. It's not a child container. So we will direct it into the prompt itself saying that we want this to span 100% width of that that uh inner container that we created that has the max width of, you know, 1,600 pixels. Um, outside of that, that looks good. If we click on in this stuff, I Yep. We That looks good. We click here. All that's good. Yeah, I think we're ready to rock.

So, now we're going to right-click. We're going to copy the link to the copy link to selection. There we go. We're going to minimize that. Come back to cursor. And here we go. So, I'm going to first paste this in. Okay. So, here's how I said: use the Figma MCP server to integrate this navbar into our design. Be sure to place it inside of the inner container and ensure that it's fluid 100% width. There's a logo which you can find in assets logo.svg for the logo. This is important to specify because it may not look for that and a lot of times it'll make up its own logo. Um, we're also using the manrope font and again, it should know this by default. We maybe didn't have to include this, but I'm including it anyway. So be sure to include that as a font. So we're going to see what this does. By the end of this, it should have that navbar at the top similarly designed to what we have in Figma. Notice how it says navbar hero section will go here. It's calling it's using the MCP server right here. Get design context. Now let me get a screenshot. Remember I mentioned it gets a screenshot as well. And I have everything set to run everything. So, it just runs through all this stuff. Now, it's creating the CSS styling necessary to create all of this. And then the HTML. Okay, there we go. I guess we're ready to rock. Let's check it out in the browser. And there we go.

Okay, now you might be wondering, what the heck? That kind of looks cool. There's like this cool gradient behind. Remember, that's based on the height of the container, which is going to be much higher than what it currently is. So, what's cool is I sometimes it will actually add its own hover effects even though that was not in the original Figma design. And again, you can just tell it to remove hover effects if you don't want them. Now, here's a good question. Ah, see here's how that you can visualize the max width thing uh occurring. Hit control shift I and I'm going to make this a little bit larger. And then we choose this little selection icon and then we click right here. And then we can see in the HTML hierarchy here we have this hero content. Notice how it has the orange stripes on the left and right when I hover over it. That's to let you know that it is currently beyond 1600 pixels but it's keeping that inner content like right there. Because otherwise, if we don't have that max width, what would happen and you can actually do this yourself. I if we click over here and then we get rid of this property max width. We just toggle that off. Guess what? Now it's going to be a truly fluid design no matter what it is. No matter how large this is. I could make the span multiple monitors and it's always going to be from the very left and right. That can be kind of hard and jarring for people from a UX perspective to read depending on how you set it up. Some people do have their, you know, like marketing landing page landing pages set up to be like this. Me personally, I want to have a little bit of a buffer on the left and right. So, if I hit control shift I again or we just refresh, we'll see how that works. The fact that it's staying in the center. So, we have this whitespace here and over here. This did a perfect job. And that's because we properly utilized and set up our Figma document, you know, as you know, basically with all the styles and variables and all that good stuff.

Okay, what's next? Next up is going to be the hero section. The left column, which is where we have our headline, subheadline or description. We have two call to action buttons, and then we have this little trust section down here uh with these people's pictures and then these icons. Um, so the first thing we're going to do is we're going to export the assets that are needed to make this work. Now, here's the thing. Many times like if you're dealing with a project that's like a throwaway project and you don't care about the exact icons that are used, you don't have to export the icons. You can act the AI and cursor will just use an icon that's very close that it has access to um based on what it saw in the computer vision screenshot. But if you really want to have perfect control over exactly what's output, then you want to export these icons.

So, what I'll do first is if we uh gain access, we double-click into here. You can see this says download. That's the name of this layer. We'll go ahead and export that as an SVG. And under assets, notice it's just called I'm going to I'm going to put an icon download.svg. We're going to do the same thing here. This one's called video export. Once again, SVG export. And I'm going to call this one icon video.svg. Finally, we have the heart. That's called heart SVG. Export. And we're going to call this icon heart.svg. Okay, that's all great. We also have these other assets right here. And these people. We can go ahead and export those as well. I'm going to rename those real quick to person one. All right, there we go. Person one through I 2, 3, 4, 5. I'm going to click on export. And then this time we can't use SVG because these are actual raster-based images. They're photographs. So that's incompatible. So we can use PNG or JPEG if we want with that. Export five layers. And then now because we have multiple selections, we don't get to specify the actual name. It's just going to revert to the name over here since we have multiple files. So I'm going to hit save. And now if we go back to cursor in assets, we'll see person one, two, three, and so on. Now notice it actually worked in and baked in. It's kind of hard to tell the the stroke around this. This is typically not the way you would want to do it. The way you would really want to do it is because we used a plugin called Unsplash. You can click right here, view image on Unsplash if you just select one of these people. So when you click on that, it says loading Unsplash. This is actually the full image. And then I would just choose download free. Choose the small version and then use that as the asset. And then CSS will be able to crop it out into an actual uh circle, so to speak. So, that's just a real quick side note.

So, now that we have all that stuff, the next step is auto layout. All right. In order for the AI to kind of get a a an understanding and try to match up this up as closely as possible, we need to utilize auto layout. And auto layout is one of those things that just takes time and experience to use it. And this is a crash course, so you're going to walk away like, you know, it's kind of annoying, but you will get it eventually because what auto layout essentially is is it's a way for Figma to replicate the various layout systems that we have in the browser through CSS. Um, you know, like the grid is one. That's a it's a that's a way to lay things out. It's called the CSS grid. And then there's also flexbox which is another way. They each have, you know, their their their own I guess advantages and disadvantages. For the most part, flexbox is what's used for the most part. The grid will allow you to do things like set up interesting grids and stuff like that. They can be used interchangeably depending on, you know, what your use case is. But auto layout is kind of built for that purpose to mimic what's happening in the browser.

So, what we're going to do is we need to figure out an intelligent way to have auto layout. Now, if you followed the previous video, we already added auto layout onto this button, these two buttons here, because if you look over here, auto layout, you know, it's a horizontal auto layout where we have a line left and all this stuff specified. But we also have this over here as well, which is auto layout, too. But we need to put all this stuff into auto layout. So, the first thing I'll do because uh if this were centered exactly like evenly between, you know, equal whitespace from the top of this element to the bottom of this these this element right here, we could just take all three of these and put them into an auto layout by clicking this button. But I don't want that because I don't want there to be perfectly even whitespace uh between these three elements. This is a UI design type of thing, a UX thing. I I like to group things that in a way that makes sense. So we have a headline, subheadline. I want to move it up a little bit closer so that these two are semantically, I guess you could say, tied together. Headline, subheadline, and then a little bit more further down. So if I hit the rectangle, you don't have to follow along on this part. This is this is just to visualize the amount of whitespace from up here to here. Notice we have like what twice as much here. That's a UI design thing and that's it's one of those things that you just develop over time. Uh, your eye for design and it makes things look and read and flow better. So with that said, because we want to have different spacings between this element and this element versus this element and this element, we're going to group these two up into their own auto layout container as well. And what happens is that gets reflected in the HTML markup as well. So with those two selected, toggle auto layout. And it knows intelligently enough that this is vertical because these are two elements on top of each other. So now we can control the whitespace right here by dragging this up and up and down. Next up, with that still selected, we hold shift or control to select this element right here. Now we have to ask ourselves though, maybe we can take these two and put those into an auto layout as well. And then we can group these together in their own auto layout container too. So we can take these two holding shift and we want to choose auto layout. Now it doesn't really appear anything has changed except we have the access to this part. And so when you drag these things in and out, you have to ask yourself, is the layout doing what you want it to do? I for me, I don't want this to be this element to be tied to the right side. I always want there to be a concrete fixed amount of whitespace between this heart and this last avatar. So I'll double-click into that. And then what we can do over here in the settings is we don't want to fill the container. That's why it's behaving like that. Now it's going to the width of it is going to be based on the the width of the parent container. We're going to choose hug contents. There we go. So now we have this this set up in such a way that no matter what the size of this is, it's not going to be affected by it. Now if we double-click over here for this this auto layout which is a child of this layout right here, we can go ahead and choose fill container. Oops. For width rather. There we go. Now it's still not working because this is kind of just stuck over there. So in this case, we double-click into here. I'm going to select both of them and we're going to choose the width was a hard-coded width of 218 pixels. That's why it wasn't responding to that. So we're going to choose fill container. Now it fills the container based on the width of what the container is essentially. So very powerful uh stuff and it is confusing at first if you're new to it, but don't let that deter you. You you'll you'll get a hang of it eventually when you do this enough times as with anything.

Okay, finally we have this layout, that auto layout. Let's select both of them and click right there. We're going to add an auto layout between them. And now we're going to move these around. Is it making sense in terms of like, you know, how it will respond? Well, not really. Yes, the subheadline is responding, but the this up here is not. I if we go in, you know, that should be collapsing on itself and it's not. So, we double-click, double-click again, and notice it's because it has a hard-coded width value of 400 something pixels. Fill container. Now, nothing changed apparently, but that's because every won't fit right here. But if we were to take the parent container and you know do this, guess what? We set this baby up. Yeah, looking good right now. There's some other considerations that we'll we'll tackle. Like for instance, if we get too small, then we want this watch video button to kind of like fall, you know, beneath get stacked on, you know, beneath the get form fit button. But for now, this is actually pretty good. So, I'm happy with the auto layout section.

Now, what's the last thing that we need to do? Well, if we're using the Figma MCP server method, which there's multiple methods. I'm I'm I'm still harping on the MCP method. I'll show you another method here coming up when we do this part down here. I then the last step is to make sure we're utilizing variables and styles where necessary. And so we have to work our way through all this in order to get it set up correctly. So we have nail your form, you know, this is this whole column. Okay, so we're going to start there. First thing I'm noticing frame 16. No, we're going to call this left column or left call or something like that. Then inside of here we have, you know, the headline and subheadlines type. So we're going to say headline container. We'll leave I don't bother, you know, changing the name of this stuff here. Uh, down here is going to be CTA container for call to action. Inside of here, we have CTA buttons. And I'm not going to worry about this one. We could rename this like to get form fit CTA and then watch video CTA. Then finally we have trust container and then we have avatar container and then we have I'll just type I'll just put gymgoers or something like that. And that's good. So now we got, you know, that context is dealt with the name the layer names. Going back. If we select everything now, we're going to look over here. Okay. So, we see there's a value of 71 right there. Okay. So, let's go to apply variable. We're going to come down here. 64. That's fine. We'll just use that predefined variable. There's nothing else of note here. However, we do see a width that is hardcoded at 556 pixels. And that is something we don't want because in order for this to be fluid in a web page, this should probably grow or expand depending on how we're setting it up. But because I don't have a parent frame container around it, an auto layout container around it, we can't make this fill the container. Notice fill container is not a thing here. It's just hug contents. Now, you could set this up so that everything is in its own auto layout container the way you needed to, but I didn't set it up like that. So, just understand that there's a lot of different ways to approach this. Me, I'm kind of picking parts and pieces and not trying to one-shot the entire layout because trust me, that increases the degree to which you get an undesirable result.

Okay, so next up, what do we have outside of that? Okay, so we have this container that houses the headline and subheadline, the headline container. Again, we have a value of 25 here. Okay, so I'm going to go over here. We're going to choose 24. Everything else looks good in there. Okay, I we're using fill. Yes, it has a 5.56, but notice it says fill. It's currently 556 pixels. That's why that exists. That's not the same thing as fixed width 556. Okay. Uh, this is also hug for height, which I like it. The height of this container is always just going to be the height of the text inside of it. That's what that means. Next up, let's drill down into the actual headline type itself. Again, all this stuff needs to be passed in as context. So, apply styles. I'm going to go ahead and choose plus here. We'll call headline headline text. That's fine. Create style. That all gets passed in as context. And then also the the uh the color we need to pass that in too. Now it may based on computer vision understand that this is pure white, but it may guess it may make it off-white. So if you want to be specific, we're going to add over here the libraries. Where do you have one here? Nav links. Yeah. So we can make that the same color as nav links as long as we're okay with those two being tied together. So I can just click on nav links for that. Um, right here, this text, same deal. We're going to hit plus. We're going to name this sub headline text. Create it. And then also, we're going to come over here. We're going to hit plus. We're going to call this a variable. This will be sub headline. Subhead color. Create variable. There we go. So, all that stuff is dealt with. Yay. Um, what else? We have this section. We have 54 for the whitespace between them. So, I'll just use 48. That'll be fine. And then also, h let's just do a fill container on that. There we go. That's another thing that we wanted to change. We'll double-click into here. Again, there's just a nine amount of whitespace between them. So, I'll just apply a variable. We'll choose eight. Double-click into the button itself. And again, we already have the

icon that's exported, but we want to take a look at some other things. So, we have 10 up here. We could just use eight for that. And again, if you don't want to use this predefined, you want to be perfect, you create your own variables.

Um, oh, here's another one. Corner radius. This should also be added as, you know, an actual variable. So it gets passed in the color again. Come over here. We're gonna hit plus. We'll call this primary color. There we go. That works. What about the text? I know this is this is time-consuming. But if you want to get it as perfect as possible, this is this is the process. So come over here. It says white. Okay, let's add white to that one. So once you start defining your variables, this process goes quicker typically.

Um, like here's the topography. Click plus CTA button. There's that style. We got that. Yay. Um, I think everything else is good. This one over here again, we're going we're going to want to make this one use that same style, the CTA button. So, that's going to use that the same text here because it's the same over there.

Um, outside of that, we click on this that says 10. Again, we'll use the one that says eight right there. Five. Again, change that to four like the other one. And we're looking good. Finally, we have this over here. We have a 25. So, we can use 24 for that spacing. Everything else looks good. Double click into this one. This has a nine spacing, so we'll use eight. This over here. This is interesting. It has -18 and that's because these are overlapping on top of each other. So if we take that, we would definitely want to apply a variable and create one. I'll call this avatar spacing. The value is not zero. It's 8. There we go. That is now saved as a variable. Anything else to add? Nope. I think we're good.

All right. All right, we're ready to rock. So now what I'll do is just take this left column container and I will right-click, copy and paste as copy link to selection. Now we're going to go back and we're going to go back to our index here. And here's the next step. We're going to paste that in and I'm going to create a prompt. Okay, here it is. So at the top I have it pasted up here. This is the left column of the hero section. I have included assets inside of the assets folder for the relevant icons and the user avatars. That's why naming those files is important because it's going to look and choose which ones to add. Also place in a right column that is approximately 60% larger to the right of this new left column. Leave it empty as it will have a Rive graphic in the future.

What that means, let's go back. So, this woman right here with these designs and this little UI behind it, that is going to be a Rive graphic. Now, if you don't know what Rive is, I mentioned at the beginning of the video, uh, it's a way for us to create interactive graphics that are viewable in the browser and anywhere else really. Um, it opens up a lot of extra interesting possibilities. Yes, this probably could be recreated with CSS alone in HTML, but it's a lot easier doing this sort of thing that we're about to do in Rive. So, what that means in terms of an HTML and CSS perspective is that this is just going to be Don't do this. I'm just going to show you. So, we have our left column here that houses all that stuff. This is going to be a right column that houses her. So, it's kind of like a 60/40 perspective here or ratio. That's what that's why I I did I told it to just put in an empty container. We'll put in the Rive stuff once we have the Rive stuff.

Okay, going back last thing. The left column should consume about 40%, the right column 60. Also, adhere to all tokens and information from Figma. That I probably didn't have to put that. I'm just anal. Um, let's go ahead and give this a shot and see what it does. Please work.

All right, it is done. Let's check this out. Please work. I'm at localhost 5500. Okay. Yeah, look at that. It's nearly perfect. One thing that we didn't communicate to it was the amount of white space. Although that's pretty good. I probably went a little bit further here on like on a large desktop, a little bit further down. But yeah, this is 60%. Now the way we know this this is fluid this left column because remember we told it to make it 40% of the parent width. Well, remember the parent container over everything is a a max width of 1600 pixels. So right now even though this is a percentage based value it's it's going to look like it's hardcoded at a certain pixel amount because its parent container is 1600 pixels. But if we drag this in, you'll see where it says, especially like right here, this text right here, it's going to start collapsing in once we get to a browser width that is less than 1600 pixels. So watch this. See that? Now, at a certain point though, we're going to want to make this mobile responsive. Like this looks like crap. You would not want this like on a tablet because this is like a tablet size, this whole window. Uh, so we need to concern ourselves with that down the road. But for now, this is good. This is exactly what we want. Notice it did the little hover state background change. You know, that's fine. I'm not going to be anal about that. But it pretty much did a perfect job. It got the the spacing right, colors right, topography right. We are rocking.

Okay. So, the next step is going to be what if we wanted to make an adjustment to this after the fact, after it's already been built? Well, you have two different ways of doing this, and I'm going to show you both. So, the first way is if we come out over uh here. Notice where it says this option, connect to browser tab. Well, we're going to click that. And then it's going to say browser tab, off Chrome, whatever. Well, the idea here is if we click on this little icon right here, open browser and then we type in localhost 5500 at the top. Now, we have the cursor embedded browser here. Now, what's really cool about this is just similarly to how we have the Chrome DevTools when we hit control shift I to open those up and then we can use a selector. You have the same exact thing here. Right up here. You click on this little select element icon and then it'll allow you to, you know, specify, you know, which element you want to observe or change or whatever. Well, I want to increase the white space a little bit from the top of this type to the bottom of this logo. So, how would we do that? Well, we can see it looks like there's some space at the top here in section. So, if I just left-click that, it's going to bring this up. Again, very similar to kind of similar to what the Chrome DevTools offer you because up here we have the HTML hierarchy or the document object model, the DOM as it's called sometimes. Um, and then down here we have all the properties. Well, what's really cool about this though, unlike the Chrome DevTools, we have the ability, it kind of looks like Figma, like you know, with the this part over here. It's that's why I said Figma has kind of like tried to recreate what they've done in the browser, right, with their CSS. This is the kind of the same concept, but there's a caveat here. If you try to make a change to any of this stuff, well, what happens is right down here, notice how it says section. Whenever you click on one of those elements, it adds this as context. So, it passes in like the name of the div element that you want, like where it can find it. Um, along with any properties that are associated like through CSS. So if you hover over it, it shows you all the stuff that gets passed in as context through here. Okay.

So what happens though, is if you want to commit those changes, then you have to actually send it a prompt. So it actually costs money. I But that's just to let you know. I I use this sometimes, but not every time. So again, going back to the task at hand, how do we increase the white space between these two elements? Well, there's usually multiple ways to skin a cat. So I if we click on like navbar for instance, now one thing that's annoying is that it starts adding all those. Like I can get rid of that one now. Uh, if we click navbar, well, we can probably add some margin bottom. That would be a way to increase the white space underneath it. So margin is down here. So notice we have margin top and bottom. See margin top and then bottom zero and then left and right right here. What this does is add white space on the outside of an element. Either top, bottom, left or right. If you want specific access to all sides, you click that icon and then right here is margin bottom. So if I zoom out and left-click and drag, look at this. It's affecting that white space. So that's one way that you can achieve a change. Now you click right here, apply. What that does is it just sends that information like as if you typed it down here in the prompt yourself. and it's going to have AI actually find where it needs to make that change because otherwise if you don't do that then it's just like the browser like you refresh it loses you know it doesn't make the change permanent.

Okay. All right, hopefully I'm being thorough enough. Let me know in the comments if you're enjoying this so far. This this type of flow or whatever. And definitely check out designcourse.com for way more content and educational stuff. Okay, shameless plug ended. Now, now that we have that and everything's looking pretty good, we're now going to shift gears into Rive land. All right, so we're going to change this up. We still have to come back to cursor to do a bunch more work on the remaining bits of, you know, the the layout, but this is going to be a nice welcome change, a change of tune because now we're getting into something entirely different, which is Rive. So, let's do that.

All right. Unfortunately, my camera just died even though I have it plugged in. I'll have to look at that. So, you don't get to see my mug at this point in time. But anyways, let's let's talk about Rive real quickly. If you go to.app, this is where you can create a free account and you can use Rive in the browser because they have an in-browser editor or you can download a desktop app which is what I use. So, um, what's cool about Rive is essentially what it is is it can be used for websites. It can be used for, um, actual games like built in Unity. It can be used pretty much almost anywhere in car dashboards. And it's a way to create really cool animated and interactive user interfaces. And it's a tool that I've covered a lot. And I use it in almost every project, especially on landing pages because you can do some real cool stuff with it that you can't really otherwise achieve um through other means or if you did try to achieve it like through HTML and CSS alone, it would be in JavaScript, it would be a massive amount of work. Um, just understand that yeah, there's a little bit of a learning curve to it, but it's really not that bad once you understand the basics, which is what we're going to cover by integrating our custom little animation.

So, I'm going to type in Rive, and this is going to open up Rive. I actually have an update that I need to install, but I'm not going to bother with that. So, I'm going to go ahead and click new file. Now, the very first thing we need to know is what is the width and height of our our image or Rive graphic? Well, to answer that question, we're going to go back to Figma. And the way we can do this, you know, there's multiple ways. What I could do is just hit rectangle, R, R key, rectangle tool, and I'm going to left-click and drag out a size that kind of just encapsulates everything. And so that is a width of 1033 x 580 roughly, 1033 x 580. So I'm going to go back 1033 and 580. Hit create artboard. There we go. So like Figma, this actually has a very kind of like a similar design to Figma, right? Like you select something, there's properties over here in the property inspector. Um, we have layers over here and assets and some tools up here. Um, what we want to do first and foremost is, you know, this has a background color by default, and we can toggle that background color off by selecting it. And then over here under fills and stroke, we can just go ahead and hit the eye icon. This means that we can have transparency behind it. And that is exactly how we're going to export this file for use on the web page. But I'm going to toggle it into view temporarily while I'm designing because I don't like to see that checker background when I'm trying to like design stuff. So that means we're going to try to get the color first from Figma. We could use the gradient and put that in. It's not that big of a deal. So, I'm just going to get the one, you know, this color back here. 191A20. And I'm going to click over here. Paste that in. There we go. So, now when we go to export this, we're just going to toggle that off. But for now, we're leaving it on like this. Now, we also have bad color contrast between, you know, the canvas here and this area. It makes it hard to see where the edge is. So if I click on design background, we can change the color. So if we just grab this and then maybe use something lighter right there, that works. So now we can clearly see where where our edges are and where we're working.

Okay. The first thing that I want to get on to, you know, here is the asset of the woman who is working out. This is really not a plank, by the way. This is more like a the the upward portion of a push-up. If this was our plank, her elbows would be down like that. But never mind that. Anyhow, what we want to first do is export her alone. And she is, if you paid attention with the first video when we designed this, she is a transparent PNG in digital form. So what we do is in order to select her, we have that group two was h is locked. So now I've unlocked it. And now I can move stuff around, but it's all part of a group. So I can right-click and just choose ungroup. Now I can grab her alone right there. Okay. So that will work. What I want to do is take her hit export. PNG is correct. Export image one. Now we don't want to put her into our website assets because she's going to exist within the Rive file itself. And the Rive file itself gets put into the assets. So, we don't put her here, but we do need to save her somewhere on our computer so that we can then import her into the Rive, you know, software. So, I'm just going to put I'm just going to go to desktop. I'm just going to put female. And then I'm going to go over to Rive. And I'm going to go ahead and get my browser up here. It's on It's on the other side of my monitor, so you can't see it, my file browser. But all I'm going to do is left-click and drag her from that file on top of here. Now here in a second you'll see it. There she is. She's a little bit too large. We want to scale this down. Holding shift and alt. And now she's part of the assets. So you can see it right here. It says female right there. Hierarchy. Go back there. Here's our layer stack. Okay.

So the size, you know, we want to match this up as closely as possible to Figma. So she doesn't go almost just about all the way. So it probably be like right around here. And another thing that we want to do is, if you recall, we did also specify some of these right here, these radial gradients to simulate the fact that, you know, she has like a shadow that's being cast and we did multiple of them. So, what we can do is we can recreate this. And we do want to recreate this instead of exporting this as like a PNG. If we recreate it with the tools within Rive, then it's going to have a much Oh, I didn't realize there's a black circle there. I'm sorry about that. This black circle that's like hovering right there. Let me get rid of that real quick. Okay, there we go. Sorry about that. So, now what we want to do is we want to take this information right there. This is going to give us the background color. Um, information for the gradient that we we recreate. So I'm copying that color code. We're going back to RIVE and we're going to create an ellipse. So over here the ellipse tool, just hit O, letter O on your keyboard. Hold shift. All right. And right over here, we can create radial. We're going to move this one to the center. We're going to paste in the value for that color stop which is there. And then we're going to paste in the same value color stop right here but make it 0% opacity. And then now I'm going to drag this down. Notice Oh, we want it to be darker by the way for that center one. So let's select this and just make it darker. All right. And now you can kind of see it's been cut off from the sides, which is okay. We'll fix that. And we want to make sure it goes underneath. So I'm going to come out here. See up here in our layers? Drag it underneath her. By the way, we can lock her, by the way, so we don't select her by accident. All right. And then if we come back here to our gradient, you'll see there's kind of no way for us to flatten the the gradient really and that's kind of frustrating. So there's a way a workaround this a workaround and that is to use feathering. So if you click add feathering, what it's going to do is it's going to blur the entire layer and you can change the blur amount, you know, based on what you need. But now it's like a softer type of color here. And then we can go back and select the second one. Make that one a little bit darker too. There we go. So now we have hit okay up there. That we're going to duplicate it and create another one. It might be even larger. Shift alt scale up. Maybe adjust the this value to make it larger like this. You can kind of see it. It's very subtle. And then maybe duplicate that one over here. But I don't want anything spilling off the edges. We don't want to have clipping occurring. So that's why I don't want that to occur. So there we go. That's perfect. We've recreated her. And again, when we select this artboard and we hide real quickly this, this is what will actually get exported. All right, good. Right there so far.

Next up is we have those little blue circles. All right. And what's what we're going to do with the blue circles is we're going to kind of create like a little component, like a separate frame, and then import that component because it's going to have its own looping animation each one of these where they pulsate. And so, because there's five of them, we only want to have to do that once. So, going back, let's go ahead and create those. Oh, by the way, let's just grab that that blue color code right here. Right there. There it is. It is 1F80FF. All right. So, hit O, letter O. Hold shift alt, create a circle roughly around that size. Now, what I'm going to do is if we take this off and we click up here, the artboard tool, think of this as like the frame tool in Figma, and we just create a size maybe like right around here. I'm going to copy this, just delete it, select it, and paste that in. Now, where is it at? We need to find it. So, if we click it, X position, we'll just type in zero. Zero. There we go. Okay. So, now we see it again. I'm going to put this in the exact center. It has nice snapping here. We're going to paste in that color code, which I completely forgot because I overwrote it. There we go. Copy this. There we go. Okay. And then also there was another one behind it that's just kind of like darker. So we can get that information too. It's probably completely black with opacity. Oh, this is actually a stroke applied to it, which is fine. Um, so black at 65%. All right. So, we can go back. I'm going to duplicate that. Control D. And I'll put this one underneath it. And then this one we'll make larger. Hold shift. And then we're going to make it black at 65%. Okay. Now, I'll probably make it start here, but for now, I'm just going to leave it like this. We're going to give this artboard itself, which we can rename, by the way, by double-clicking up here. And we're just going to call this dot or pulse or whatever you want to call it. And we're going to get rid of the background. So, we hide it. Now, one thing I should have done is created a component out of this out from start. Um, so if I click this create component, and then I'm going to take these two layers and simply just copy and paste them inside of here real quickly. Get it up around the same size and then hide that. That was my bad. I should have done that from the start. So now I'm just going to call this one dot. We're going to delete this one. There we go. So now if we take the component tool itself left or just left-click once and choose dot. There we go. So now we have this right here where we can start to copy that and put it into the various areas that made sense. So like right here, here, and then finally down here. I'm just hitting control D to get those all ready and rocking.

So, let me show you something that's really cool. Um, what we'll do is we'll select this dot artboard right here and we're going to click on right up here the animate tab. Okay, this completely changes the UI and we have this stuff down here. Now, that's the main difference. So, essentially we want to come over here. By default, you're giving a starting timeline. and we click on timeline one and this brings a keyframe-based timeline up here. And let's say for instance we want to make this a looping animation where this outer ring keeps just pulsating out and and and just like dissipating over and over. So the way we do this is I'm going to take that black one, hold shift and alt and make we're going to make it start right there. So you don't even see it. So notice it put a keyframe there automatically. And if you expand this, you click on path, you expand that, it it it changed the width and height uh to 26 and by 26. So now maybe we'll have it go all the way out to the end. And then we're going to increase it like this. All right. So now watch what happens. Oh, there it is. I don't think I had it selected. That's why that was happening. Now, if I go ahead and hit play, that's all it does because it's a oneshot type of animation. Means it only plays through the timeline once. If we hit loop, well, watch what happens now. Kind of lame, but it repeats. So, what if we wanted to make that a little bit slower? Well, we come right here. Playback speed. Let's try 0.5. Ah, that's that's a little bit better. What if we wanted to make add some easing? So, we take both, you know, all the keyframes or if we just select it like this. We'll take this this keyframe and that keyframe. We come over here under interpolation and we choose cubic. So, this will allow us to grab these points right here and move them up and down to influence the rate of playback during this entire zero frame to frame 60 or whatever it is. Uh, so let's try that. Notice how it starts off slow, then gets fast, then gets slow again. That's cool with me. How about we add opacity? So maybe right here in the middle, the opacity of this layer right here. See this little kind of diamond? We click it. That adds a keyframe right there. Opacity 100%. At the end, we'll add opacity of zero, which means it should end up hiding. Although, why is it not hiding? Uh, because perhaps we're placing this on the wrong element because I had it on the path. Let's see here. Let's try adding it on that element. So, now we selected the parent element essentially. If I add opacity there and opacity there to zero. There we go. So sometimes you may have to apply these in other areas. So look at that. Oh yeah. Now here's the magic. If I go back or I zoom out by holding control and my mouse wheel and go back to design here and then go back to animate. If I hit under the state machine. So, this state machine is kind of like the brains that allow you to tie multiple artboards together and do cool conditional stuff. If I hit play, look at all of them. See how they're all kind of just emanating from that? That's why components are so powerful because if you have multiple instances of something that does the same thing, then there you go.

Okay, so we're not done yet. What we want to do now is focus on the next part, which is going to be the lines that connect between them. So again, if we go back to Figma, you'll see these lines right here. And these lines, if I double-click into one, we'll see they're white, 37% opacity, and their thickness of two. Again, we'll just real quickly recreate those in Rive. Going back, Rive has, let's see here. Do they have a line tool? Well, they have a pen tool. Same thing. So, what I'll do is just left-click from here to here. And then I will hit escape and then I will double-click onto it so that we have it selected. And what we want to do with this uh custom shape is select the actual custom shape itself up here and then make it white. And we also have to make it thicker. So, we click over here, fills and strokes. That's because this is a fill. Sorry. We click plus and choose stroke. There we go. All right. And in here, I'm going to make this two for the thickness. And then click on this color. And then we can choose 37. Oh, wait. No, alpha is right here. There we go. 37%. There we go. So, now we also want this to go underneath all of the dots. So, I'm going to left-click and drag that underneath. There's the first line. So, I'll just call this line one. Now, we're going to go ahead and duplicate it. So, duplicate, control D. I will double-click into it and then just move that anchor point there. Ctrl D again, you know, get this around the center. Double-click into it to get this anchor point here. Double-click once again. Ctrl D. Double-click. This one goes up here. And then this one goes to the bottom. Okay. So, now we have all of those. Now, unfortunately, these didn't get put into their own line. So, we'll see how that affects um animation because what we want to do is create a different entirely different um timeline based animation where these come in first the dots and then these lines grow in to connect them. I think that would be really cool. So to do that we can come over here uh with our main artboard go to animate and then under timeline one we'll go ahead and create an animation around these. So, if I take these four or five rather, hold shift and then change the opacity right there to zero. By default, they're hidden. Same thing with all these. I may have to end up going back. I think that's what we should do. Um, let's see if I can just pull these out. I don't think I can. Okay. So, what I'll do is just delete the last two, and we'll make sure that we're replicating the right thing this time. All right. So, now I've recreated it with four lines, all having their own layers. And what we'll do is select all four of those. Once again, I will do a 0% opacity. All right. So, now everything's hidden. And I'll say let's let's do uh we'll start off like around frame five down here. And we'll have the first dot which is right there. If you just hover over and select you'll see. And we'll put in a new keyframe right here at 0%. And then shift forward maybe by about we'll go about 10 keyframes or so. And we're going to put in 100. All right. So now play it. Now we also don't want this to be looping. It's it's a one shot by default. Now what we can do is we can copy these keyframes because the keyframes are only storing the opacity value. And we can come over here to three and maybe we'll offset that by we'll start right there. So watch this. All right. So it just kind of creates this animation here. We'll do the same thing for dot three. Oops. Except move it over here. And then five. Oh, wait. No, this is the next one. There we go. So, let me see. One, two, three. Yep. This one gets moved here. And then the last one is actually five. We can just we could just move this so that it's all the way up here. Paste that in. So sequentially they should look like this. One, two, three, four, and five. Okay, cool enough. Now if we go back to state machine and hit play they will also have the animation where you know this animation that's embedded in the component is working as well. So that is yeah cool. If you wanted to you could also make them um scale each one of them would come from a a zero scale to 100% and that way it looks like they're growing. Easily do that. Um, and then finally, last thing we'll do is just kind of create an animation. Maybe we'll just fade in because I don't want this to be too long. You could make these actually grow. The lines would grow to each spot if you want. That would be extra cool. But for now, we're just going to do the opacity thing. So, opacity is zero already. We're going to put a keyframe there. And then move forward by about, you know, 10 pixels again and make this 100%. So, watch this. There we go. And then do the same thing for the rest. So I the other line two is right there. Yep. And then three. And then four finally. All right, let's check it out. Not the coolest thing you've ever seen, but it'll work for now. Um, maybe we could slow it down just a bit. So, if we wanted to to be slower again, 0.6, maybe have some easing. I'll take all the keyframes, literally all of them, right here. So, left-click. Now, it looks better though when we actually have the pulsating files here. Not files, but assets. All right. So, that's cool. Um, now the last thing that we had is this. All right, it's this little UI here. And yeah, that can be recreated as well. So if I lock this and we click on it, all it is is a matter of um a linear gradient on the inside of it with a stroke. And so we can grab all this stuff and just recreate it essentially. or to make our lives super easy if we I mean we could do a lot of cool stuff by the way. We could make this grow like in this progress bar and the numbers change and grow from zero to you know it could be really cool. But for the purposes of brevity for this uh this crash course I don't want to get too crazy. So what I'll do is just take it hit export and we're it's going to be a PNG export UI and we're going to save this as UI.png is fine. And then we're going to go back to Rive. I'm going to open up my file explorer. Find that file. There we are. And then we're going to switch to design tab here first. And we're going to throw this in here. There it is. Okay. So, I'm going to scale it down a bit and we're going to put it behind. Although, we could put it on top. That might be cool. But nah, let's just go ahead and keep it consistent. And we'll put it right there. And then with this artboard selected, we're going to go to animate. And what we could do is create another timeline. And I'll show you how this works. So that's timeline one. Create a timeline. Timeline two. You can double-click and rename these. So I'll just call this form. And maybe this one can slowly animate up and fade in. All right. So, we'll start right here. Actually, no. We'll move forward first maybe to like at the end. Put a keyframe. Notice all these are keyframe keyframable properties. So, Y could be here. That's position Y. I don't want to do a scale or a rotation or anything like that. So, this will work fine. And then I also want to put um 100% for the opacity. So we have two keyframes there. And now coming back to the very beginning, we're going to pull this down. And that changes the Y axis just a little bit. And then make it zero. Finally, we'll take both of those keyframes. And let's see, maybe it starts off fast. All right. So, now let's if we go back to state machine one now watch what happens. We hit play. We don't see that animation. That's because we have to add a new layer and then we drag in form and then we tie entry to form. Now watch. Ah, what if we wanted to like there to be a delay before it starts. So, we could come over here to form and what we could do is simply drag this over to like the middle. Now, we can go back, hit play. It's still coming in a little bit too fast. So, instead, I could take this animation, the duration, we can increase right here. Let's just change this to two. So, now this is going to be two seconds long. And then now we can just move this over here somewhere. Go back to state machine one. Hit the space bar. And there we go. Kind of comes in fast. So you might want to play with this the easing. You know, you can try pulling this down like this. Let's see what that does. I don't like that either. I think what we can do is just have a nice regular type of easing. Ease in and out. Perfect. Okay, that is it. That's going to be our Rive graphic. So, now what we do is we go back to design tab. We take our artboard. We hide the fill. All right. And then we go to export. We choose export for runtime. And I'm going to put this into formfit assets and we'll call this hero. That's all we need to do.

Now we're going to switch gears back to cursor. And now we're going to tell it, all right, in the right column Rive container, place assets hero. Inside of it, and ensure that you're using the correct Rive runtime as we're utilizing feathering. This right here just comes with experience. There's different Rive runtimes. We wanted to use the WebGL2, I think it's called, and make the Rive file expand to 100% width of its parent container. We don't want it to be fixed width or anything like that. So, it's going to go inside of here. So, we're going to go ahead and hit send. And hope to god it works.

Okay, so it's done. But notice if I refresh, we don't see anything. Why is that? All right. Well, control shift I it says reference error Rive is not defined at so and so and so and so it looks like there is a coding issue but what you would do if that happens if there's an error it's like oh it didn't work what the hell you could you could tell it to use the in-browser editor here um to verify and remember is this connected to the browser browser tab. I I can say the Rive graphic is not showing up and there's an error. Fix this and verify your work in the browser. Now I am going to provide it some with some information because oftentimes what'll happen is it needs to know the name of the state machine one like you want to be able to uh tell it to to use state machine one on the uh artboard called artboard. All right so I'm going to pass it along that information as well. The name is state machine one on an artboard called artboard. Let's send it. At this point, it's it's launching its own uh its own server. It didn't know that I already had done that. So, it's going to go through and get this working. There it is. It finally fixed it. there were some issues occurring uh with the Rive import the package import. So obviously it's working now. It verified it by taking a screenshot and can see something's in there and there's no more errors.

So okay, what I'll do now is we want to look at this in the browser and so let's let's get rid of this. All right. So, here it looks like she could probably be pushed down a little bit further and made even potentially larger. So, what I'll do is control shift I. Let's grab and see how this is working. So, it is the height. Okay. So, it is filling out the entire container. And that's good. um to make it a little bit larger, you know, we could adjust this value just to see real quick where it says 60%. That's where that is controlled. So if we check go to like 65, that's a little better. 70. So I think maybe 65 would be best. And let's take a look how close these are. Okay. So, there is a little bit of white space here, that that purple spot. So, we could tell it to get rid of that 48 pixel gap that gets her closer over that way. Okay. So, with those changes, that's a lot better right there. And if I drag it in at a certain point, like around like right around here, we would want to have her collapsed perhaps to underneath I or even on top of this stuff. All right. So, right there, I think that's going to be good to stop right there. So, what I'll tell it to do is increase the width increase the width of the right container to 67% and get rid of the 48 pixel gap between both of the right right and left column. Again, you could find all this stuff in the actual CSS in the index.html file and and adjust it yourself and save yourself some some tokens. Uh, but if you're lazy, you can do it this way, too. So, now it's going to make those adjustments for us. And again, you could I could have made those adjustments right here as well. Probably would have made more sense to do that. Um, but here in a second, we're going to have what we want. All right. Awesome.

Okay. So, for the next step, we have this these three cards right here. One, two, three. Three columns. And this time, I'm actually going to do something different. I am not going to utilize the Figma MCP server. I'm going to show you an entirely different way and different approach of recreating um designs. So the first step is the same as the previous one though. We need to export these assets. So we have speedometer, we have person simple run and then we have medical. I'm going to export those three with selected SVGs. Export three layers. And I need to go back to my code folder. Here is formfit assets. Save.

All right. So, now that we have that, what we want to do is take our own screenshot. All right. And that screenshot's going to be just basically from here to here. Okay. Now that we have the screenshot, we're going to go back over to cursor, not Rive, but cursor. And by the way, before we continue, if I expand this far enough, you'll see it reveals this little context thing right here. The context, you don't want this to get up to like 100%. Um, if you have a new thing that you're working on, a new feature, a new layout element, typically it makes most sense to come up here, hit new chat, so that you have fresh context to work with. Think of it as you know you have like the more the memory gets filled that context window the less um accurate and predictable the AI is. So it's always nice to start fresh. So what I'll do is control V and paste that screenshot in. And what we're really doing is kind of the manual leg work of what the Figma MCP server does. But we're just going to type all this information in ourselves in order to in order to achieve that three column layout. So it's going to require more typing, but it's less work in Figma. So pick your poison essentially. So I'm going to type this all out and you'll see that we'll probably get a really good result just as good as the Figma MCP server result.

Okay, so I just spent the time writing this all out. I'm going to quickly go over it. Integrate this three column design underneath the hero section in index.html. It starts off with a horizontal one pixel stroke. That is this color code. And that's essentially if I go back that's describing what's happening right here. This line right here. And by the way, it says card stroke. So all I did just to get that real quick was just unlink it and then copy it and then control Z to undo. Then we have inside of it is three columns each repeating the same pattern of an icon to the left then a title and description to the right of it. So icon 1 2 3 this is what I rename them. The icon sizes are 30 by 30 pixels. The titles are white man rope bold 28. The descriptions are right here. This color man rope regular 16 pixels with 151% line height. There is a vertical one pixel border that divides cards one and two and cards two and three. It's a one pixel gradient that starts off with color right there and at the top and it fades to opacity zero with this color code. And again, just to go back that shows you it's this this thing right here that fades from here and then off in the distance. So let's go back and then ensure that there's good white space around the icons and the text as shown in the screenshot. Now, I could have been real specific and told it what to use, but we'll see what it does itself and then make adjustments thereafter if needed. So, let's go ahead and send that over.

All right, here we are. Looks good from that view, but let's go back here and refresh. There we go. This is pretty solid. I'd like it to be a little bit higher. Let's see what it looks like when we scale this in. Nice. Perfect. Exactly what we would want. Of course, it's not responsive here. Obviously, this breaks pretty quickly, but we can fix that. There we go. I don't even have to make any changes. That's exactly what I wanted. Awesome.

Now, let's go ahead and switch focus to the other portion, which is going to be the scrolling trust symbol logos underneath it. Okay. So all I did is if I double-click into here and to get to this first one I renamed there's only four logos and then they repeat. So it's these four Google definitive health hinge and then Sigma. If I take all four of those, hit export. We want to choose for this I SVG. I'm hoping that these are all SVG files. We'll find out. If not, not a big deal. Export layers. And I'm just going to hit save. We're going to go back and we'll see in assets we should have Sigma, definitive, Google, and Hinge. Okay.

So now, what we can do is, um, again, we don't need to use the MCP server for this because this is going to be dead simple. We just have to describe what we want here. All right. So, create a horizontal scroller marquee that repeats the following logos and assets. These four right here. Add 150 pixels between each logo and repeat them so that it fills out the container, going from the viewport left to right. Viewport is just a fancy way of saying the, the browser, the view visible area in the browser. So, um, 100%. Do not include it inside of a max-width container. This should repeat and loop seamlessly with no jumps. Place this underneath the three cards in index.html. Let's go ahead and send that.

All right, check it out. It's actually still working, but it's working here in the browser, at least. I, I, I wanted to go the opposite direction and maybe slow it down by like 30%. The animation and slow it down by, uh, 30% of its current value. All right, not bad. It kind of looks still a little bit fast, but yeah, we're good. And also, like the Google Fitbit, that's cut off a little bit. So, again, um, what I would do is just screenshot this and then paste that in. Google is cut off. Make sure the full logo is visible. Okay, so I told it, you're overcomplicating it. All you need to do is increase the width of the Google logo specifically. And it almost got it right. And in this case, it's still cutting off the G. So, just click here. It's going to show you. Uh, let's see here. Where did it keep? All right, here. This is the one we want. We got to find it. Unfortunately, it's not taking me directly to that specific one. I'll do a search. Ctrl+F. Marquee logo. Google 140. Let's try 150. Now, if we save it, go back because it should hot reload. Guess what? We can see the whole logo.

Okay, so another thing that's annoying me is that that whitespace. It's a little bit much. I, so let's go back over here. Let's get this open. Uh, we can see it as a height. Maybe we fit content. Doesn't seem to really change anything too much. So, there could be something else that's kind of pushing this down. And again, we'll verify that by going over here to see if it actually made a noticeable difference. Doesn't look like it did. So, what else could we do? All right. Well, let's take a look at the inner structure by hovering over this stuff right here. So, we have this interesting. So, it is coming from there. So, what I'll do is select this overall container. Ah, it's this. It's that value, the, the padding-bottom. If we reduce that. Ah, there we go. Right around there. Hit apply. Now, if we come up momentarily, this will refresh when it makes the update. It's going to move it up. There we go. Look at that. Now, this is looking pretty solid. Be kind of cool to have her fade in as well. We could go back to Rive and make that adjustment later. Okay, so we're really making good progress here. Let's continue on with the final section down here.

Okay, so here's the final section. We're going to take this woman right here, which is a transparent graphic that we created before. We're going to export PNG. I called her girl sitting for the layer. And yep, girl-sitting.png. Hit save. And then also this is this logo way up here except really made larger. So, we're going to export that as well. I'll call this large-logo. large-logo. Export that as an SVG. Save it. Then we are going to go ahead and create a screenshot. Go back and paste that in. All right. Underneath the scrolling logo marquee design, this next section, this entire section is contained within a max-width of 1600 pixels. Again, I'm specifying that because I don't want her to go in this text to go all the way outside of the content. So, the, the 1600 pixels content container is going to be right here. Um, then I specified the very first layer is a centered horizontally and vertically an SVG element called large-logo. It's a watermark, but it should be large. Make it fluid, meaning responsive, not a fixed width. About 50% of the parent container. Now, the where I got that from is if I go here and I grab this logo. Well, I just imagine if I put it to the left and this is 1,600 pixels roughly. Then this is about 50% of that width. So that's how I'm communicating that. And then it should also be position absolute with a low z-index as the next asset will be sitting on top, centered. What that means is a position absolute element in CSS allows things to be layered on top of each other like this. Otherwise, you run into a box model like with flexbox and grid where things don't get to be laid on top of each other. Typically. So, position absolute means just a div element or an image element or whatever element that has that position absolute CSS property applied to it. It just means that you can stack things and move it wherever you want. Um, so she too will be a position absolute element sitting on top of this background here. Although she wouldn't have to be, there would be multiple ways of doing this. Um, like having a three columns here, column one here, two and three. That would be a way. But I, I told it to do something a little bit different than that. I said the next asset, the girl sitting, will be centered as well with a fluid width of about 20%. Be sure to maintain aspect ratio. She too will be position absolute as well. Um, and then next, create a regular div element that houses the two content blips to the left and right. The title and descriptions are the exact same stylings as the titles and descriptions in the three columns above the section. And the left column has the type right-aligned and the right column has the type left-aligned. So, that's going to be the prompt. We're going to see how this does. Hopefully, it nails it, but it probably won't. I think we'll have to do a little bit of follow-up work. And let's see.

Okay, so it actually did a pretty good job, but we don't see the logo. And is that because I gave it the wrong name? Large-logo.svg? I think that's what I specified. Um, so what we can do is a little bit of, uh, sleuth work figuring out what the heck, where it went. So, looking over here, we have this image. This is the watermark. And looking at this, actually, I might be able to do a better job if I just do it this way. So, Ctrl+Shift+I. We're going to hover over the watermark. And it does show it. Okay. So, this could be a z-index issue. Let's change that z-index value right there from one to two. Still not. Oh, opacity. Oh, that's why I told it to make it a watermark. So, it added opacity of 0.08 onto it. That's not what we want. All we have to do, we don't even have to prompt this. I mean, we can just go to, uh, Oh, right there. Opacity 8. But what would be easier? Just go to index, find 8% control F or eight. Right there. There it is. Get rid of that. Save it. Go back. Refresh this. There we go. Okay.

Now, let's go back to the browser window. Localhost 3000. And then we'll check out, uh, if it behaves how we want. Yeah, perfect. Now, there is a lot of whitespace here, but again, this is the area in the time now where we, let's say you designed everything you want to design. All right. So, now it becomes a matter of, uh, responsive design. You know, um, if we, if we drag this in, what point do we want things to change in terms of the layout? So, this is where it becomes real important to understand, you know, what your options are. Essentially, a lot of people will come out to Figma and they will specifically design. So, if we take this, I, something for like a tablet, you know, uh, moving things around. So, for instance, if I were to take, um, well, all this stuff right here, let's just hide that for a second or lock it. Let me take her group all that stuff up. Move her out. Oh, she's been locked. Let's go ahead, put her in there. Okay, move this all out. And what we would do is I'd probably start systematically just delete all this stuff. Bring this in perhaps like right around there. All right. And so now it becomes.

Okay. So, if I just real quickly ungroup this, ungroup these. Or I didn't even have to do that. Typically, you want to leave your stuff around like this. Then you can be like, okay, we can make this specific adjustment and we can communicate all this stuff. We don't have to go through the process of doing the MCP server and all that stuff. You can generally just do a good job of describing the changes that you want to the rows and columns. Um, and it will do a pretty good job. So, I'm going to come up with the first one. I'm going to create a new chat and we'll try to make this responsive. Okay.

So, here's what I did. I said, at 1260 pixels and lower viewports, modify the hero section so that the Rive column is above the left column. Nail your form every time and make sure that both the left and right columns are now 100% width of their parent container. What that means and where how I got 1260 is I took, uh, you know, the Chrome dev tools and I, I was moving it in. You can see right there it tells you what the width is and the height of the current viewport in real time. And so I think when we get to a level of like right around, I don't know, like here or so, 1260 or so, that's when we should move her above everything and then make both the left and right column extend out all the way. So, let's see if it actually does that. And we could probably start to switch to something a little faster, like C, like Grok code, uh, because it is faster and we're not asking it to do really complex stuff. There we go. Take a look at that. That's not too bad. Um, what I would probably have it do now at this point is to center this text and put a max-width on the container because these buttons are real freaking big. So, what I will say is, so at 1260 pixels and lower, center the left column hero text and also put a max-width of 70% on the container that holds the two CTA buttons. Uh, and and wait one second and center that as well. All right. So, now let's just switch to Grok code. This will be a lot faster. And then we'll go back, refresh. Notice how it did that. We can also probably ask it to put a, a, a max-width of like 70% on this text as well because it's kind of floating out there too much. Um, we want to center this stuff as well. Okay, so those are the two other two adjustments. So, for the description and hero section, max-width 70% and also center the user avatars, the five circular images and then place the little heart text icon underneath the avatar centered as well. There we go. Uh, but it didn't center this text. It centered justified the text, but the text itself is not centered in the viewport.

All right. So, what I'll do is just take a screenshot. So, make sure the center description text is centered itself in the viewport. You can see it's offset to the left. Oh, the model does not support images. Let me go back to Opus 4.5. I forgot about that. All right, there we go. Nice. So, we have the full version here. That has worked out nice. Everything's good now up until we get to right about here. Anything less than this, we want to get a, um, a, a mobile hamburger menu icon as they call them. Um, let's see what's happening down underneath, though. So, this would be a little bit too squashed. What we would want to do is tell it to collapse these three columns into three rows that go on top of each other. So, at what point should we ask it to do that? So, if I hit Ctrl+Shift+I, we drag the browser, we get the, the, uh, the values up here. I'll say right around, uh, 52. All right. So, I asked it to do that real quickly. Now, these should end up collapsing. Ah, there we go. Did a good, good job. Um, we could, you know, to keep it consistent, I would probably reduce the whitespace for sure around these areas. So, again, like if I refresh this, there we go. We can see, uh, if we select on these, we can see that there's padding that's affecting the top and bottom. So, I would probably take this padding, reduce it. Let's see here. Let's take this one. We'll get all four corners. The bottom will be get reduced to 36. We'll take 36. Apply that here and apply it here as well. That's better. Um, yeah, that works. Let's hit apply. Now, if I refresh, there we go. Not too bad. And we can scale this in. See what that looks like. Another thing I want to fix is the amount of whitespace between these two sections. A little bit too much. So, we have padding here on the top of 120. I'm going to take that down to zero. I think that's better for sure. All right, let's go ahead and send that. That's better. So, now we've, uh, reduced that.

Now, we get to a point, though, right around here, where we would want to transition this to a mobile navigation with a, uh, a side drawer that pulls out that shows these as well. And we could design for that in Figma and, you know, give it a design reference, but you can also just ask it to design it for you and see what it comes up with. So, what I would say is right here at around 830 pixels, the following prompt. At around 830 pixels and less, transform the desktop navbar menu to a collapse menu with a white menu icon that is left, I should say, right-aligned. There we go. And then when a user presses on it, there should be a slide-out animation from the right that shows the four nav links in a vertical style. Um, that's not, it's pretty vague. So, chances are what it comes up with is not going to look that great and polish the rest of the design. But you can iteratively to work, you know, work with it when we get to that point. So, let's refresh. Oh, it hasn't added it yet. Let's refresh. There it is. Click on it. H, I don't think it's done yet. Let me refresh again. Ah, look at that. It even has a really cool menu. And, uh, look at that. Look at that. Look at that. And there you go. So, that's your very quick mobile. Now, I would probably change this just a little bit, but I, but yeah, for the most part, that's good.

Now, notice here we have an issue. When we get to smaller ones, we're going to have to make a determination of, okay, what, what's going to happen now? Like a smaller viewport like on phone because this is completely unusable down here. So, first thing we could see that this showcase container, you know, how would we want to make this adjusted so that these two elements aren't aren't crushing and and sitting on top of her? Really, we would want these two to be two different rows on top of each other. Perhaps I, yeah, two different rows, kind of like what we're doing here, and have it show up underneath. So, what I'd say is right here. I'm going to copy that for a reference. I would say it should probably do that right around here at 920. All right. So, at 920 pixels and less, at the bottom of the layout with the positioned absolute elements and the two content blips, transition the content blips so that they are beneath the woman sitting down in the watermark logo. As you can see from the screenshot, they're overlapping her. Ensure that you can clearly see the watermark/girl sitting and then underneath the two content blips stacked on top of each other, designed similarly to how the three columns are stacked. Let's go ahead and see if it can do a good job with that request.

Okay, and there we go. Oh, it actually did a pretty good job. Um, I think I would probably want to keep them left-aligned, but yeah, for now, that's that's actually pretty good. So, look at that. And that's how you do it, my friends. Let's refresh. See this? This works. Desktop works. There. Again, there's some still some things that I would want to adjust about this, but yeah, this is solid for the most part. I probably want to bring these in so that they're overlapping this a little bit. Um, but yeah, that's solid.

The very last thing we're going to do, we've been working for a very long time now. I'm doing this all in one sitting, by the way. Um, the very last thing I want to do is show you. I want to show you some animation superpowers. Uh, because there's some really cool things that you can do with something called GreenSock Animation Platform, which is basically a JavaScript-based animation library for animating UI elements, um, interactively, too. Uh, you could do sequence animations, a lot of cool stuff. Some people opt to use that instead of Rive, although they're different things, but you can still achieve a lot of the same things with GreenSock um as opposed to using Rive. So, let's say, for instance, um, we want to have, I like, we want to have this stuff, like animate in, or maybe instead of that, maybe when a user scrolls down, maybe we will make this logo graphic scale in from like 50% height to where it currently is as a person scales or like, you know, scrolling down and then also. So, maybe we'll make this left and right content blip right here. Maybe we'll push them inwards as a person is actively scrolling down. This is going to be fun. So, let me show you, uh, what that prompt would look like.

All right. Integrate GreenSock Animation Platform or GSAP. It'll know what I'm talking about. Create a scroll-based scrub animation. Scrub animation simply means it's a scroll-based animation, like the animation is tied to your scroll distance. That does the following. Number one, when the very top of the watermark logo at the bottom of the design, that's in reference to the big logo, that's a watermark behind the girl. When it hits the bottom of the viewport. So, what that means, just to illustrate this real quick. So, here's the very top of it, right? So, when it hits the bottom, right there, at at right here, we'll make it. Let's go back. Make the watermark grow from a scale of about 20% to its current value at 50% over the course of about 300 pixels scrolling. So, it's going to start off small and kind of grow into its current shape over about a 300 pixel scroll distance, whatever that is. Um, and then I asked it to move the left and right content blips that are featured to the left, right of the girl sitting inward as a user scrolls down past that area. Move each of them inward by about 80 pixels. Okay, let's see if this will work. Let's go ahead and go back.

All right, let's refresh. Check it out. Ah, look at that. Okay, so there's a couple things I don't like. First of all, I, I realize that this over here got screwed up from the responsive design section. We're going to tell it to right-align this on desktop only. But scrolling down, because we're not using anything like a smooth scroll, it kind of gets jagged. It's like it's, it's hard. So, I'm going to show you how you can kind of fix that and also get these to move in a little bit closer. Um, so let's find that 80 pixel value first. We probably don't even need it. I think we can do control 80 pixels. No, that's not it. No. Well, I'll just tell it to move those, uh, content blips in a little bit more, but I'm going to tell it to integrate to fix the, uh, this, the jagged scroll type thing, to integrate a smooth scroll library called Lenis. Okay, so integrate the smooth scroll library. Also, make sure that the user avatar hero section is left-aligned for desktop only. And additionally, move the left and right content blips in more than 80 pixels. Maybe try 140. Now, watch what happens here with this smooth scroll library. We'll get a much smoother sort of animation. Now, this is kind of a taboo thing. Some people absolutely hate when you integrate smooth scroll, but as long as it's kept to a minimum, I, I like it personally for a lot of different projects. All right.

So, let's check this out. Here's our animation up top. See how it smoothly kind of scrolls? It's like a locomotion scroll. Now, I, I think my computer's like, it's lagging a little bit. This, I don't think this has anything to do with just the performance because we're not asking it to do very much at all here. Um, but yeah, this is the actual result. It didn't appear to really move these in enough. And again, we would have to really just kind of tinker around with it a little bit more. Uh, let's check this out. Let me, let me open up yet another browser. Firefox localhost 5500. Ah, see how much smoother that is. It was Chrome just being stupid, essentially. But that is basically it. Obviously, you can do so much more with all the technology that we have. It's really cool how this industry has transformed because I've been doing this for 30 plus years and I have to say it's insane now the level of productivity that we have, but clearly, there is a learning curve to it as you probably, like a lot of you might be just like, how can I redo this? There's so many steps or whatever. If that's the case, and that's completely natural, check out designcourse.com where I, I have several project-based courses that take you through the full product development experience. Not see, like in this case, if we actually made the app tracker, then it would be like the courses that I have at designcourse.com. Also releasing sprint training, by the way, which is where that's coming up very shortly, where you can work one-on-one with me over the course of 30 days and I review your work through video and you get like a 48-hour window to submit the next piece. Anyhow, that's enough spam. I will see you all very soon. Goodbye.