Podcast - Canva AI Web Design: From 'Code for Me' to Live Site! #html #css #ai & Manual Edits

Canva AI Web Design: From 'Code for Me' to Live Site! (HTML, CSS, JavaScript & Manual Edits)

sample website :
1. In Google Sites - https://sites.google.com/view/jual-sepatu-cth
2. in Canva - https://jual-sepatu-cth.my.canva.site/

Description:

Welcome to this special podcast episode where we dive deep into the fascinating world of website creation using Canva AI! Have you ever wondered if AI can truly build a functional website for you? We put it to the test.

In this episode, we explore Canva's innovative "Code for Me" AI feature, designed to generate website code based on simple text prompts. We embarked on a journey to create a shoe store sales website named "Adidos," detailing requirements such as product data, a Tailwind CSS model, a shopping cart, and direct ordering via WhatsApp. The AI generated the code using HTML, CSS, and basic JavaScript.

However, the process wasn't without its challenges. We discovered that the code generated by Canva AI cannot be directly edited within the Canva platform, and images were initially rendered as SVG animations rather than real product photos. The free version also presented occasional hanging issues and difficulties in stopping or re-prompting the AI during generation.

But fear not! We reveal an ingenious workaround: manually extracting the entire website code using browser developer tools ("inspect element"), and then editing it in a local code editor like VS Code. This allowed us to fix initial issues, such as targetting a specific WhatsApp number for orders and changing the currency from USD to Indonesian Rupiah (IDR).

Finally, we demonstrate how to take your manually edited website online for free by embedding the HTML code into a Google Sites (sit.com) page, making it accessible to a wider audience.

This podcast provides valuable insights into the current capabilities and limitations of AI in web development, offering practical solutions for aspiring web creators.

Special Note: This podcast was created with the assistance of **AI NotebookLM**, leveraging its capabilities to generate this insightful content.

Stay tuned for our next episodes where we plan to explore further enhancements, like editing specific messages, fully localizing the website to Indonesian, and incorporating real product images!

link tutorial in Indonesian :
https://youtu.be/t_1jF6nG7yY?si=2oUKWzQRFCZVcOt3

Tags:
#html #css #javascript
#podcast
#CanvaAIWebDesign
#webdevelopment
#CanvaAIWebsite
#CanvaCodeforMe
#AIWebDevelopment
#HTMLCSSJavaScript
#TailwindCSS
#WebsiteDesignTutorial
#AIWebsiteBuilder
#WebDesignAI
#WebsiteCreation
#GoogleSites
#VSCode
#InspectElement
#ManualCodeEditing
#AILimitations
#FreeWebsiteHosting
#OnlineStoreWebsite
#E-commerceWebsite
#ShoeStoreWebsite
#AdidosWebsite
#WhatsAppOrder
#RupiahCurrency
#SVGImages
#AINotebookLM
#WebsiteTutorial
#digitalmarketing
#techtutorial

Видео Podcast - Canva AI Web Design: From 'Code for Me' to Live Site! #html #css #ai & Manual Edits канала Farhan Onlen