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.