In this section of the course we're going to build out a search engine frontend. Now this isn't going to be functional, we're going to take care of that later on.

I hope you had fun building out that project, and I hope you learned quite a bit about CSS grid and flex box and how they can be used together in order to build some pretty powerful front-end implementations.

Now that we have all of our HTML on the page, what I want to do is give our HTML a type of structure.

Now that we have our HTML structure, along with each one of the class names that we want to use, now it's time to actually start implementing the style. We're going to be able to see exactly what we can do to make this match the design.

I'm not sure about you but I'm really getting tired of seeing this giant logo right here. So because this is at the very top of the page let's now add the styles for the logo.

This is going to be one of the longer guides in this project and it's because in this guide, we're going to tackle really one of the most critical items on the page which is the search bar.

I really like how this site is coming along, I think it's looking good. And in this guide we're going to update our input search box here so that it has this cool little magnifying glass icon.

The page is coming along quite nicely. We have a few cleanup items that will take care of later such as the height of the search box, the fonts, and some of those things but now I want to tackle the press-return-to-search element, and then the recent posts.

Before we move into polishing up the design and integrating our fonts, I did forget one thing that I wanted to show you, which was how to work with these grid-templates, so we're going to take a deep dive into working with grid columns and rows.

Now that we have our home page finished up now we can get on to the results page. And if you're wondering how it took us so long just to create the styles for one page I will say that that definitely did take a little while.

Now that we have all of the HTML structure we're going to need, let's start working on the actual styles.

In this lesson, we're going to walk through how we can customize and style these post links right here.

Now that we have our results looking the way that we want them to be I think the next element we should work with is the input.

In this lesson we're going to finish up the implementation for the second page. We're going to finish it off with updating the results page logo.