My Colmar Academy Walkthrough: Desktop Header

Hello community!

The Colmar Academy project was quite the challenge (I’m a total noob), but it was a great feeling to get through it!

I found the header to be the trickiest piece, and I’m not sure if my logic is correct. Thus, I’m asking for your help in determining if and where I made one or more mistakes.

Here’s my full HTML and CSS header code:

 <header>
  <div class="header-left">
    <img src="images/ic-logo.svg" alt="Colmar Academy logo" height="50px">
    <p><span class="logo colmar"><strong>COLMAR</strong></span><span class=" logo academy">ACADEMY</span></p>
  </div>
  <nav class="header-right">
    <ul>
      <li class></liclass>On campus</li>
      <li class="menu-option">Online</li>
      <li class="menu-option">For companies</li>
      <li class="menu-option">Sign in</li>
    </ul>
  </nav>
</header>

header {
    height: 64px;
    max-width: 100%;
    background-color: hsl(71, 0%, 98%);
    display: flex;
    justify-content: space-between;
}

.header-left {
    display: inline-flex;
    align-items: center;
    padding: 0px 0px 0px 24px;
}

.header-right {
    display: inline-flex;
    align-items: center;
    padding: 0px 24px 0px 0px;
}

header ul {
    list-style: none;
    display: flex;
    font-family: "Arial", "Verdana", sans-serif;
}

.logo {
    font-family: "Montserrat", "Verdana", sans-serif;
    font-size: 32px;
}

.colmar {
    color:hsl(51, 3%, 17%);
}

.academy {
    color: hsl(30, 7%, 52%);
}

.menu-option{
    padding: 0px 0px 0px 16px;
}

In case you’re wondering to yourself: “why in the world is that piece of code like that,” here is my thought process.

Getting the HTML Ready

I started the project by preparing the HTML file. I added the <!DOCTYPE html> declaration to avoid the page rendering in “quirks” mode. Next, I added the <head>, <body>, <header>, <nav>, <main> and <footer> tags. I finally added the text and visual assets. I didn’t add any div elements at that point in time.

Getting the CSS started and Moving the Main and Footer Sections Out of Sight

I then created the CSS file, in which I added the following code:

main,

footer {

display: none;

}

This was done so that I could focus on styling the header.

Making Flex Boxes

Given the Colmar Academy logo and text were to be on the left side of the header, and the navigation menu was to be on the right side, I’d have to make two containers. Those containers would need to be nested in a larger block-level container so that the two containers appear side-by-side regardless of the viewport (browser) width. Hence I added the following code to make the “outer” box:

header {
    height: 64px;
    width: 100%;
    background-color: hsl(71, 0%, 98%);
    display: flex;
}

Although the header in Codecademy wireframe is white, I wanted my header to have a greyish background. I then specified a header height of 64px (as per the wireframe) and a width of 100% so that the header would span the width of the viewport. I also made the header into a flex block element via the display: flex rule.

To create the two interior containers, I edited my “<div>-less” HTML code as follows:

<header>
<div class="header-left">
  <img src="images/ic-logo.svg" alt="Colmar Academy logo">
  <p>COLMARACADEMY</p>
</div>
<nav class="header-right">
  <ul>
    <li>On campus</li>
    <li>Online</li>
    <li>For companies</li>
    <li>Sign in</li>
  </ul>
</nav>
 </header>

The <nav> element is a block by default, so I didn’t see the need to create a <div> to contain it. Instead, I created a class for it in order to more easily identify it in the CSS file (i.e., to make it the “header-right” counterpart to “header-left”).

At this point, my header looked like this in the viewport:

*the bold "Sign in button was accidentally there from some experimentation, please pretend it’s normal, unstyled font

Getting Everything on One Line

The items in the .header-left container were on top of each other because <p> is a block-level element. To fix this issue, I assigned the .header-left box the display: inline-flex rule. This made the items line up alongside one another:

.header-left {

display: inline-flex;

}

Things were now looking a little better:

The next step was to make the unordered list items appear alongside one another. I’d also need to get rid of the bullet points. I added the following CSS code to do this:

ul {
    list-style: none;
    display: flex;
}

I’d have to apply the rules directly to the <ul> element, as opposed to the .header-right container.

Through Googling I was reminded that you have these properties to the <ul> element, and not to the parent (the <ul> element won’t inherit them).

This was the result:

Horizontal Alignment

Since I was working with the alignment of a single row I need to use the align-items property. I had to give it a value of center to make the items centered in their respective boxes. I added the following code:

.header-left {
    display: inline-flex;
    align-items: center;
}

.header-right {
    display: inline-flex;
    align-items: center;
}

I saved it and refreshed the viewport. I was now here:

Fonts and Colors

To make the Colmar Academy logo adhere to the standards specified in the wireframe, I increased the font size to 32px, and I changed the text color by using two tags in the HTML file:

COLMARACADEMY

.logo {
    font-family: "Montserrat", "Verdana", sans-serif;
    font-size: 32px;
}

.colmar {
    color:hsl(51, 3%, 17%);
}

.academy {
    color: hsl(30, 7%, 52%);
}

I also styled the menu options:

header ul {
    list-style: none;
    display: flex;
    font-family: "Arial", "Verdana", sans-serif;

This was the result:

The logo appeared strangely small in relative terms, so I increased the size of the image in the HTML file:

<img *src* ="images/ic-logo.svg" *alt* ="Colmar Academy logo" *height* ="50px">

Why the HTML file? I took the advice of Pavel Strakhov in this thread.

Horizontal Spacing

I then proceeded to work on the navigation menu. First, the logo needed to be on the left-hand size of the header, and the menu items needed to be on the right-hand side of the header.

I was here:

To fix this, I added justify-content: space between to the header rule set:

header {
    height: 64px;
    width: 100%;
    background-color: hsl(71, 0%, 98%);
    display: flex;
    justify-content: space-between;
}

The menu options needed 16px of space between them. I added a left padding of 16px to the second, third and fourth options:

<ul>
  <li class></liclass>On campus</li>
  <li class="menu-option">Online</li>
  <li class="menu-option">For companies</li>
  <li class="menu-option">Sign in</li>
</ul>
.menu-option{
    padding: 0px 0px 0px 16px;
}

I was then here:

Finally, I added 24px left padding to the .header-left box and 24px right padding to the .header-right box:

.header-left {
    display: inline-flex;
    align-items: center;
    padding: 0px 0px 0px 24px;
}

.header-right {
    display: flex;
    align-items: center;
    padding: 0px 24px 0px 0px;
}

Done … (Just Kidding)

And that was what I did to get a header bar that resembles the “web” one presented in the Codecademy wireframe.

Please let me know your thoughts! All critiques and tips are welcome. :slight_smile:

4 Likes

Questions

While working on the header, some questions came up. I tried to find the answers without success. If anyone could help me, it would be very much appreciated!

1. Why do I get the same results if I use the align-items: center rule in the header or in both .header-left and .header-right boxes?

2. Let’s assume that someone has a gigantic monitor and accesses this webpage. The logo could be way to the left of the menu items. How could I adjust my code to keep the background color of the header while keeping the logo and menu items reasonably close together?

3. I tested a basic CSS reset I found online:

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}

I then noticed that the header went from this (blue background added to ruleset for clarity):

To this:

There were no margins/white borders around the header (specifically above and to the left and right of it). Were there some default properties I happened to reset?

1 Like

@script4685794286

Hey there, there are often margins and paddings unbeknownst to the user. You are correct in the end, the header had margins or padding before. I don’t remember if it’s in nav or ul or li, but one of them has default padding. I just linked a reset.css to try to get rid of all the mumbo.

-Jaden