Making a AI Generated Website with GitHub Copilot in 8 Minutes

hey youtube it is code salad i'm going to be creating a ai generated website with github copilot i hate long videos so let's go we're going to start by creating this ai.html file here it's a blank file i got it loaded up in chrome so let's get started i'm going to create a html tag a head utf viewport i'm going to have it give a title we have it pulling it font awesome we have a pulling in bootstrap and it's going to close the head it's going to start the body and before i have it go into the body i'm going to change the title of this to rick astley's biography okay this is the rick roll guy if you didn't know so i'm going to open up the body and it's going to immediately try to suggest let's see a navbar very cool so we have a nav bar now let's go ahead and dive in and just see what that looks like it looks like it created a home contact login register thing cool that is what it is i'm just gonna move on after fixing some of the tabbing here it's kind of uh it's kind of convoluted and unimportant but i get ocd about it so we have a nav i'm going to go ahead and give it a comment here to give it a nudge of what to do next um heading text let's see what it can generate rick astley's biography let's check the website boom rick astley's biography where it's going to close that tag out and now main content so let's see if it generates some kind of content it created some dummy content but honestly speaking i don't really like dummy content like that um i don't see the reason why it can't just pull hit some data about rick athlete for me so let's go ahead and give this a comment and say short biography notice how i'm not saying about who i've already said who it is above so let's hopefully there you go it gives you a paragraph that's actually about rick astley i don't know if this is real um he's an english singer songwriter i'd i'd really doubt that any of that's real but um it is what it is let's let's keep moving um and close out this div here and what do we want to do next we want um his uh the youtube video right there's the famous youtube video the rick roll let's see if it can figure that out it pulled some youtube video um this video is unavailable but i bet you if i click on it okay i don't actually know what this is but um you know one might think it would be the rick roll right because of github co-pilot's success thus far but let's go ahead and add the lyrics below it let's see if github copilot can do something about the lyrics um it is thinking and it couldn't create anything so i'm going to go ahead and give it a nudge here by creating a div let's see if it can think of anything with this i'm going to say it probably won't but yep it won't um so i'm gonna create a paragraph never gonna give you up the first sentence in that and there you go get up co-pilot is already spinning um it's pulling the lyrics line by line um again i don't know if this is perfect but for those of you who know the song that's pretty damn similar um if not exactly what the lyrics are to the song so we have the lyrics there on the website notice how most likely yep mobile is looking pretty good and wow it created a hamburger icon to collapse this menu down right so that's pretty cool now i'm going to take this one step further and i'm going to create a script down here i'm going to test how really really far we can push this right so dom content loaded this is for those of you who don't know something you have to do to ensure that the page is loaded before you go and do a bunch of crap um looks like this is doing a whole bunch of stuff but i'm going to empty out this function before anything happens and i'm also going to underneath the heading i'm going to put open sign up open newsletter sign up modal and it's going to oh i guess i'm going to say button at the end right i want this to be a button that will open up a modal let's see if github copilot can whip me up a quick button it's thinking it's thinking hard but uh i'm gonna go ahead and give it a nudge by moving this to maybe below the description um and just changing it to open modal button read more okay and then at the bottom of the page i'm going to say you know what let's add a footer before i do anything else let's see if it can auto gen as a footer okay so we have the read more button and a nice little footer here and um below the footer on the at the root of the page basically i'm going to create a modal hidden by default and it's going to go ahead and see if it can make me a modal boom boom boom so we have our modal let's see if anything shows on the page it doesn't so that um luckily enough the modal did not show up on the page as expected and what i'm gonna go ahead and do is put in the javascript here open modal when read more button is clicked and the read more button up here i'm gonna go ahead and give a id of read more that i'm hoping that github copilot can pick up on so there you go grab the button and when it's when it's doing that it's going to set the display to block and just in case this is an opacity thing to set opacity to one boom so i'm going to go ahead and refresh and click to read more and boom wow okay so we have a modal straight off the bat that's beautiful um let's see if we can take this one step further close modal when close button is clicked i'm not sure if this is going to work but let's go ahead and find out shall we it does not work it totally does not work but let's try that again because i didn't give the close button any sort of tlc so i'm gonna give this an id of close button modal and let's see if get a co-pilot picks up on that it looks like it did and it's going to go ahead and create the opposite of that function right there so right there you have github co-pilot creating an entirely responsive page with javascript that loads and for the most part it's responsive um i am probably just going to end the video here thanks for watching guys if you enjoyed this video i plan on making more get up co-pilot videos i love playing with this thing um if you have ideas please put in the comment and i'm happy to go ahead and deep dive another one of these websites and create whatever you want doesn't even have to be a website so it could be an app or whatever you want it to do so again please put your suggestions in the comments and thank you for watching have a good night

Channel: CodeSalad

Views: 66,733

Keywords: web development, github copilot, coding, react, html, javascript

Id: zaslz4myzE0

Length: 8min 4sec (484 seconds)

Published: Wed Jun 08 2022