8-Header Style

Key Objectives

• To start building out a first version of a header section.

Video

Overview

In this module, we start to refactor what we've already stubbed out in the header, just like we did with the navbar.

Notes/Tips

• This is an open-ended task, and it gets hard to identify when you are done. We recommend timeboxing your work. Set a designated time and quit. Do a little animation and move on.

• Having good ideas is great, but it's also ok to just explore. Sometimes ideas come after the first try.

• Don't be afraid to throw out entire ideas. If it's not working, sometimes you just chuck it.

Steps

1. In VS Code, go to the module-7-header-styling-starter branch.

2. Check out the short video.

3. Don't worry if you don't fully understand the difference between px, em, and rem. It takes time, but there is a link to a good read here. We use rems in this module for the jumbotron. You don't have to use them, but it doesn't hurt to start to learn about them.

4. Go ahead and start adding more detail to your header. The text should be simple and the feel should be elegant, simple, refined, etc. This could involve changing the font, adding a background image, adding some color, etc. Just so you know, we'll talk about animations in future modules. You might want to do some reading and start researching and looking for ideas. Even though this article is talking about an About Me page, it has some good information on creating unique pieces in your project.

5. After getting you code to a good place, celebrate a small victory by committing and pushing your code.

6. Go ahead and move onto the next module. The next module gets fun when we start to use animations.

7. Here is the final code.

   • _body.scss

     /* Body section. */
     body {
       padding: 15px;
     }
     header {
       text-align: center;
     }

   • _header.scss

     /* CSS code for the Header section. */
     .jumbotron {
       background: url('http://eleven50.wpengine.com/wp-content/uploads/2017/03/Learning-to-Code5.png?id=21797') no-repeat center center;
       padding-top: 8rem;
       padding-bottom: 8rem;
     }
     
     .jumbotron-heading {
       padding-top: 50px;
       font-weight: 400;
     }
     
     .jumbotron .container {
       max-width: 60rem;
     }

   • main.scss

     @import "variables.scss";
     @import "body.scss";
     @import "navbar.scss";
     @import "header.scss";
     @import "portfolio.scss";
     @import "about.scss";
     @import "contact.scss";
     @import "footer.scss";