Hello guys! Welcome to my First YouTube Video! Sooo, today we’re gonna be learning how to code our first site using HTML5 & CSS code. So, if you like my video, pLeAse sUbsCriBe & LiKe tHis ViDeO to support my channel and help me grow. Ight, so, um (thinks for a second), before we get started you guys need Visual Studio Code So, Visual Studio Code is basically a code edit- ediTOR! We’re gonna code in, so if you don’t have it already, download it, or you could use another one. …like Notepad++, so you could use that, but, today we’re gonna be using Visual Studio Code to code, heh. *le GASP* SOOOoo, let’s get started. So, we’re gonna go to Visual Studio Code, and the first thing we’re going to do is Open or Create a New Folder. And, we’re gonna do, we’re gonna find some place on your computer (to store your code), make a New Folder. ….Um, annd, then we’re going to um, add the name to our new folder (Remember, no spaces). Select folder, and now it should open up on the side of your ediTOR. So, *le thinks*, wait a few minutes. Okay, so, we’re gonna create a new file. So this file is going to be called the index. Which is basically the first file. We’re gonna save it in our folder, save type as HTML, and we’re gonna call it index.html. And it should save, ya, so, basically we’re gonna start by doing. Which is basically, the html version that we’re using, it’s gonna declare to the browser that we’re gonna use HTML5. Or the version you wanna use. *le GASP 2* so, then it’s gonna be HTML5. Okay, so, then we’re gonna add thetags, basically. This is where, “all html code goes”. Then inside this we’re gonna create atag. The head tags are, basically, “whatever code goes on the top of the browser”. So basically, anything like, the name on the tab, like New Tab, is gonna show up there. Stuff like that goes in thetag. And then we have the body tag, which is basically, the BODY of our code, our code’s body. And, we’re done setting up the page for now. So, now we’re gonna create atag.<title>tag’s gonna be called, um, whatever you want. So, I’m gonna call it “Tutorial Project 4” because it’s my fourth time attempting this. *attempts to say attempt -_-* Soo, okay, and then we’re going to go to the body, and we’re going to, um, start by creating an</p> <h1>tag. And basically, this tag is gonna be our main heading, and we’re gonna put, “Welcome to my Site.” K. We’re gonna save this (*CTRL+S* in Visual Studio Code). And then we’re gonna go in out files, and then we’re gonna open this index file. So, it’s gonna open up the webpage. It should say, “Welcome to my site.” and whatever you put for the<title>. And, we’re going to go here, and add a new tag called the</p> <p>tag. And, basically this tag contains paragraphs. People usually use this tag for paragraphs. there other tags that can be used for the same purpose, but this is the default tag. So, the</p> <p>tag has default spacing, so there are default spacing between the it and the</p> <h1>tag. I’ll show you later what I mean about the other tags. So, this the (default) paragraph (tag), so we type out a paragraph (or any amount of text). Okay. CTRL+S, Save, annd now, we reload this and we have a paragraph here. So that’s good. Annd now we’re gonna create another tag called the<strong>tag. Basically, *tries to explain* this is like a</p> <p>tag, but it has bold font. Really, so, same thing as this (</p> <p>tag) but with a bold font. Soo, we’re gonna try this. So, when we reload the page, it shows the text (in between the<strong>tags) in bold font. So, let’s recap: So this is gonna be the</p> <h1>tag, heading. This (</h1> <p>tag) is the paragraph tag. And this is the<strong>tag. Okay, so we’re going to create an<em>tag, now. So this is the<em>tag, or italic font tag. “This is an italic paragraph.” So, this is gonna create another</p> <p>tag, but it’s gonna be italic or linear. But with these tags, you gotta space them yourself. So, we’re gonna do a new tag called,<br />, “break tag”. And the break tag is basically gonna add spacing in between our code (tags). And it’s what we’re gonna use alot (usually) in our site. So now, we’re gonna create something called a “stylesheet” or CSS code, OR Cascading Style Sheet. So we’re gonna add a new<link>tag to our</p> <p>tag. We’re gonna type,””rel=”stylesheet” href=”style.css”.”” (I misspelled ‘stylesheet’). Save this. Okay, so New File. Save as CSS. We’re gonna call it style.css. So we’re gonna save as type CSS. So, what ‘rel’ stands for is type of link, and what ‘href’ stands for is the location of the file. And we’re gonna start by adding our body so we can change the color of the background. So we’re gonna edit the body to create a new background color for this (site). So the background color’s gonna be set to, “rgb(0, 255, 255)”. So what this does is set the color. So we can also do it right here. You can also add transparency, which is cool (I guess). So yeah, if you want, you can also use the name built in here (you can use aqua, instead of the rgb stuff, it’s not gonna change anything really). *This is when I realize I made a mistake*. *Agressive Clicking* Moral of the story: Don’t forget to check your code kids. And, now it works. So now we’re gonna center these tags (</p> <h1>,</h1> <p>,<strong>, and<em>). The quickest way to do this, check which tags you wanna center, and then put them in the same line. Now, we’re gonna type “text-align: center”. Save it. Refresh. So, now only the</p> <h1>and</h1> <p>tags work. So what we’re gonna do, is put the<strong>and<em>tags in</p> <p>tags. Okay, soo, um, this worked, but let’s remove the<br tags now>automatically does the spacing. Annd, let’s see this. Alright, so now, we’re gonna add another tag, (the last tag) •o• finally. We’re gonna add a</p> <p>, a<strong>, and an<em>tag together. We add “This is a bold italic paragraph”. So now we have a bold italic paragraph that’s centered. (DONT TYPE, JUST WATCH) We can also do highlighting. So we do “background-color: yellow”. So this is a shortcut way of doing this. So the yellow kinda hurts my eyes (they burn tbh). So we’re gonna do blue instead of yellow, cause it’s a cool color. Okay, looks better, but not really the best? But imma try to do this later. So, that’s it for today’s video. We’re gonna continue this in part 2. So if you liked today’s video, pLz sUbScRiBe aNd LiKe tHis ViDeO to help my channel grow. So cu in the next video. WHY R U STILL TALKING!!! RIP My Fingers πŸ™ </em></strong></p> <p></em></strong></p> <p></em></strong></p> <p></em></em></strong></p> <p></strong></p> <p></strong></h1> <p>