redi-planning-may-4-2023.md

ReDI planning

• Final project planning:
  • What should the project be?
    • Portfolio site
      • Showcase what you can do, have a section with projects where they can include CodePens, pages, etc.
    • Website for a local business
    • Give them options - try X or Y or whatever else
    • Let's just say "Portfolio or Local business" so that they don't feel overwhelmed, but if they have an idea and come to us about it that's also fine
  • Should we teach them how to use Git + Netlify to make websites available online?
    • Let's avoid introducing Git/hub and use W3 schools hosting instead https://www.w3schools.com/spaces/
  • When we first start the project planning, let's do some paper prototyping and make sure they have a good place to start
  • Should we have them in groups or pairs?
    • Elena: Option to work in a group of two people?
    • Matt: leaning towards individual because sharing code gets messy and also we want to avoid some students doing lots of work and some doing nothing, maximizing
    • We'll do individual projects
  • Homework for the project start session: decide on an idea, possibly sketch it on paper? Plus some grid practice
• Session planning:
  • Let's categorize remaining topics into "things we should tell them before the project and things we can sprinle in later"
  • Things to do before project start:
    • Responsive design + responsive images
      • Responsive/relative units (%, em/rem)
      • Thinking about how layout will change (without actually showing the tools for doing it, but things like stacking on mobile)
      • Images w/ containers, % widths
      • Recap on box model, flex, centering images in container
      • Flex grow/shrink?
      • Images: fit, background, centering
    • Media queries
    • Position: absolute/sticky/etc.
      • Demo w/ responsive design and fixed header on mobile
      • Maybe also add some material about images here
    • Grid
      • Compare with Flex, things like alignment of rows/columns
      • Live code and show different ways to achieve same result
      • Possibly then show something that is really difficult to achieve with flexbox and do it with grid
  • Things to sprinkle in later:
    • Accessibility
      • Use the right HTML elements
      • Use alt for images etc
      • Color contrast
      • Attributes
      • Lighthouse tool
    • Animations & Transitions
    • Best practices + inheritence & specificity
      • Tie together "browser will read XYZ first so that's why we might want to do it this way"
      • This can be both developer best practices and best practices for a user!
      • Think about when naming a class or id: "Will you know what this means in a year?"
    • Stuff we didn't cover
      • Frameworks ("this is what you might see in the future")
      • How to put a site online (W3 schools makes this pretty easy)