The Odin Project---Landing Page

Instructions

https://www.theodinproject.com/lessons/foundations-landing-page

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/The-Odin-Project---Landing-Page/

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 imported Noto Color Emoji Google Font to use more attractive emojis.
• I used ChatGPT to write all of the sales copy.
• I based the website on an existing company, KSTech, founded by a good friend of mine. See https://www.kstech.com/ for all of your IT needs!

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.