Inspect Tool Solution

[00:00:00]
>> So our mission was to kind of implement some of this, I'm not gonna drive you through me kind of looking at CSS staring at it and copying it, we can kind of see as we go through and I will look at the completed example as well. Again as we saw before, you go the Inspect tab, you can get a sense of like, what the font, what the weight is stuff along those lines, my favorite the line height, because I will forever struggle with that and have to refresh the page all the time.

[00:00:28]
And again, like, does your text field need, a Flexbox? Probably not, but at least helps you with some like helpful hints to figure out what you're trying to implement as you go through, like what are the colors if there were border radiuses. Right, I have two ways of acquiescing like what the padding on a button element should be as I implement it, right?

[00:00:50]
I couldn't hold the Alt key or kinda hover over some of the different pieces. Right, or I can go ahead and look at that in this case and say, okay, again, I would probably choose to use padding rather than static positioning some text. This is not gonna get you fully out of writing CSS, but it will at least help with some of the tiny little details that you might otherwise kinda play around with.

[00:01:18]
So we can take a look at this, but basically this is kind of an implementation of it, that we can see as well where I just kind of took all the different pieces and styled it to look. The fonts look a little bit different because I think the web fonts are slightly different in the browser versus in Figma, but generally speaking, we can kind of figure out.

[00:01:38]
Roughly what the font size is, what the font weight should be, how we want to align things. So I had to get the buttons kind of in the right position and stuff along those lines. So it is super helpful, again I wouldn't rely on the CSS and just copy and paste it in like mark the ticket is done, but at least like takes some of the guesswork out, and gets you a head start.

[00:01:59]
Okay so let's talk about this segue here into the next section, so as we saw before, and I'll zoom back in on that, we have all these boxes. What would happen if I wanted to make another yellow box or maybe a yellow circle, right? There's a bunch of ways that I could do it, and none of them scale, I could duplicate it and then that would work.

[00:02:27]
But if I needed something totally different of the same color, now I want an icon or something else, or text that's the same color, it's gonna get hard. I could go in either Design or Inspect and grab the values and just start using that all over my design, but like the engineering, you should be like, I'm not doing that.

[00:02:47]
I'm not, because I don't have to go ahead and change every hex code, when we decide where you are with a slightly different shade of yellow. I'm not, I won't, you could select all and change it but like, there should be some part of you, which is like, when I'm writing code, I don't write the same value over and over again.

[00:03:03]
In a store in a variable, or make a CSS class, something along those lines, that same kind of sort of laziness really, that you have as an engineer, works here as well. So I guess the question is, and I kind of already answered it, but how would we go about doing, right, again yeah, I could use the eyedropper tool here and go the fill.

[00:03:33]
I can be like, okay, now I want this to be orange, I could do that, but like that won't work, if it's on another page, you can see how this doesn't really work, we're gonna need some additional tools here in order to figure this out.