HTML/CSS Navbar and Hero Section - Website Building Series Part 1

in #utopian-io • 8 years ago (edited)

What Will I Learn?

  • You will learn how to construct a navigation bar and hero section for a portfolio website using HTML.
  • You will learn how to style HTML elements using tag, class, and id selectors in CSS.
  • You will learn how to integrate icons into a navigation bar.
  • You will learn how to build custom fonts into your websites using HMTL/CSS and Google Fonts.

Requirements

  • A text editor - I use Visual Studio Code here.
  • A web browser - Chrome, Safari, Firefox or Edge
  • An understanding of how to write HTML and CSS and how to view local pages in the browser
  • Access to an Internet connection and the websites:

Difficulty

  • Basic/Intermediate

Tutorial Contents

Welcome to this, the first part of a two part instalment on how you might like to go about creating yourself a portfolio website. Granted, everything here is a suggestion, and the site being created is fictional, but you could certainly apply the skills you will acquire to many different templates.

Before we get to far into the tutorial, you should look at the final outcome for this part. The image below will give you an idea of the navigation and header we will be creating:


Final Product

Part 1 - Final Render

This tutorial can be further broken down into three parts:

  • Getting prepared (Folder structure and collecting assets).
  • Creating the page structure (Writing the HTML).
  • Generating the styles (Using CSS).

Let's get started:

Initial Preparation

Before writing any code, I like to prepare myself by having the folder structure for my project in place and collecting any assets (images, fonts, icons, etc) I think I will be needing for the project.

I know that for this project, I will be using CSS files and images, so I will be creating these folders within my root folder. Lets do this first:

  • In a location of your choosing (I used my Desktop for this example), create a root folder for your project. This is the folder where all other folders, files, and assets will be housed.

  • Give your root folder a meaningful name. I used portfolio-site for mine. You can pick anything you like.

  • Inside your root folder, create two more folders - name the first css and the second images. Note the use of all lower case letters here.

  • Using your text editor, create two new files - the first will be saved within the root folder as index.html and the second will be saved in the css folder as styles.css.
    The image below shows you how your folder structure should now look. You can see to the right of the open window, the name of the root folder on the desktop.


Folder Structure

Folder Structure

  • Now it's time to gather your assets for this tutorial. In the screenshot towards the top of this tutorial, you will see that you are going to require an image and a custom font. You are free to use any font you like and any image you like, but if you really want to follow this tutorial closely, then I used an image from Unsplash and the font Raleway from Google Fonts.

Download the image and save it as 1.png in the images folder. We will look at how to link the font in a later section.

Now that's pretty much it for the initial set up. In the next section, you will see how to generate the HTML required for the site.

Writing the HTML

  • If it's not already, open the index.html file in your text editor and link to it in your preferred browser.

  • You want to begin with the basic document structure. This is the minimum amount of HTML you should use for your webpages to be compliant. They would still render to a browser without a lot of the basic document structure, but this is not a good practice to get into. In your index.html file, write the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

You can change the <title> of the document to be anything you like. I've simply used 'My Portfolio'.

  • The first HTML you will enter is going to describe the navigation bar. We are going to be putting in all the classes and id's that we will later be referencing in CSS, so make sure that you include all of them too. It is important, again, to note that all lower case lettering is not done by accident. Enter the following between the opening and closing <body> tags:
<body>

<div id="container-nav">
    <nav>
      <a class="link-item" href="#">Home</a>
      <a class="link-item" href="#">Social</a>
    </nav>
  </div>

</body>

Essentially, all you are doing here is creating a container <div> to house the navbar in. We are doing this for styling purposes later on. The <nav> tags nest the nav items, and are new to HTML5. While you could just as easily have built this using <div> tags, it is much easier and better practise to use these newer tags. You can read about them at the Mozilla Development Network or MDN.

Your unstyled navbar as it renders in the browser looks like this:


Unstyled Navbar

Unstyled Navbar

  • The next step is to create the section under the navbar. This is commonly referred to as a hero section - the place where you can really express who or what the site is about. Much like the navbar, this part of the page has been wrapped in a <div> tag for styling purposes later, and we have used the HTML5 <section> tag for embedding the rest of the elements. Type the following HTML into your text editor, between the closing div (<div>) of the navbar and the closing body (</body>) tag:
<div id="container-section">
      <section>
        <img id="image" src="images/1.png" />
        <h1 id="title">My Portfolio</h1>
        <div id="information">
          <h3 id="sub-head">Welcome to my portfolio. Scroll to see examples of my work.</h3>
          <p>Why not join the experience and get interesting conted delivered straight to your inbox?</p>
          <input id="input" type="text" placeholder="Enter your email" />
          <input id="button" type="button" value="Submit" />
        </div>
      </section>
    </div>

Your rendered page will look like the following when you refresh your browser window:


Final HTML

Render After All HTML Inserted

You will notice that the heading tags render as bold, and that the image is quite large. It's not very pretty at all, but we are going to fix all of this in the next section.

Your index.html should currently look like the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
</head>
<body>
  <div id="container-nav">
      <nav>
        <a class="link-item" href="#">Home</a>
        <a class="link-item" href="#">Social</a>
      </nav>
    </div>
    <div id="container-section">
      <section>
        <img id="image" src="images/1.png" />
        <h1 id="title">My Portfolio</h1>
        <div id="information">
          <h3 id="sub-head">Welcome to my portfolio. Scroll to see examples of my work.</h3>
          <p>Why not join the experience and get interesting conted delivered straight to your inbox?</p>
          <input id="input" type="text" placeholder="Enter your email" />
          <input id="button" type="button" value="Submit" />
        </div>
      </section>
    </div>
</body>
</html>

Fix any errors you see and make sure it renders in a browser correctly before moving on to the next section.

Styling with CSS

In this section, you will be applying some CSS to make your portfolio look much better than it currently does.

  • If it isn't already, open your styles.css file in your text editor (keep the HTML file open also, as we will be tweaking it along the way).

  • Switch back to your HTML file - we need to do a couple of house keeping things before proceeding. We need to link the stylesheet to the HTML file so that the styles we write are applied to the elements correctly, and also link to the custom font we are going to apply. Finally, we are going to link to a file called normalize.css. This will remove a lot of the pre-formatted styles that the browser automatically renders from the untouched HTML elements. Using a normalising file is a good habit to get into as it ensures all of your CSS rules are applied consistently.

  • To link the stylesheet, we will be placing a <link> tag within the <head> section of our HTML file. The link is a self-closing tag, meaning that it doesn't have a dedicated closing tag like many of the other ones.

Underneath the second <meta> tag, place the following line:

<link rel="stylesheet" href="css/styles.css" />
  • You will need to download the normailze file from a website before linking to it in your HTML file. We are going to be using one from: Normalize.css. Simply download the file and place it in your css folder.

Use the following line, above your previous link:

<link rel="stylesheet" href="css/normalize.css" />
  • Now head over to grab the font you chose from Google Fonts. Remember I used Raleway, but you can use anything you like. We need to place a link to that font in our HTML document as well.
    You can put that under your two link tags:
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet" />

Your HTML <head> section should now look like this:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/styles.css" />
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet" />
  <title>My Portfolio</title>
</head>

You will notice that if you refresh in your browser, the normalise file has removed a lot of the padding from around the elements, but other than that, it still looks similar to before. Now, we will begin to see some fairly drastic (yet nice) changes.

  • Switch to your css file now, and begin by changing the font family of the entire document. Type the following into your css file:
html {
  font-family: 'Raleway', sans-serif;
}

Refresh your browser and you will see that the font has changed across the entire document. Note: you could choose to use more than one font, but do so sparingly. Not more than two fonts per website is recommended, otherwise your document becomes too difficult to read.

  • The navbar is the next item to style, so type the following into your css file:
#container-nav {
  background: #333;
  height: 4rem;
  width: 100%;
}
nav {
  background: #333;
  height: 4rem;
  display: flex;
  align-items: center;
  max-width: 60rem;
  margin: 0 auto;
  justify-content: space-between;
}
.link-item {
  color: white;
  padding-right: 1rem;
  text-decoration: none;
  font-size: 1.5rem;
}

Providing you have typed all of this correctly, and refreshed your browser window, your navbar should be looking significantly different. See the screenshot below, and if your navbar doesn't look the same, check your code before moving on:


Styled Navbar

Styled Navbar

The final thing to do for this part of this tutorial is to style the hero section. We will break this portion down into more manageable chunks so that you don't get lost. I will provide the code you will need and the a screenshot of what your rendered site should look like. If your site doesn't look the same, check your code, fix any errors, and render again.

First the background:

#container-section {
  background: #999;
  width: 100%;
}
section {
  background: #999;
  padding: 50px 0;
  max-width: 40%;
  margin: 0 auto;
}

Which renders:


Styled Hero Background

Styled Hero Background

Next is the image:

#image {
  display: block;
  width: 20rem;
  border: white solid 5px;
  border-radius: 50%;
  margin: 0 auto;
}

This renders the following:


Styled Hero Image

Styled Hero Image

We style the text next. This includes the headings and the paragraph test:

#title {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 5rem;
  text-align: center;
  color: white;
  margin: 50px 0 0 0;
}
#sub-head, p {
  text-align: center;
  color: white;
}
#sub-head {
  font-size: 1.5rem;
  font-weight: 300;
  border-top: white solid 1px;
  border-bottom: white solid 1px;
  padding: 10px 0;
  margin: 10px 0 50px 0;
}

And you should see a render like the one below when you refresh your browser:


Styled Hero Text

Styled Hero Text

Finally, the form elements will be styled. As with everything, the colour of the button you entirely your choice. Remember, I am simply trying to give you an idea of how you might like to create a page such as this!

#input, #button {
  display: block;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  height: 50px;
  border-radius: 5px;
  font-size: 1.2rem;
}
#input {
  margin: 20px 0 10px 0;
}
#input:focus {
  outline: none;
} 
#button {
  color: rgba(85, 4, 122, 1);
  border: rgba(85, 4, 122, 1) solid 2px;
  background: none;
  cursor: pointer;
}
#button:hover {
  color: #999;
  background: rgba(85, 4, 122, 1);
  border: #999 solid 2px;
}

Those elements will render as below. If you hover over the button, you will see that it changes to let the user know that they are on a button.


Styled Hero Form Elements

Styled Hero Form Elements

Thanks

That concludes the first part of the series of building a portfolio site. You can feel free to comment below, or ask any questions you may have. I'm not going to include the final code here - you can get that form Githubperview.png
 if you wish.

I hope you have found some of the techniques here useful and that you will be able to apply them to your own projects. I'm always happy to see what you have produced, so please, feel free to include links to anything you have created.

Again, thanks for reading, and keep an eye out for Part 2 coming in the next week or two.

Oh, One Last Thing...

As a bonus, I thought I'd show you how to use an icon instead of the word' Home' in the navbar. This is quite simple to do, but has a couple of steps. Probably the biggest of which is finding a good icon repository.

In my opinion, Font Awesome is one of the best free repositories around, and this is where we will be getting our home icon (and any other icons we use) from for this site.

  • Head over to Font Awesome and navigate to the Get Started page. You want to copy the <script> link form the CDN section (dark grey background) of this page.

  • Once you have this copied, go back to your HTML file, not the CSS file and paste it in the <head> section, just above the <title> tag.

Your <head> section will now look like the following:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/styles.css" />
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet" />
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
  <title>My Portfolio</title>
</head>

To apply an icon, we only need to add in one line of code to our HTML document. Once you find the icon you want using the icon search on the Font Awesome website, you can apply it in the HTML file. I simply removed the word Home from the relevant link in the nav section and pasted in the following:

<i class="fas fa-home"></i>

So my nav section now looks like this:

<nav>
   <a class="link-item" href="#"><i class="fas fa-home"></i></a>
   <a class="link-item" href="#">Social</a>
</nav>

And you can see that your icon has now been applied n the browser in place of the word you had earlier:


Icon Applied

Icon in Navbar

Again, thanks for reading, and I'll see you next time!


Posted on Utopian.io - Rewarding Open Source Contributors

#html #css #coding
8 years ago in #utopian-io by
$0.11
  • Past Payouts $0.11
  • - Author $0.08
  • - Curators $0.03
5 votes
Reply 4
Sort:  
  • Trending
    • [-]
     8 years ago 

    Excellent tutorial, well done.

    Don't be discouraged by not getting the approval from Utopian. The tutorial is nonetheless a great contribution :)

    $0.04
    • Past Payouts $0.04
    • - Author $0.03
    • - Curators $0.01
    1 vote
    Reply
    [-]
     8 years ago 

    Thanks for the encouragement @cutemachine - I don’t think a can be too disappointed as the reason I was not approved this time, had not been an issue in the past. I don’t know if they changed the rules or I just got lucky one time, but I’ll keep learning and keep pumping out quality tutorials that people can learn from.

    $0.06
    • Past Payouts $0.06
    • - Author $0.05
    • - Curators $0.01
    1 vote
    Reply
    [-]
     8 years ago 

    That's the attitude​ :)

    $0.03
    • Past Payouts $0.03
    • - Author $0.03
    • - Curators $0.00
    1 vote
    Reply
    [-]
     8 years ago 

    Your contribution cannot be approved because it does not follow the Utopian Rules.

    • HTML and CSS do not have github repository unfortunately and I am sorry to not accept this wonderfully crafted tutorial.

    • Please see this translation category rule:

    If you create a GitHub repository with additional material (like code samples), make sure to choose the repository of the project your tutorial is about and not your own repository. You can provide links to your repository in your post.

    You can contact us on Discord.
    [utopian-moderator]

    $0.00
      Reply

      Coin Marketplace

      STEEM 0.04
      TRX 0.33
      JST 0.099
      BTC 64787.20
      ETH 1870.98
      USDT 1.00
      SBD 0.38