Day 22 - Unique Landing Page (n.)⚡️
Creating a landing page with your own assets (⚡️BetterFriend Project Day 8 - 38)
Landing [lan-ding]
noun.
: the act of a person or thing that lands.
: a place where persons or goods are landed, as from a ship.
Quick Recap:
Stay in touch w/ Friends
We are building a simple v0.1 of BetterFriend app by using WhatsApp Chatbot to remind people their loved one’s birthday with AI.
First Impression
Websites have come a long way - they used just be texts. Then came colors. Then images and videos and now even fancy animations like the template that I used. That’s really just tip of the iceberg. I love seeing websites like these here:
https://inflatable.wannathis.one/?ref=landingfolio
Even more here:
Motion (Library) / Framer (Platform) these things are all going to make websites look more like an art on canvas than an information billboard. I can’t wait to see the day when every website looks 1 of 1 and we allow designers to be truly artists. AI is getting us there.
I’m also taking my first step to express myself through code and creativity with BetterFriend. The steps to combine everything I learned to put my on animation, logo and font on a live website were a lot more straightforward than I expected:
I forked the v0 template
I clone it to VScode locally on my computer
I asked Github Copilot where and how I should store the video to be used on the live website.
It created a upload link for me to upload my video and stored it in the Vercel Storage for free
I told it to insert the video to the website, delete all the other videos
I asked it to move the frames faster - it made it faster
I asked to insert my BetterFriend logo on top of the video - it did
I asked to change the text and font that says “Scroll to Play” to “Pacifico” - it did
I asked to change the white background to color (the skin tone) #F9E6C8 - completed in 2 seconds
I pushed the update to GitHub with a new branch (gitflow article)
Made sure the Vercel Hosting is now updated with the new update (refresh / check deployment)
Here we have a functioning website that I forked from a template that I liked on v0 by Vercel with complicated JavaScript that moves the video by frames as the user scrolls on desktop or drags on touch screen, and added my logo, my own video, custom background, custom font and different speed for scrolling.
All for free.
⚡️⚡️⚡️ Betterfriend.xyz ⚡️⚡️⚡️- GO CHECK IT OUT!
From here, anytime I want to change anything or add more features, I simple go to my GitHub, copy and paste the link in my VScode and I can start working on it and add more things onto it with AI, safely, with version control and best practices. I’m still learning how to set up Development Environments that pair with the Git Flow Branch best practices.
If you haven’t go check out the videos that I made in these 2 stories:
Again, this is like riding a bike. Once we do it, we will never forget it. Send this to any friend who has always dreamed of creating a website. If I can do it, they can do it too.
See you tomorrow!
(⚡️BetterFriend Project Day 8 - 38)