[Homepage] Plan and structure

[igorsimb]

• [x] Watch 3 Homepage design videos
  • [x] Why is THIS the Perfect Homepage? by Wes McDowell
  • [x] Perfect Homepage Design Explained (in 15 minutes)
  • [x] Perfect Landing Page Design Explained (in 5 minutes) Also, see figma file
• [x] Take screenshots from videos to copy the designs
• [x] Watch this video (This AI Tool Converts Figma to Code in ONE Click), see if this is applicable to me

  The result is pixel-perfect replication of the figma design. Downside is that it's 550+ lines of HTML and 1800+ lines of custom CSS. I think I can do better manually.

• [x] Google "Bootstrap Homepage Template" (not needed, using figma design)
• [x] Pick 3-4 to choose from (not needed, using figma design)
• [x] Create a sketch of the homepage in https://excalidraw.com/ or similar (not needed, using figma design)
• [x] Create a new branch for it

Use this video for a checklist of UI design.

Sections

• [x] Create a sceletal grid for the page
• [x] Navigation
• [x] Hero
• [x] Benefits/Features
• [x] Problem/Solution
• [x] Call to Action
• [x] FAQ
• [x] Footer
• [x] Replace specific divs with semantic HTML, as described in this video (nav, main, section, footer)

[igorsimb]

Why is THIS the Perfect Homepage? by Wes McDowell

Hero section

Problem/Solution Section

Benefits Section

Example of tesla.com's Benefits Section:

Features Section (tech specs)

FAQ

Direct Call to Action

[igorsimb]

Perfect Homepage Design Explained (in 15 minutes)

Hero and Benefits sections

Note that "Hook them for the scroll" is on the hero page

Problem/Solution

Call to Action

FAQ