Day 6 - Horizontal Navigation with Flexbox
Housekeeping
- Assignment 3: 404 Page Not Found
- Achievements Round 2 will be announced tomorrow;
- Marks released after lunch:
- CPNT-201 A2
- Achievements Round 1
- Marks (and spoilers) released Thursday due to deadline extensions:
- CPNT-260 A1
- CPNT-260 A2
1. Review: SVGs
Code Demo
Let’s build some custom dice!
Example: King of Tokyo
Tony uses SVGs and Flexbox to display the dice roller in this (work-in-progress) board game:
- Live demo: King of Tokyo
- Repo: king-of-tokyo-clone
2. Slides: Accessible Horizontal Navigation
Materials
Activity: Create a horizontal nav
Refactor the following navigation with Flexbox to make it horizontal:
Spoilers:
Lab Time
Activity: Make your own horizontal nav menu
Try to duplicate a horizontal navigation menu and banner using the above sample code.
Search for an example of a horizontal navigation menu online that you think you can duplicate.
- Which of the “horizontal menu” examples above best fit your selected menu? Are other Flexbox properties required to achieve the desired effect?
- How much
paddingneeds to be added to theaelement? - What colours are used? How do you find this information? What elements are the colours applied to?
- What other design elements are needed? What CSS properties are needed to create clickable links?
Activity: Play some learning games!
Learning games for Flexbox:
Prep
Reading list
Watch list
- Learn flexbox the easy way by Kevin Powell
- You can stop @11:13 but the rest of the video covers using flexbox with cards and columns;
- Flexbox vs. CSS Grid — Which is Better? by Jenn Simmons
- Flexbox design patterns you can use in your projects by Kevin Powell
Search list
- “flexbox patterns”
Digging deeper (optional)
- What the Flexbox!?!
- A 20-video course on Flexbox by Web Bos;
- Watch these videos if you want to learn more about Flexbox than what we cover in class.
- Learning games for Flexbox: