Web Developer Fast Track

Winter 2022

Flexbox Page Layout

Today's Activity: Navigation Bar

Review

  • links and pathnames
  • hierarchy
    • ul and headings
  • image width
  • syntax padding and spacing bugs

Gist Notes for Review

HTML and CSS Validators

Use These for your assignments and any code that you want to check.

Codepens from Wiki Activity

Morning Project Prep Breakout Sessions 20min

  • Instructions
  • we will have a group discussion afterwards on assets found. Everyone should be ready to show and discuss their design concepts.

Topic 1: Introduction to Flexbox

Create responsive and interesting designs with flexbox

Terminology

display
This property is used to set the layout of an element and its children. Read more in [this Mdn article](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
main-axis
This is defined by the `flex-direction`. If your flex-direction is set to row _(this is the default)_, then the main axis is horizontal. If your flex-direction is set to column, then the main axis is vertical. - items are set along this axis by using `justify-content`
cross-axis
This is the other axis of a flex layout. It changes depending on your flex-direction - Items are positioned along this axis by using `align-items`
### Notes

Topic 2: Position Elements in Flex Containers

Arrange a site's content

Terminology

flex container
: The parent element of flex items. A flex container can also be a flex item. Use properties such as `flex-wrap`, `flex-flow` etc to customize how the items in the container will be positioned and respond to one another.
flex item
: Children of flex containers. Use properties such as `flex-grow`, `flex-shrink`, `align-self` to customize how flex items look and function

Notes

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

Lab Time

Prep