How To Build Website Using Google Gemini | Gemini AI Tutorial For Beginners | Simplilearn

hello everyone I am mang and welcome to this simply YouTube channel today we will be building a basic website or you can say a basic web page using Google Gemini right so let's see which type of code it will provide to us so without any further Ado let's get started so as you can see this is a Gemini Google Gemini prompt okay so you can ask anything to Google Gemini like so these are some suggestions like brainstorm ideas for mocktails or whatever ingredients B some presentation ideas you can ask anything right so first I will ask how to create basic website using HTML CSS right so I will open it so it's running so as you can see here so it gave us like creating basic website using HTML CSS involves two main steps like building the structure and giving the styling using CSS so these are some steps you can follow like create a folder create htl file or open the file in the text editor or you can choose any ID which you are uncomfortable of so here you can see it gave us a basic HTML code right so what you can do you can directly copy here and you can paste it to your particular ID of a file and you can directly run right so these are some uh basic you can say uh elements here like H1 for heading P for paragraphs then BR for breakes and title head like this right here you can uh use this line for particular to to merging your CSS file into your index.html so right so first what we will do we will open visual code code Studio and you can choose your uh ID which you are uncomfortable of so first what I will do I have one folder here folder here J web so what I will do I will create here one file index Dot HTML right and one more style do CSS okay got it so here the files are here right now you can see Gemini web so what I will do I will ask give me HTML and HTML code for Port folio or you can type portfolio web page or like this so right as you can see here I have particular code for the for the section so what I will do I will directly copy it and I will paste it here okay so what you can see so now what you can do okay your name yeah okay right what you can do here you can save it okay and then you can run from here or you can directly from there okay so as you can see here it gives this code okay craving a career upgrade subscribe like and comment below dive into the link in the description to FastTrack your ambition whether you're making a switch or aiming higher simply learn has your back so here is a quick info for you if you want to switch careers with AI and ml then try giving simply postgraduate program in Ai and machine learning from P University in collaboration with IBM this course teaches in demand skills such as machine learning deep learning NLP compter Vision reinforcement learning generative AI prompt engineering chat gity and many more so don't forget to check out the course link from the description box and pin command so now what we will do we will add CSS file to make it colorful or to make it more engaging you can say so I will write here give me CSS code and make my web page colorful colorful right so it will see sure here some CSS code you can kind of you talking to Gemini right so these are some CSS code what I will do I will copy here and I will paste it here okay and I will save it so first what we have to do we have to give a particular you know path so what's the path I will go to properties security or here here is the path okay then I will copy it from here and paste it here right and again save it so I will okay so as you can see it's now more engaging right better than better than previous one right okay this is email and you can edit more so what I have to do now I will edit uh this particular nav bar little bit okay so what I will do okay so what I will do I want to make my nbar uh more aesthetic you can write athetic and beautiful okay you can write I want to make my uh Navar more static and beautiful so provide me code for the same okay so now it will give some code right see gave me uh some na CSS code Okay so so what I will do I will just copy it and paste it here into this right I will save it now let's go to file and run it right this is now more soothing and aesthetic so this is how you can change uh your website according to you and you can ask code according to yourself right you want to change na bar or some Styles or you want some search bar okay let me ask for the search bar also I want a search bar in the Nar so provide me code for the same okay so this is you can ask see gave me HTML file right so I will copy it okay it gave me okay okay first I will copy HTML file and paste it into never right I have to remove now I guess from here n from here okay form is starting here and form is ending there right I guess it will run okay so one starting here and ending there U okay fine for right I guess it will work so first I will copy the CSS code for the same code for this same okay I will paste it and I will save it so let's try to see as you can see okay okay I forgot to I guess this remove these lines first let me remove that okay this remove this save it let me load this see now you can see a particular search bar you can type anything and now you can add any functioning by using JavaScript so what I will do I will ask give me JavaScript code for the functionality for the sum functionality of the N of the search bar search bar right so it will provide me some code yeah okay so let's copy it and paste let me create one script.js and we paste it here save it I guess there is one option of script okay I will ask for the same how [Music] to March your Java GS file into STM ml file anything you can ask right so it will provide me one code yeah so okay okay give me code okay it gave already yeah so what I will do I will just take this and and paste it here let me see before uh into the body and the source will be let me copy the path this is the same path I will paste it here and I will save it now let's see if something happened or not I will refresh it and I will write okay let me check the script so as you can see we have added our script.js Javascript file to our particular index.xml file so functioning of this is if you will write anything in caps letter so it it will automatically convert into lower case so uh you can't see my keyboard uh whether I'm typing in capital letters or lower case so yeah I'm writing capital letter but it will convert into lower kit so what I will write so if I will search skilles so as you can see it is uh you know making it to lower case so these type of things you can do with JavaScript right so uh you can customize your fully website using Google Gemini according to yourself you can ask anything to Google Gemini so it will give to you okay so with this said we have come to end of this video if you have any queries any questions regarding this video please feel free to ask in the comment section below till then stay safe and keep learning with simply learn staying ahead in your career requires continuous learning and upscaling whether you're a student aiming to learn today's top skills or a working professional looking to advance your career we've got you covered explore our impressive catalog of certification programs in cuttingedge domains including data science cloud computing cyber security AI machine learning or digital marketing designed in collaboration with leading universities and top corporations and delivered by industry experts choose any of our programs and set yourself on the path to Career Success click the link in the description to know more hi there if you like this video subscribe to the simply learn YouTube channel and click here to watch similar videos to nerd up and get certified click here

Channel: Simplilearn

Views: 22,736

Keywords: google gemini, how to use google gemini, gemini ai by google, google gemini website demo, how to buid website using gemini, how to use generative ai for website building, website using google gemini ai, introduction to google gemini, google gemini tutorial, google gemini tutoral for beginners, gemini ai step by step guide, google gemini ai how to use, google gemini demo, gemini google, gemini ai, google ai 2024, website creation using gemini, how to use gemini to build website

Id: i7NvDlbCy48

Length: 14min 21sec (861 seconds)

Published: Wed Mar 06 2024