Flexbox Crash Course

Instructions

https://www.youtube.com/watch?v=3YW65K6LcIA&ab_channel=TraversyMedia

https://www.theodinproject.com/lessons/foundations-alignment

Purpose

To build a responsive static webpage with a modern layout using CSS Flexbox as the primary layout method.

Preview

Technologies:

• HTML
• CSS Flexbox

Tools:

• Git
• Github

Outcome ☑️

I created a responsive webpage with a modern layout using CSS Flexbox.

Website	Link
GitHub demo	https://jaredbradley243.github.io/Flexbox-Crash-Course/

Summary

What I learned

1. How to create layouts using CSS Flexbox containers and items. How to align, position, and space elements using the Flexbox properties:
   

   • flex-direction
   • justify-content
   • align-items
   • flex-wrap
   • flex-grow
   • flex-shrink
   • flex-basis
   • align-self
   • gap

2. How to open links in a new browser tab by setting the target attribute of the <a> tag to _blank

3. How to protect against tabnabbing by using the referrerpolicy and rel attributes

4. How to create a responsive footer using CSS Flexbox

5. How to import and use multiple fonts in a CSS document

Customizations

• I added a responsive footer with a link to my Github page, with careful attention to protect against tabnabbing.
• I used Adobe Illustrator to remove the inherent border around the SVG image and modified the CSS to fix an alignment issue ignored in the tutorial.
• I imported Noto Color Emoji Google Font to use more attractive emojis.

What could be improved

• The webpage is static and used only for demo purposes. Adding additional pages and user interaction would improve this project significantly.
• Create a backend using Django or Express to make the project a little more interesting.