SAIT Web Developer

Fast Track - Fall 2021

CPNT 260 Day 2 - Navigation and Responsive Page Design

Trophy of the day: 404 page with a site navigation

Review

  • Trophies from last class
  • Code debief

Assignment 1 - About Page and Simple Nav

  • Due: September 22 11:59pm
  • Assignment Link
  • Complete:
    • Create an About page that has text, images, and styling
    • Create a site navigation. Note this will be improved on throughout the following assignments.

Overview

  1. Plan it out
  2. Brute force
  3. Walkthrough
  4. Optimize/Test

Tool Time

  • Switching from codepen to vscode
  • Using head tag in html
  • Emmet plugin and autocompletion

Topic 1: Code Indentation and CSS Selector Nesting

Code Indentation

  • Indentation is very important, in some languages it's necessary for code to run
  • Any HTML elements that are within a container element must be nested inside using indents
    • You can use hotkeys to auto indent your code. This saves a lot of time

CSS Selector nesting

  • In bruteforce mode, it's normaly to add classes directly to elements
  • After everything works like you want, your optimization process should include removing redundent code
  • A good practice is to add a class to a parent element and then use nested selectors on it's children
    • nav.parent-class a {/* link styles */}

Responsive Fonts

Terminology

These css properties and values are especially useful for setting responsive fonts.

  • clamp()
    Use clamp to set minimum and maximum font size and the range that they increase and decrease by. ie: font-size: clamp(1.2rem, 2.5vw, 1.4rem)
  • text-align
    align text left, center, right, or justified. Mdn article.
  • max-width and min-width
    Both of these will override the width property. And min-width will override max-width.
  • rem
    rem units are equal to the font-size declared on a root element. 1 rem unit is equal to 16px. A px is 10times bigger than a rem.

Font size readings

  • If you are wanting to get more detailed with font-size, read this CSS-tricks article which shows how to use px, em, and rem together effectively
  • Read This css tricks article on using clamp based off viewport units

Font optimization Notes and Readings

Activity 1: Create a 404 Page

Topic 3: Site Navigation

  • Navigation should use a nav tag.
  • You can have more than one nav
  • It is conventional to put an unordered list inside your nav for links, but not essential
  • To link to content on the same page, add an id tag to the link location and specify it in your link
    • nav link = <a href="#link-on-page">Link</a>, then add the id to the element like: <h2 id="link-on-page">Text</h2>
  • To open the link in a new tab use target="_blank" in your link tag
  • A nav is often found inside a header or above a header. It depends on the site

Extra Reading

  • To add a list to a nav or not is discussed in this css-tricks article.
  • A footer navigation does not necessarily need a nav element: mdn article.

Walkthrough

  • Check for syntax errors
  • Fix HTML indentation
  • Plan CSS declarations cleanup

Better Colour Codes

  • using color tags such as red and rebeccapurple are good for quick planning
  • In production you will want to use hex codes or hsl()/hsla() for better color control
  • Hex code colors follow RGB values but notate them in hexadecimal numbers
    • For Example: the lighter red in the SAIT logo is #e12726 which means: red=e1 green=27 and blue=26
  • HSL() stands for Hue, Saturation, Lightness, add an A `hsla() to include opacity
    • This is a newer approach and gives better control of colors, plus browsers read them better for accessiblity

Optimize

  • Implement walkthrough changes
  • Validate Code
  • Deploy and Submit

Activity 2: A Web Page with a Nav Menu

  • You can use your 404 page as body content for this

Prep for next class

Extra Goodies: Terminal Tool Time

Check out these links if you're interested in expanding your knowledge and usage of terminal applications. The following configurations have helped me streamline my own workflow extensively.