In this module we start working on the final project. If you are taking CSCI1450, the final project is the capstone project of the course. This week we will learn how to make a simple logo and learn how to style the navigation.

Final Project 

If you are taking CSCI1450, a final project is required. Lab 13, 14, and the Final Project will be the same website.

• Lab 13: Make a logo and create a first draft of your Final Project. 
• Lab 14: Publish the website to Github Pages or to your domain. 
• Final Project: Ongoing work to polish the website design and code quality with the checklist.

Most students will make the portfolio website their final project, and publish it to Github Pages. However, if you would like to make a website on a different topic, use Lab 13 to make your first draft.

Review these documents to learn about the final project.

• Final Project Description
• Final Project Checklist

I created a sample final project featuring the mythical student Sharp Toes to give you ideas for your Final Project. 

A good way to start your final project is to draw out how you want your home page to look on paper.  Find paper and pencil, and layout the header, rows and columns, and the footer for your home page.  You can also use software to create a draft website. Professional designers may use PhotoShop or Illustrator to make the prototype. On a computer, I generally use a slideshow program for prototyping.

How to Make a Simple Logo

Before we jump into making a logo, let’s consider what we need to do with a logo. Logos are an important part of a company’s brand. There are professional logo designers that charge up to a couple thousand dollars for an original logo.

When you create a logo, you need to consider various places where you will need to place the logo. The sizes and aspect ratios needed will vary.  Let’s take a look at the General Mills logo to see what they are using:

One technique you see in logo design is to have an icon plus some text. That way the company can use the icon for social media and for the favicon, and show it with the text on their website and products. 

For a logo for a website, you need to make a logo that is rectangular in shape. Here are some website logos:

Note that If your logo includes an icon image, then you have your favicon/icon built in. Notes that all of these logos images have very simple designs. Photos do not work for logos. You need a simpler image for a logo.

To find an image, go to Pixabay.com, and choose Vector Image or Illustration from the dropdown. 

With all of that background on logos, now it is time to try it yourself. Watch this video on how to put together your icon image with text in a slideshow editing program.

Demonstration Video: How to Make a Simple Logo

Exercise: Make a Simple Logo

• Find a transparent logo image on Pixabay.com.
• Create a new Slideshow in drive.google.com.
• Drag your image into Google Slides and resize it.
• Add your name or website name.
• Use a white background or the color you plan to use for your header.

You will use the logo you make in Lab 13.

Once you create your logo, you need to snip it out of Google slides. Snip it out carefully with minimal white space around it. You can add white space in code with padding or margin. You may need to crop it further with Mac Preview or Paint 3D.

Mac: Command Shift 4. The file will be saved to your default location, perhaps your desktop.

Windows 7: Snipping Tool

Windows 10: Snip and Sketch (Windows Shift S), then when in the Snip and Sketch, save the file.

Give your logo a file name like, “logo.png” and move it into the images folder for your portfolio project.

Transparent Logos and Background Color

A transparent PNG logo doesn’t have a background behind it.  Transparent PNGs make the best logos, because they can be used on any color.  Making transparent images is outside of the scope of this class and requires software like PhotoShop or Illustrator. In the image below, the dog is transparent.

If you want to have a background color other than white, you can make the logo in the background color you plan to use on the website header. Use the same hex number when creating the background for the logo that you use in the website header. 

Styling the Navigation

The header and navigation is probably the most important part of your website. It appears on every page, and it needs to look great. 

Keep the navigation and header fairly short and less than 2 inches. This is important because it appears on every single page, and you want plenty of space left to let the website visitor to know what each page is about.  See Design Rule #9

Centering the Navigation and Logo

Since a student portfolio website is a fairly small website, it may work best to center the logo and the navigation. Here is the some CSS for centering your logo and navigation:

/* This code centers the logo in the header */
header img{
   margin: 0 auto;
   display: block;
}
/* This code centers the navigation bar *?/
nav ul{
   text-align: center;
}

Remember that to center an image, you need to change it from inline to block and set the left and right margins to auto. 

Logo on the Left with Navigation on the Right

To keep the website header and nav shorter, many website place the logo on the left and the navigation on the right. Here is the code for that layout:

/* Float the logo to the left side. The margin on the left side will vary based on your logo */
header img{
   float: left;
   margin-left: 20px;
}
/* Place the navigation on the right. Use the padding to align the navigation.  */
nav ul{
   text-align: right;
   padding-top: 30px;
   padding-right: 20px;
}

The result will look something like this:

Navigation Bar Gradients

You can use a gradient to give the nav bar more depth. Simply Google CSS Generator Gradient, and you will see a lot of options.  Here is one gradient option: https://cssgradient.io/

Navigation Buttons

Instead of a navigation bar, you can make navigation buttons.

Step 1: Style your buttons (select nav li) with background color and perhaps a border-radius and border. You may also want to add some padding to make the buttons larger. If you use 50px for the border-radius, you will make nicely rounded buttons.

Step 2: Style the buttons so that the button background color changes when the user hovers over it.  

nav li{
   display: inline;
   background-color: #c6c6c6;
   padding: 8px 10px;
   border-radius: 50px;
}
nav li:hover{
   background-color: #dddddd;
}

The result will look like this:

Bootstrap Navigation for Dropdowns and Mobile Menus

The Bootstrap navigation is a more complex menu, and uses JavaScript to display a hamburger menu for mobile. It also has built-in code for dropdown menus. 

• Hamburger Menu on Mobile
• Dropdown Menu styles

If you are making a website for a business with more than 4 pages, you may want to use the Bootstrap navigation. 

The instructions to make a Bootstrap Nav Bar are in a separate slideshow: Bootstrap Navigation Instructions 

Lab Assignment

The lab assignment for this week is to create a first draft of your final project website. Here are the instructions: Go to Lab 13