Day 4: Flexbox Navigation

Reminders for Tony

  1. Put on mic
  2. Open Zoom chat
  3. Record! Anyone else?

Prep

Lecture: Flexbox navigation

Example Flexbox Navigation

Learning the flex shorthand property:

  • flex-grow
  • flex-shrink
  • flex-basis

Live-code Objectives

  1. Conventional navigation HTML structure.
  2. Resetting default list styles.
  3. Using the flex property for horizontal navigation.
  4. Using the box model to make our links more “buttony”

Activity:

You will be working in pairs. Find examples of primary navigation online and try building your own navigation bar for your project.

  • What are the common links?
  • Where are they usually located on the page?
  • Are there any components you can add to your navigation?

Lecture: Pseudo-selectors and HSL

Adding rollover and click effects with :hover and :active. HSL (Tony’s favourite color mode) will help us keep things pretty.

Live-code objectives

  • Choosing color components for our effects.
  • How many ways can we add feedback to our navigation bar?
    • Adding an underline on hover.
    • Change background-color (with a matching color) on click.

Activity 2

You will be working in pairs. Find examples of hover and click effects online. Are there any effects you can add to your navigation?

Mid-day Huddle

  • who needs help?
  • any pivots?
  • any show-and-tell?

[lunch]

Taking off the Codepen training wheels

The objective this afternoon is to migrate the Codepen of your current project onto your file system.

Objectives

  1. Choose a location on your files system to store your CPRG 210 projects.
  2. Create a new folder for the web page you’ve been working on so far. This is where we will be storing our eventual website.
  3. Create an index.html file in the root of this directory and move your Codepen code into this file:
    • HTML panel -> inside the <body> tag
    • CSS Panel -> inside a <style> just before the closing </head> tag.

Naming conventions (for reference)

  • Files should be named consistently
  • File names should be short but descriptive (<25 characters)
  • Avoid special characters or spaces in a file name
  • Underscores or hyphens instead of spaces
  • Use lower case characters when possible
  • Default file name/location for html: /index.html
  • Default file name/location for documentation README: /README.md
  • Wfor when eventually move our embedded CSS and JS into linked files:
    • Default file name/location for css: /css/styles.css or /css/main.css
    • Default file name/location for js: /js/app.js or /js/index.js

[break]

Activity: Creating our local project

You will be working in teams. By the end of the day you should have a complete and working index.html to start off our Git journey in the next class.

[summary]

  • any trophies?
  • prep for tomorrow?
  • applause