Welcome to this section on styling in React.

In the last guide we started bringing in our own custom styles and organizing them in our main.scss file.

Now that we have our nice custom font in place, now we can start building out the navigation bar.

Now that we have the structure in the flex box container set up for our navigation component, now we can start styling these links, so let's get into the best way to do that.

Now that we're starting to integrate some custom colors into our application I think that it's time for us to integrate a variables file.

Our navbar is coming along nicely and I wanna make a few final changes to it and one thing that I forgot to implement earlier was our active class style.

In this lesson we're going to walk through how we can clean up each one of these elements in the navbar and then we're going to be able to move on to styling the cards and the homepage.

Now that we have our navigation system complete, I think we are ready to start setting up the architecture for our portfolio item cards.

This is gonna be a really fun guide, because we are gonna get much closer to having the look and feel that we have right here in our design.

Now that we have our images lining up perfectly in our columns, it is time to take our descriptions and our logos and then layer those on, so that's what we're gonna do in this guide.

In this lesson, we are gonna learn how we can build out that cool hover effect so that, when you hover over one of these portfolio item components, it darkens the background image and makes it easier to see the content in front of this, and we are going to learn about event handlers inside React.

This is gonna be the last guide in our style section, we're not done with styles because we have a number of other pages we're gonna build out.