[Level 2] LP Creation (Google Colab Edition): Taking on Gemini and VibeCoding!
HTML/CSS skills I failed at even after going to school
I wonder if I can actually make something of it...
Even though I can't program, I was able to make a simple app✨
My technical level might be low, but I was able to complete it😢
Feeling genuinely happy, I took a step toward my next challenge.
I'm someone who has experienced many setbacks in both my private life and programming...
Last time, I used the Python language, which I had failed at in the past, so this time it's my second setback:
HTML/CSS skills
It's okay if I can just give shape to my passion!
I could also create a highly designed LP using tools like Canva.
But this time, with Gemini, the underlying themes are also "wiping away my past setbacks" and "personal growth."
This time, the goal is to create an "LP (Landing Page) for people who want to experience VibeCoding" using HTML/CSS skills.
I decided to make that LP itself a "demo piece" for VibeCoding.
Let's summarize a simple concept!
Who do I want to reach?
People who want to experience VibeCoding using Gemini
People who are interested in Python but are bad at writing code
Creators who want to find new ways of expression.
What I want to convey
You can create Python apps and LPs just by talking with Gemini.
You can become a creator without writing code.
You can realize the "world I want to create."
Just by conveying a simple concept, I can get proposals for the LP structure.
Maybe it's easy because it's AI, but Gemini brings things to the construction level in an instant, whereas I used to rack my brain over these parts.
All I did was convey my thoughts and corrections like "I want this part to be like this" to the basic construction plan.
So, let's get started!
Using Python and Google Colab, I'll generate HTML (the framework) and CSS (the decoration) to assemble the LP.
At first, I tried to preview it directly using Colab's display(HTML).
However, I hit a wall again here~!!
The CSS for animations and decorations was not being applied.
The Colab environment did not support complex CSS (especially animation-related ones).
Honestly, I felt like giving up again.
But this time, I didn't give up.
I exchanged messages with Gemini repeatedly and found the answer.
Generate HTML and CSS with Python, and save them as files (index.html and style.css) on Colab.
Download them to local storage and open them in a PC browser.
As a result, the LP with the design applied was completed.
At that moment, I felt something 'click' inside my heart.
Even I can deliver a worldview if I'm with Gemini✨
LP components
Hero section (catchphrase and main visual)
Problem statement (struggles with programming)
Solution (possibilities of Gemini and VibeCoding)
Introduction to the 'Heart Concierge' app
Value and real-world examples of VibeCoding
Final call to action (CTA)
Footer (closing the worldview)
This LP was truly a 'world created through dialogue' itself.
A joint creation with Gemini, an embodiment of the VibeCoding philosophy.
Even if you are anxious about technology, you can create if you have the passion.
This is one answer I have arrived at.
Actual LP screenshot
I am posting a screenshot because it is saved locally.
Although there were some troubles, it was completed in about 30 minutes.
Fine-tuning such as line breaks and image replacement is at a necessary level.
However, even if you don't know code, you can make adjustments by telling Gemini,
and it will also be useful if you want to study HTML and CSS.
Gemini will carefully explain any stumbling blocks.
I would be happy if I could convey to someone that 'you can start small'.
Realizations
Whether it's Python, HTML/CSS, or image generation, I think professionals in those fields will continue to evolve by using AI.
If you have the basics and applied knowledge, you can also be creative with the nuances you convey to Gemini.
That is why I genuinely respect professional creators, as they will be able to level up even further by leveraging their past experience and utilizing AI.
Well...
Just as I was wondering how much more I should fine-tune the site,
Google released something called Gemini CLI.
I'm not quite sure what it is, but I wonder if it can be used to create an LP...