0:00 How should we approach this? If we look at this Figma representation of the background stripes, you can see the stripe patterns is consisting of very long, thin rectangles positioned side by side with equal spacing.

0:12 We're not going to, but we could have a series of divs with equal spacing. We would just need to create enough of them to fill the entire element. That would work, but yeah, let's not do that.

0:24 What we're trying to build here looks a lot like a background pattern. You know when you have a little tile that has some sort of pattern? Then you repeat it to the right. You repeat it to the bottom as well indefinitely. Together, these tiles seamlessly connect to make it look like a pattern.

0:40 Typically, these patterns use a small image. It turns out that linear gradients are one kind of image. What I'm saying is you can set the background-image CSS property to be a linear gradient. This is an excellent tool to create these stripes.

0:53 Let's do a very quick gradient "Hello, World!" We have this element. You can see it has a class of gradient-demo. I've prepared this class here. Let's create a background gradient. Like I mentioned, it goes on the background-image property. We'll call the linear-gradient function. Let's do it on multiple lines.

1:10 First, we want to pass a rotation or an angle. Let's go with zero degrees here. Then we'll have three color stops, yellow, orange, and red. It might look terrible, but let's go with that. You can see right now our gradient smoothly transitioned from yellow at the bottom to red at the top.

1:29 The default angle of zero degrees is bottom to top. If I change this to 45 degrees, you can see that now it goes from bottom left to top right. -90 degrees, I imagine, would go from right to left. Yeah.

1:44 Now, let's make these color stops sharp instead of smooth. Instead of just defining three colors that will equally spread, let's make the yellow go from percent to 33 percent. Then orange will peak straight up at 33 percent and go to 66 percent. When I save, you should see a sharp stop between yellow and orange.

2:05 Let's do the last one. 66 percent to 100 percent. Now we have our three sharp colors. Here's a secret for you. You can, on the first color, when it starts at zero percent, skip that. It will infer that it goes from the start to the first value. The last one, you can get rid of the 100 percent. If that's the last color, it will complete the rest of the spectrum. That's looking exactly the same.

2:28 Now, with a little bit of imagination, we could make the middle band more narrow. Let's go 45 to 55 and then maybe change the angle to -45 degrees. Let's make both the first and the last color red. You can see how now this starts to look like a little stripe, can't you?

2:48 I'm not going to reveal too many secrets. If you need to spend a little bit more time getting familiar with CSS gradients, do that now. Otherwise, let's jump into the challenge.