Lesson 3: Adding header image, Navigation and about section - Kodhus

Lesson 3: Adding header image, Navigation and about section

In this lesson we will take what we built in the last lesson and will add following sections to our html and finally style them:

Here is the final product of this lesson: Lesson 3 source code and output

  • Add a header image
  • Adding a navigation menu
  • Add some content like image and text
  • Use Google fonts to customize the feel and look of our text fonts and styles

If this is the first time you are viewing this lesson, please start from the first lesson. You can see the content on the top right side of the page.

Here is the link to the prototype we made last time:
Lesson 2 source code

Introduction

We are going to add a header Image to our website to make it look cooler and more professional.
For our website we are going to navigate users to 2 sections; About, Services and Contact.

In out About section, we are going to have a picture
and a text describing who we are and what we do.

In the services section, we create some placeholders for the services we can provide: e.g: consulting, webdesign, etc

and finally in the contact section we get ourselves familiar with html forms and form elements.

Header picture

To make the header picture section, we create a div with class header-img in between the <main></main> tag like follow:

<main>
    <div class="header-img"></div>
</main>

That is everything you need in your html.
Then to add the actual image with correct sizing and everything, we add following rule to our css:


.header-img {
  width: 100%;
  height: 400px;
  background: url('http://www.kodhus.com/freecourse-images/header-image.jpg');
  background-size: cover;
}

What we did here is that we added width 100% so that the .header-img div takes the full width of it's parent which is in this case the main element.
Then we set the height to 400px. Finally we used background css property and gave it the url of our image. In this case it is hosted in kodhus.com but you can put it anywhere you like.
background-size: cover means that I want the picture to be fit in my div. What it does really is that it scales the background image to be as large as possible so that the area of the div is covered by the image completely.

Navigation

The most common way of adding navigation elements to websites are through using unordered lists (<ul></ul>).
Following is what we need in our html to have the markup for our menu.


<header>
    <div class="menu">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </header>

As you can see we added a div with class menu in our header element and inside it we used unordered list(ul tag).

Inside ul tag we added li tag and inside each of li tags we added an anchor(a) tag.
the a tags are our links in our navigation menu. As you can see each one has a text inside for each of our sections and also they have a href attribute.

For each href attribute we gave it a name that starts with a hash(#). It's important when we want to click on each of those links and expect the page to navigate to the corresponding section in our page.

Now to style our navigation we use following css rules:


.menu {
  float: right;
}
.menu ul {
  list-style: none;
  margin: 8px;
  padding: 0
}
.menu li {
  display: inline-block;
  padding: 0 20px;
}
.menu a {
  text-decoration: none;
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Lato';
}
.menu a:hover {
  text-decoration: underline;
}

Now that we have our header image and navigation setup, let's create the respective sections.

For each section we want in our website (In our case they are about, services and contact us), we use

<section></section>

tag which is an html5 tag.

In this lesson we will add the about section and in the next lesson we will add services and contact us section.

About section

For the about section we want to have an image and a text that is supposed to represent us for the visitor of the website.
Let's build the following about us section like the picture bellow:

Following is the html markup we use:


<section id="about">
      <img src="http://www.kodhus.com/freecourse-images/about.jpg" height="180" alt="">
      <div class="content">
        <h1>About us</h1>
        <p>We are a team of motivated designers and developers that have great passion for frontend and web development and believe in sharing our knowledge and build a healthy community where people get motivated and get support from each other.</p>
      </div>
    </section>

As you can see we used section tag and gave it the id of about.
If you remember in our navigation section we gave #about to the href attribute of the first link. This gives us the ability to click on the "About us" link in navigation and the page automatically jumps to this section.

We have added an image and also a div with class content.
the div with class content contains an h1 heading tag and also a paragraph(p) tag. We have h1 to h6 which creates headings from big to small.
Now Let's jump to css to style our about us section.


section {
  padding: 40px 120px;
}
section#about img {
  float: left;
}
section#about .content {
  margin-left: 220px;
}

First of all for all the section elements in our html we give them padding so that between the content within them and the border there is a space. This makes it more appealing to visitors eyes.
The padding property is as follow:


padding: <space from top and bottom> <Space from left and right>

So the first value is the padding from top and bottom and then the second value is padding from left and right. Both of the measures are in pixel!

Then we select the img element in our about section using css section#about img selector. This really means choose the img tag in the section with id #about. we add the css property float and set it to left. What it really does is that it moves the img element to the left.
Then we choose the div with class content and give it a margin-left: 220px. This is because when you set the float property of the image to left, the img tag will no longer follow the flow of the page. as if you take it out of the page and put it back in. The neigbouring elements have no idea about its presence. That is why we move the .content 220px from left using margin-left. This way we can have the content to the right side of the image.

Here is the final product of this lesson: Lesson 3 source code and output

This is the end of this lesson. Try going over this lesson again and again and try stuff. Ask any questions in the comment section.

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *