In this module we are first going to cover some important skills, like using keyboard shortcuts, properly indenting our code, and adding code comments. Then we will dive into some positioning concepts like the display and float properties. Most importantly, in this module we will cover how to properly create navigation for websites using an HTML unordered list.

Keyboard Shortcuts

Coders use keyboard shortcuts, and you need to learn them to work efficiently. When working in HTML and CSS you will find yourself copying and pasting code. 

A lot. 

If you don’t want to learn the shortcuts for efficiency, then learn them in order to successfully interview for a programming job. In an interview, if you were to right click to copy instead of using the keyboard shortcuts, you would make a poor impression on the developers interviewing you. There are more shortcuts than are listed here, but these are the ones I use most often.

Windows: Hold down the CTRL key then click 

Mac: Hold down the Command key (⌘) then click:

• X to cut
• C to copy 
• V to paste
• S to save
• R to refresh
• Z to step back

Copy and Paste Exercise

Copy this list to text file. Place the list in order alphabetically using the keyboard shortcuts. (If you already use the keyboard shortcuts, then skip this exercise.)

• Sperm whale
• Killer whale
• Pilot whale
• Humpback whale
• Chimpanzee
• Orangutan
• African elephant
• False Killer Whale
• Gray whale

One more important way to speed up your work is to set up your work space like the image below:

Each time you change your code, save it quickly with Command or Control S, then click on the browser and type in Command or Control R to refresh the browser. It will speed up your work.

Indenting Code and Code Comments

Why do we need to indent our code?

If you were to ask a developer for help with your homework, the first thing she would do before helping you would be to indent your code. Developers you work with will expect indented code. In class we are making code that could be presented to your potential employer. Employers will require code to be indented. In fact, your employer will likely have specific rules on how to indent.

If something is broken in your code, start by cleaning up the indenting. It makes it easier to see what is broken. Keep in mind that the browser doesn’t care if you indent your code properly. The indenting is for human developers, not for the browser.

Unless you have been instructed to indent your code in a different way by an employer or instructor, indent it as shown below. This is the most common way to indent code.

For the labs we do at this stage in class, indenting may not seem terribly critical. However, for a business website, it wouldn’t be surprising to have <div> tags that are nested a dozen times or more.

HTML Indenting

There is some controversy over whether it is better to indent your code with spaces or with tabs. I have always used tabs to indent. Your employer is likely to have their own rule for indenting.

<main>	
   <p>This is a paragraph</p>
   <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
   </ul>
</main>

CSS Indenting

I almost always see CSS code indented like I have shown below. Unless you have instructions from an employer or another instructor, use this indenting style.

img{
   margin: 0 auto;
   color: purple;
}

Website Comments

Comments are where you speak to other developers and give yourself reminders. They are not displayed to website visitors. Adding comments is important for code you will show an employer. An employer will look for thoughtful and succinct comments to judge your communication skills.  

How you make code comments is different in HTML and CSS. After all, they are two different languages.

HTML Comment Example:

<!-- This is a comment -->

CSS Comment Example:

CSS comments are similar to other programming languages; however, you can’t use the // in CSS to comment out a line. You must use /* */.

/* This is a comment */

Demonstration Video: Indenting and Comments

Exercise: Indenting and Comments

Correct the nesting and indenting on your website code and add an HTML and a CSS comment. For the Pacific Trails lab, we added a hero images using a background image. It may not be clear to another developer why you added the code : <div id=”home-hero”></div>, so that would be a great place for a comment.

• Add an HTML comment <!–This is the div for the hero image –>
• Add a CSS comment /* This is the CSS for the hero image */

The CSS Box Model

There are two types of white (negative) space: padding and margin. The padding is inside of the border, and the margin is outside of the border.

As a web developer I spend a lot of time adjusting padding and margin in order to have nice alignment on my web pages. To find the margin and padding to adjust, use the Chrome Developer Tools. Hover over the HTML to see the margin and padding. The padding is shown in green and the margins are shown in salmon (light peach).

Demonstration Video: The Box Model

Exercise: The Box Model

1. Find an icon-sized small image url on Google images or use this image: https://www.catsaroundtheglobe.com/wp-content/uploads/new_kitten.jpg
2. Put it in JSFiddle in an <img> Remember that the code for an image looks like this. <img src=”” height=”” width=”” alt=””>
3. Add border, padding, background-color and margin to your image in the CSS

Your JSFiddle should look something like this:

Normal Flow

Normal flow is the way that elements are displayed in a web page in most circumstances. Unless you change the normal flow with CSS, items will display in the order of the HTML.

In the Nested <div> example below, the red div opens and closes inside the blue div. The red div is INSIDE of the blue div. In the Not Nested example, one div closes before the other div opens. They stand next to each other.

Part of why it is so important to indent your code is so that you can see how the elements are nested. By adding an indent each time you place an element inside of another element, it is easier to keep track of where your elements start and stop, and make sure that you have nested your elements correctly.

In the Pacific Trails lab, there is an excellent example of nested elements.

<body>
<div id="wrapper>

<!--everything else goes inside of the wrapper-->

</div>
</body

What this code does is allow is to style the body differently than the <div id=”wrapper”>, giving the website a page on a background look. The wrapper is nested inside of the body of the website.

The CSS display Property

We briefly covered “display: block” and “display: inline” in Module 4. Now we are going to learn about two additional display values: “inline-block” and “none”.

display: inline

The default width of element content is full width of its containing element. The example at right with a red border is an <h1> with the default value of display: block.

display:block

The border closely outlines the element content. In the green example at right, the default display value of block for an <h1> is overridden with the value of inline.

display: inline-block

Inline-block is a cross between inline and block. The margin and padding works differently, so sometimes inline-block behaves better. (We use it in the lab assignment for this module.) CSS Tricks has a great article on inline: block: https://css-tricks.com/when-do-you-use-inline-block/

display: none

display:none hides the element. This is used when you don’t want an element to appear. But why would you want an element to not appear? Why not just take the element out of the html? display:none can be used to create a different layout for desktop and mobile. (More about this in Module 6). In addition, when working in a content management system, like WordPress, you may not be able to access the HTML, while you can access the CSS. If the content management system layout has a section you don’t like, you can make it disappear with display:none. (As a web developer, I use it all the time.)

Demonstration Video: Making HTML Elements Disappear

Exercise: Making Elements Disappear

Add display:none to your img selector. What happens? 

Remove display:none to bring the image  back.

Your JSFiddle may look like this:

The CSS float Property

Use the float property to move elements to the right or to the left. The other elements will “float” around the floated element. In this example, the image is floated to the left, and the text wraps around it.

The code would look like this.

img{
   float:left;
}

Demonstration Video: float

Exercise: float

Add the placeholder text at the right to your JSFiddle. Place it in <p> tags underneath the image. Here is some placeholder text you can use:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(What is placeholder text? When web designers are working on a layout but don’t have the final copy yet, they place the “lorem ipsum” text where the final text is meant to go.)

Float your image to the right of the text: float:right

Change the image to 50 x 50 pixels

<img height=”50″ width=”50″…>

Your JSFiddle should look something like this:

CSS Property: box-sizing

When laying out images and text, you will usually override the default setting for box-sizing. The default is box-sizing: border-box, and the setting that will probably feel more natural to work with is box-sizing: border-box. As you can see in the image below, this CSS is used to set the width and height properties to include content, padding and border, but not the margin. Make a mental note of this because it is in the lab assignment.

Advanced Selectors

First a quick review. What is a selector in CSS? The selector selects the HTML.

Using “*” as the Selector

So far we have used the HTML tag or a class or id as a selector. You can also use “*” an asterisk as a selector.

Why use * as the selector instead of simply selecting “body”?

When you use body as the selector, the elements will inherit the CSS. When you use * as the selector, it selects everything directly instead of through inheritance.

The code looks like this:

*{
    display:none;
}

Note that the * is placed where the selector is place in the CSS. By the way, if you added this code to your website, what would happen?

Descendent Selector

The SPACE is the descendant selector.

Example: 

nav a{
    text-decoration:none;
}

In English: 

“If there is an a tag inside of a nav tag, then apply this CSS”.

There are more selector options, and you can see them all at W3Schools:

https://www.w3schools.com/css/css_combinators.asp

Navigation in an unordered list

Navigation is a list of links. Because it is a list, web developers put navigation into an unordered list. After we go through how to set up the menu in the HTML, then we will cover how to write the CSS to make it all work together. Last but not least, we’ll cover how to color your navigation with pseudo classes.

The HTML for a navigation looks like this:

<nav>
   <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul>
</nav>

Why would we want to use a bulleted list for a navigation? 

When coding websites, developers always use the <ul> element, which by default is a bulleted list. Because an unordered list displays as a bulleted list, there are a host of CSS changes that must be made for the navigation to look like a navigation instead of a bulleted list. So, why not just make some anchor tags for the menu?

The reason why is that a menu is a list. A list is several items in a relationship, and coding the navigation as a list helps the browsers to interpret the list of links as a grouping. Browsers expect to find the navigation in the <ul> element and each menu item in <li> tags.

There are several steps involved, involving changes to the HTML and the CSS. Lets make the changes first in JS Fiddle, and the you can move it to your template. Because there are several steps involved and not all of them are intuitive, you will want to keep this code in your website template.

Demonstration Video: Vertical and Horizontal Navigation in an Unordered List

Exercise: Step 1 – Change navigation to an unordered list.

Open JSFiddle.

Change this navigation list into an unordered list with the <ul> and <li> tags. Copy the following text to the JSFiddle to get started:

<nav>
  <a href="index.html">Home</a>
  <a href="menu.html">Menu</a>
  <a href="directions.html">Directions</a>
  <a href="contact.html">Contact</a>
</nav>

Change this code to an unordered list, by adding the <ul> tags around the links, and the <li> tags to each list. Your JSFiddle should look like this. Note that we have bullets we need to remove with CSS, and the default underlining isn’t a good look for a nav bar. We fix that in Step 2.

Exercise: Step 2 – Add CSS for Vertical Navigation

As you can see, we need to make some changes to the navigation in order to change the default settings of an unordered list. We need to do two things:

1. Remove the bullets from the list. Use the descendent selector of nav ul, with the property-value of list-style-type: none.

2. Remove the default underlining. Use the descendent selector nav a, with the property-value of text-decoration: none. 

Your JSFiddle should look like this.  This is how you would code a vertical navigation. Most websites use horizontal navigation, so we’ll do that next. 

Exercise: Step 3 – Make the Navigation Horizonal

1. Add a new descendent selector nav li and set the property:value to display: inline. 

2. Add a second property value to your existing nav a selector to add 10px of padding to the right side.

Your JSFiddle should look something like this:

CSS Pseudo Styles for Navigation

So, we have one more important step to do with navigation. We need to add colors to the navigation with pseudo-classes.

A pseudo-class is used to define a special state of an element. For example, when you hover with your mouse, that would be a special state. Here are the four states that we need for links: 

• link – default state for a hyperlink 
• visited – a hyperlink that has been visited
• hover – triggered when the mouse moves over the hyperlink
• active – triggered when the hyperlink is being clicked

These four pseudo classes must be in this order.

Interested in why? I have this in the FAQ: https://webdevstudents.com/modules/module-5/#faq 

For a website navigation, it works best if you make the link color the same color as the visited color. If you have a list of items that your website visitor is going to click on and read, then add a different visited color so that users can know which links they have visited.

The code for you navigation looks like this:

Note that there is no space in between the a:link, etc. If you add a space, the pseudo class won’t work.

Demonstration video: Styling the navigation with pseudo classes

Exercise: Styling the navigation with pseudo classes

Add the pseudo classes to your JSFiddle. Your JSFiddle should look like this:

Hover over your menu items to make sure they change colors.

Exercise: Add Navigation Code to your Template

As you can see, there are several steps to creating a menu, and each of these steps is not intuitive. Copy your navigation from your JSFiddle into your website template, so you will have this code handy next time you need to make a website.

The CSS positioning Property

So far we have used the default setting of position: static, which is normal flow of the website, where each object is placed after the one before it. We can disrupt that normal flow by using some other positions.

position: static  Normal Flow

position: fixed The element is fixed in the browser viewport

position: absolute  Element is  fixed in its containing element

position: relative  Element is relative to where it would be in normal flow.

Fixed Positioning

Why would you use fixed positioning? 

Example 1: Chats use fixed positioning. Note that the chat stays in the same place even if you scroll.

(https://pdqurgentcareandmore.com)

Example 2: Website headers and navs sometimes use fixed positioning. This keeps the navigation in view while scrolling. This website uses fixed positioning on the navigation. 

(https://whitebuffalowebsites.com/)

Absolute Positioning

Absolute positioning is used when you want to display one element on top of another element.

See this example at W3 Schools:  https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

Here is a good tutorial when you need to use it:

https://css-tricks.com/text-blocks-over-image/

Lab

The lab assignment for this week is Pacific Trails chapter 6. (There isn’t a lab for Chapter 5.)

Frequently Asked Questions