So the way I approach almost every goal or problem while coding, is to first break it down into a series of steps I can complete breaking bigger problems down into small chunks makes it much easier to think about and complete. Even though we are just doing basic styles right now it is important that we take the step by step approach toward the code we write in future videos.

The first step I want to take is to try and get that grey background in there without the skew and without the green borders. So just a grey box let's go back to our application and back to our code. So the first thing we want to do is create a div and call it backgroundSkew. You'll notice that it has a class name instead of class like a normal HTML tag. That's because this is JSX and it's not actually HTML. This compiles down into react code or javascript that ultimately produces HTML. At the end of this guy will go a little bit more into JSX and how it compiles down and will also take a look at the table compiler so now that we get our tag in here let's go ahead and go into our main that SCSS file in the source folder and you'll notice that I've put some variables in here that you should also fill out right now.

So go ahead and pause the video and copy these down and then we will continue on. So now let's add our background skew tag like this. And let's give it a width, height and background color. The width: 100vw; and it stands for view width, the height: 700px; for the background-color: $darkGrey;. So you'll notice up here that there's a dark gray variable and that's where we get that color. Let's go ahead and save it. You'll notice our app will reload and you'll see the grey box is in there.

Going back to our completed application you'll notice that this the title isn't exactly where it should be. So the way we can fix that is going to our app.jsfile and by putting our h1 tag into our background skew div. Save it and wait for it to reload you'll notice it's now up in there, alright and the next thing I want to do to the background header is add the skew. To do this go into our main the SCSS file and type in transform: skewY(- 10deg); save it. Wait for it to reload and you'll notice it skews it.

So the next problem you'll notice is that our header is sideways our heading text. To change this we just have to select all the children of the background skew element and skew it back up 10 degrees. So basically what's going on here is we are first skewing everything in the background 10 degrees we're skewing the entire background 10 degrees and then we are going through each element in the background skew and skewing it back up 10 degrees so anything we put in here will go back up to 10 degrees where it should be.

So while we're dealing with the header let's go ahead and add in our subheading. So go ahead and add a div with class name Mad Libs subheading Mad Libs subheading and what's actually in case this entire heading in its own div class name equals Madlib heading let's just take this and pop it in here.

All right let's go back to our completed app and let's copy this and put it in here

let's also put a break right after buttons so it will go to the next line. So make sure you the slash after the break.

If you go back to our application you'll notice that it's in there now. But you also notice that it's half on the gray and half on the white and there's a couple problems with that one. We can't read what's on the gray and two we don't even want the white there. So we first have to move this up and then change the text color to white. So in order to do that just go to your main.SCSS file and let's give it a margin-top: -17rem;. So you'll notice that our text has disappeared which is kind of a problem. So what we have to do is add a padding to this padding-top: 17rem;. This will basically displace our margin and put everything back where it should be. So anything we add in here will be where it should be. So far styles are looking pretty solid. All we have to do now is adding in the green border to the bottom of the skew and add some styles to our header heading text.

Moving on to our next step to add that border to the bottom of the skew all we have to do is type in border-bottom: 1rem solid $bottegaGreen. This is referencing our Bottega green variable up here. Go ahead and save it and wait for it to reload and you'll see that pop in right there which is really nice and pretty easy just one line code. For our heading if you remember its name Madlib heading. Let's go ahead and text-align: center;. So our text will center and that's looking nice. Let's give it a margin: 20px;, padding-top: 46px;, color: white;and font-weight: 700;. Finally font-family: $font-primary; this will reference our font-primary up here. As you can see that changes it really well in just a few lines of code, about six lines.

All right so for the subheading, you'll notice on our completed app that it's a little bit different and we don't want it to be the same as this header. So to get that we just need to add in the following styles. Giving you a white color and giving it about that .75 alpha will give us the look we are looking for, let's also set the font size to 15 pixels.

All right so that's all that coding we'll be doing in this video. The header is now looking pretty nice and we've got the right styles in there. So before I end the video, I'm just going to go over a little bit of how JSX works. So in our app.js these divs and h1 tags that you see are not HTML it's actually JSX. And if you head over to REACT and scroll down to JSX you'll get a pretty good description of what it is and how it works. So if we hit here we'll be brought to JSX in depth

and basically, you'll see that this div compiles into this code which ultimately produces some HTML down the road. We can test this out by copying this and going back scrolling up here to compilers and clicking on this Babel link. Then hit check out the repel to experiment more and copy and paste that div we copied before. You'll see that it compiles right into this code that we saw earlier. We can actually straight up copy this code that we wrote for our app.js and see what it would look like to the browser so you can see that it says react.create element. All this code and it's really long and ultimately it's producing HTML so it's nice to put it in a format that is more understandable more intuitive. So real quick let's commit our code and push to Git Hub. I'll also be leaving a link to my commit so you can see the exact code changes I made throughout this video. So first just open a new terminal window using this plus and type in

git status 
git add . 
git commit -m "added header and header styles" 
git push origin master

We should be good to go. That's it for this video and the next video we're going to create a first react component which is our mad lib form component.

Resources

source code