How to Create Your First Website Using WebSim AI (Step-by-Step Tutorial)

hello and welcome to webs today we'll guide you through creating your first generation saving it publishing It sharing it with others and updating the publishing link let's start with a brief tour you'll see top posts from today this week or this month and a tab for new content when you retype the same URL into the prompt bar and hit send web Sim generates a version imagined by the llm model you're using for instance I'm using Sonet 3.5 by anthropic typing in the web Sim homepage link res simulates the same homepage to begin click Start simulating which takes you to the URL web AC create let's type in Galactic pet shop and create a gallery for adopting pets from known and unknown parts of the Galaxy if you like a page you can save it open the link in a new tab and click like liked pages are saved in the liked tab on the homepage for easy access later now let's visit the galactic Pet Shop featuring friends from various parts of the universe enjoy exploring instead of clicking adopt now for Blobby I want to learn more about him to do this I'll rightclick on the container and select delve this new feature lets users expand sections of a website for more information on mobile you can tap and hold essentially you can delve into almost any part of the page to get more details now we're on blobby's page to to save and share it I'll click like and copy the link sharing involves copying the actual URL from your browser not from within web Sim ensuring others can access the real page you created if I want to revisit the galactic Pet Shop but see a different part I'll type view Galactic Pet Shop gallerypage 21 this difference between natural language prompting and URL prompting is crucial you're instructing it as if you're envisioning a website not conversing with it typing gallage 21 takes us to the theoretical 21st page of the galactic Pet Shops Gallery showcasing various creatures with Unique Images and descriptions finding an interesting page I'll bookmark it change the title and the link will update accordingly publishing ensures that this link leads directly to the specific generation I created the creature I find most interesting here is the gravity Slug it looks amusing I'll copy its image paste it using contr plus v or command plus V for Mac users and request generate a habitat for the gravity slug this will show the ideal environment for the gravity slug where it evolved I like it so I'll save and like this next I aim to enhance our Pet Shop Gallery by making it more navigable I'll remove Blobby from the context since his specific page is no longer needed and I'll instruct it to bring me to the galactic Pet Shop's adoption search now the galactic Pet Shop allows you to sort by different regions to find your perfect extraterrestrial companion I'll choose find my Cosmic companion which introduces me to my new companion the Kronos snail Prime I'll update the title of the bookmark to Galactic Pet Shop search pets this updated link will now direct others to this page finally I don't like the current visual design so I'll instruct it to maintain the Page's functionality while making it more readable beautiful and intuitive I prefer this new design so I'll update my link accordingly first hit edit then update bookmark to current page copy the link and test it to ensure it's perfect now I want to add a bit of fun I'll combine this with my web Sim profile page I'll prompt it to show my profile page for the galactic Pet Shop adoption instead of natural prompting I'll use URL prompting Galactic Pet Shop SL profile SL adopters slat winter my usern name I'll type that in to see the result I dragged my profile from the bookmarks bar to The Prompt bar and combined it with the galactic Pet Shop search page to undo this combination I would remove the profile context from the context menu and the generated page then hit send again as a result it created a new adopter profile themed around the galactic Pet Shop search with a matching color scheme this differs from my original web Sim profile which had a different theme this demonstrates how you can manage context by adding deleting and modifying elements to retain specific aspects let's recap our steps we typed in the web Sim AI homepage which brought us here we clicked start simulating which led us to the create your web simulation page from there we navigated to the galactic Pet Shop we WR clicked on Blobby and delved into his profile we then accessed page 21 of the galactic pet shop Gallery next we generated a search page for potential adopters to explore the different pets we updated the link behind our bookmark to publish save and share it with others finally we improved the visual design of the page thank you for watching I hope this was helpful and happy web simming

Channel: anrico

Views: 1,671

Keywords: ai, artificial intelligence, llm, llms, claude, sonnet, opus, websim, websim.ai, sonnet 3.5, WebSim AI, website creation, web design, tutorial, step-by-step guide, beginners, website customization, AI tools, web development, Blobby, Galactic Pet Shop, digital design, publishing websites, website tutorial, web simulation, adopt pets online, AI technology, create websites, web design tutorial.

Id: blBTg2_lx2A

Length: 5min 20sec (320 seconds)

Published: Thu Jun 27 2024