CPNT 260 Day 3 Intro to Flexbox

Trophy of the day: A flexible design that includes user input

Review

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

Gist Notes for Review

• Flex Nav Bar
• Semantic Hierarchy

HTML and CSS Validators

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

• HTML Validator
• CSS Validator

Overview

1. Plan it out

• Solving design problems with flexbox

2. Brute force

• Position elements in Flex Containers
• Nesting flexbox containers

3. Walkthrough
4. Optimize/Test

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
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

• Tony's Flexbox header gist
  • Applied example of flexbox basics

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

• Ashlyn's Flexbox Codepen
  • Ignore the scss nesting for now, but we will be getting into that later in the program

Activity: Make a Page Layout with Flexbox

Topic 3: Simple Signup Forms

Basics of creating forms

Notes

• use form tag for using interaction
• input type="text" will create a 1 line input field
• input type="textarea" will create a text box
• label for="input-box-id" for your input fields
• button type="submit" will create a submit button

Resources

• Mdn Your first Form
  • For now we don't need to worry about sending form data to a web server.
• Smashing Magazine article on form usability

Activity 2: Designing a Signup page with flexbox

Walkthrough

• Code review
• Bug Hunting
• Discussion
• Comment and plan code changes

Optimize

End of Day Activity

• Implement changes noted in comments
• Validate Code
• Deploy and Submit

Prep for next day

• Read Mdn Media Queries
• Read Mdn Media Queries and Responsive Design
• Read FreeCodeCamp Article
  • Background theory
• Watch the first 10 minutes of Are you writing css the wrong way?
• Read Font Awesome Icons Basic Use
• Read CSS tricks: Complete Guide to Flexbox
  • While the mdn docs are important to read, this page has a very comprehensive and attractively formatted layout
  • Everything in purple is about flex containers
  • Everything in yellow is about flex items