It looks like some folks are having difficulty adding a figure is anyone able to move something around you all should have edit um functionality does it have a limit as to how many you can invite i was able to recreate it on my version so yeah i think it’s working fine okay awesome cool and if you want to create your own version here like customize the text um that’s awesome too you can also improve on this so this you can create your own version of your mvp but anyway so i’m gonna let this figma screen hang out for a couple of minutes.
Now i want to talk into um creating this design and bringing it to life so let’s go ahead and move on to making this uh english so has anyone had any experience using html or css before yeah yes okay big fans of html and css maybe no okay i hope to change your mind by the end of this session um h21 css are really really great i think there’s a lot of understating those two languages they’re two of the three holy trinity for web development.
Any type of website you see on the internet has html and css embedded into it and if you want to be a software engineer or a full stack developer knowledge of these two at some extent will be very very helpful so let’s go ahead and move on to glitch so let me go ahead and open a new tab and you can’t see my screen just yet but um if you’re following along go ahead and navigate to glitch you can use different codes all in one okay can everyone see my screen not yet maybe now we can awesome cool so if you’re on glitch um you should see something similar to this except maybe no projects just yet um but that’s okay.
We’re going to create our very first project now so i want you to press the new project button at the very very top near the search form and then press hello dash webpage pressing this first option knowledge with html css and js awesome very exciting so you all are pros this should be a walk in the park uh but if you do have any questions um please feel free to leave them in the chat around your mic and i would be glad to help you out so the first thing we’ll need is a couple of images to to bring or put on our website so if you don’t already have download some maybe before or six or nine images so that we can put on our website together.
I will go ahead and do that um but anyway so this is your first time using glitch i want to do a quick overview so that you can understand what each file does and how we’re going to use them so first we have a readme.md here if you’re not familiar with readme’s or if you’re not familiar with git or github readme files are just a simple text file to provide some more insight for what the project is and so we can just ignore this for now um if you’re interested in getting github.
I will gladly point you to some resources that will be highly helpful but for now we’re going to focus on the index.html file uh so this looks like that stephanie uh very quickly for those who don’t know what github is do you want to give it like a 30 second explanation sure so um so github is a version control coding uh platform that hosts over 75 of the world’s code so if you want to put your code from your local computer to a remote repository which is just a directory where you would have that that co-hosted um github is a really good place to do that there’s over 50 million developers on github.
It’s a great way to collaborate with new people to learn about other tech that’s um out there in the world and to contribute to open source um software which is really really exciting so back to yes this is the hello dash webpage template so back to glitch i’m at the index.html file and we can see that we have a little bit of code here and right now we can’t really see what this looks like so let’s go ahead and change that so i’m going to press the sunglasses and then the show button to preview the app so i’m going to press that button and then i’m going to put the in a new window option or you can press the next to the code.
I’ll press next to the code just so you all can see what this looks like and then we can see that this is what our current web page looks like so we can see that there’s a blue hi there text and then we have a small piece of text after and then we use two goldfish so i’m going to delete all of this um so if you’re not familiar with html um don’t worry this is okay so the first thing that we should go over is headings so headings are the most important piece of text on a website and html is used to structure content so you can add text on there like we can see here on this web app we can add text we can add images we can add videos.
We can add um all kinds of different stuff even nav bars and jumbotrons all of these really exciting things that make up a web app so right here we can see that we have one really large piece of text and this is called a heading and the way that we write these in html is with um an opening and closing pacman i’m not sure what other people call them but for me um and then we close it with some other uh pac-mans with a slash so we can see that if we’re looking in the code for me that’s line 17 we’ll have a heading element we call these uh that says hi there.
If we press delete or backspace on the keyboard then we’ll get rid of it and so now we can see that that heading is gone so i’m going to delete all of the text here and for me i’m deleting uh lines 26 through 17 so we can start from scratch okay so now if you see the next to the code or the preview of the web app it should be empty so everyone able to delete the body this is the text awesome cool uh so now that there’s nothing so there should be no pieces of text in between the body tags so for me that’s 16 and 18. uh so let’s go ahead and add some stuff.
Let’s go back to this design on figma okay so we can see that we have two pieces of text one for our name and then one for our handle or username so let’s go ahead and add a piece of text for our name so i’m going to do can you all see this should i zoom in okay not sure if that helped so i’m perfect great thank you so i’m going to do an open pac-man and then type h1 and then close it with the closing um background