Finalizing the About Page Styles and Review of Code Organization Best Practices
Now that we have our two-column grid layout finished and that's looking good, and everything else on the page is really coming along nicely, the last element that we want to integrate is the footer.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a free Dev Camp account
GET FREE ACCOUNT

We want to have the same exact footer that we had here on the home page. So, we can simply bring that in, and let's see how that works.

Let's open up our about.html and our index.html and then scroll down almost to the bottom where the footer is. We want to highlight everything on the footer and copy it into our about.html.

about.html

  <div class="footer">
    <div class="logo-footer">
      <img src="images/logos/decamp-fantastic-fries-logo-white.png" alt="Logo">
    </div>

    <div class="footer-phone-hours">
      <span class="phone">555 555 5555</span>
      <span class="hours">10 AM - MIDNIGHT</span>
    </div>

    <div class="links-wrapper">
      <div class="nav-link">
        <a href="index.html">Home</a>
      </div>
      <div class="nav-link">
        <a href="about.html">About Us</a>
      </div>
      <div class="nav-link">
        <a href="menu.html">Menu</a>
      </div>
      <div class="nav-link">
        <a href="take_out.html">Take Out</a>
      </div>
    </div>

    <div class="social-media-icons-wrapper">
      <a href="#">
        <i class="fab fa-instagram"></i>
      </a>

      <a href="#">
        <i class="fab fa-twitter"></i>
      </a>

      <a href="#">
        <i class="fab fa-facebook-f"></i>
      </a>
    </div>
    <div class="copyright-wrapper">
        '&copy; 2018 DevCamp &#124; All rights reserved
    </div>
  </div>

That should all work. Let's see. We have common.css containing all the footer styles. So, this will work for right now. But, after we're done here I would like to clean our common.css file, because that file is getting a little bit massive.

First, let's make sure this is working. Scroll all the way down.

large

You can see that this is working perfectly. So, that is all you have to do on that side. Now, let's go to tcommon.css. Let's do a little bit of clean up now that we're done.

I'm going to come up to the top, and you can see that we have all kinds of different comments, and I think the comments are going to be a great way of being able to separate all of these out.

The footer really has a lot of styles. That deserves to have its own file. So I'm going to say, new file inside of styles. This is just going to be footer.css. Then, let's come here to common and we're going to just get all of these.

footer.css

/* Footer */
.footer {
  background-color: #11122b;
  color: #cbcbcb;
  font-family: "Ubuntu Condensed", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 500px;
  margin-top: -4px;
}

.footer > .logo-footer img {
  width: 250px;
  height: 100%;
  /* filter: brightness(50%); */
  opacity: 0.5;
}

.footer > .footer-phone-hours span {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 1.2em;
  letter-spacing: 2px;
}

.footer > .footer-phone-hours > .hours {
  font-size: 0.8em;
  color: #cea135;
}

.footer > .links-wrapper {
  width: 400px;
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer > .links-wrapper > .nav-link a {
  color: #cbcbcb;
  text-decoration: none;
  transition: 0.5s;
}

.footer > .links-wrapper > .nav-link a:hover {
  color: #cea135;
}

.footer > .social-media-icons-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
  width: 300px;
  display: flex;
  justify-content: space-around;
}

.footer > .social-media-icons-wrapper a {
  font-size: 1.5em;
  color: #cbcbcb;
  text-decoration: none;
  transition: 0.5s;
}

.footer > .social-media-icons-wrapper a:hover {
  color: #cea135;
}

We'll import these to our about.html and index.html as well.

about.html + index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/footer.css">

Let's verify that we didn't break anything.

large

And, nope. Everything is still looking good. That means everything is working on that side. If you go to home you can see we still have the footer. So, all we're doing is we're organizing the code so it's a little bit easier to navigate.

Now the skewed header, this is something that is going to be common among just about all the pages but not every one. If you notice the homepage does not have any of those skewed header styles. What I'd like to do is come up with a pages one, or I could just create a skewed header.

I could say skewed-header.css and now we can know where whenever we need that skewed header all we have to do is bring it in right here. Let's come and grab all of that skewed header content and paste it in.

skewed-header.css

/* skewed header */

.skewed-header {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.skewed-header > .header-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/backgrounds/about-us.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  transform: skewY(-6deg);
  transform-origin: top left;
  filter: brightness(50%);
}

.skewed-header > .skewed-header-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100vw;
}

.skewed-header > .skewed-header-wrapper > .skewed-header-content {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skewed-header > .skewed-header-wrapper > .skewed-header-content > .links-wrapper {
  display: flex;
}

.skewed-header > .skewed-header-wrapper > .skewed-header-content > .links-wrapper > .nav-link {
  margin-left: 10px;
  margin-right: 10px;
}

.skewed-header > .skewed-header-wrapper > .skewed-header-content > .heading-wrapper {
  background-color: #cea135;
  color: #11122b;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  width: 175px;
  padding: 10px;
  text-align: center;
}

Now, if you open up the about, we can add this right here.

about.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/skewed-header.css">

Hit save, and after you refresh, you can see that this is still working properly.

large

The reason why I wanted to do that is that I don't like having a file called common unless 100% of the code that is in the common directory is used by every page on the site.

Let's see. If we follow that rule, every page is probably going to have a heading. It makes sense for this rule to be here. Then everyone has a body. So, that makes sense. Those are truly common.

But this page container, this is not on every page. So, we should probably come here and add a page-container.css file. Then we can just go and grab all of these items.

page-container.css

/* page containers */

.page-container {
  display: flex;
  justify-content: center;
}

.content-wrapper {
  width: 1000px;
}

.content-wrapper > #chef {
  margin: 25px 40px 30px 0px;
  width: 350px;
  float: left;
  border: 1px solid #cea135;
}

.content-wrapper > p {
  line-height: 30px;
  letter-spacing: 1px;
}

It's just a small amount of content. We're only going to have to bring that into the about page.

about.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/skewed-header.css">
<link rel="stylesheet" href="styles/page-container.css">

Hit save, hit refresh once again, and everything here is looking good. Everything is still following exactly what we had before.

Next, you're probably going to guess what we're going to do now. We have the square grid. So, let's come to styles and create a square-grid.css. Then we can do the same thing here where we're going to grab all of the square grid content and pull it out.

square-grid.css

/* squares */

.squares-wrapper {
  display: flex;
  justify-content: center;
}

.squares {
  width: 1000px;
}

.square {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: -4px;
}

.square > .img-wrapper img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.square > .square-text-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 42px;
}

.square > .square-text-wrapper h1 {
  color: #cea135;
}

That's all we need to do there. Let's do the same thing on the about page.

about.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/skewed-header.css">
<link rel="stylesheet" href="styles/page-container.css">
<link rel="stylesheet" href="styles/square-grid.css">

Lastly you may think the helpers are common, and they kind of are, but still, they're not master styles. They simply are helpful tools.

If this common file gets any larger, which in a large application your common files still will get pretty large, then what you are going to want to do is to create a helpers.css and wherever that's needed, then you can go and pull that out. Let's save that, paste that file in.

helpers.css

/* helpers */

.spacer {
  margin-top: 50px;
  margin-bottom: 50px;
}

.dark-bg {
  background-color: #11122b;
  color: #cbcbcb;
}

.phone a {
  color: #cbcbcb;
  text-decoration: none;
  transition: 0.5s;
}

.phone a:hover {
  color: #cea135;
  text-decoration: none;
}

Now to import it. First is about.css.

about.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/skewed-header.css">
<link rel="stylesheet" href="styles/page-container.css">
<link rel="stylesheet" href="styles/square-grid.css">
<link rel="stylesheet" href="styles/helpers.css">

Now everything should still be working. I hit refresh. You can see that everything's there. Our spacer is still there. Our grid is there. Our footer is working. This is all really, really nice.

One thing that I love about this is imagine a scenario where you give this to another developer and you come back later on and you haven't worked in this type of environment for a while.

When you look at the head tag, and you look at the metadata right here, you can instantly all of the features on that page by just looking at this one spot of the site.

You can see all of the dependencies. Then it also is going to make it a lot easier for you to update styles. If you ever need to update the skewed header, you can go directly to the skewed header file and have access to all of that content right there.

I think that's a really nice way of organizing the code. If you're looking to get a development job, then people are going to want to see code organization like this. Because this shows that you understand, not only how to organize code, but you also realize the importance of it.

So, great job. If you went through that, we are making our way. We now have the home page, which is the hardest page to build out. Then we have the about page. And next is going to be the menu. You can see over here what the menu should look like.

large

And, I can tell you this. We are going to be able to build the menu in a single video because we have already built all of these styles. That is going to be pretty cool.

There's going to be a couple little features that I want to teach you about in them, so we'll spread it out through a couple videos because we're going to learn about concepts like being able to have anchor links and bullet points and numbers and things like that.

I will spread the teaching over a couple of videos. But, we're actually going to get to what looks almost like this all in a single video.

So, hopefully, you'll like that. The next section is going to be pretty short and sweet.