https://www.youtube.com/watch?v=3YW65K6LcIA&ab_channel=TraversyMedia
https://www.theodinproject.com/lessons/foundations-alignment
To build a responsive static webpage with a modern layout using CSS Flexbox as the primary layout method.
I created a responsive webpage with a modern layout using CSS Flexbox.
Website | Link |
---|---|
GitHub demo | https://jaredbradley243.github.io/Flexbox-Crash-Course/ |
-
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
-
How to open links in a new browser tab by setting the target attribute of the <a> tag to _blank
-
How to protect against tabnabbing by using the referrerpolicy and rel attributes
-
How to create a responsive footer using CSS Flexbox
-
How to import and use multiple fonts in a CSS document
- 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.
- 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.