Video Summary

All right, let’s hop in and start learning about the W3schools.com. This is such a powerful website for new developers, and even experienced developers, developers like myself. 

Like I said, I’ve been developing websites for over five years now. And I still use this tool from time to time. I swear probably about every website that I build for a client I probably come here and reference something, maybe two or three, if not, maybe 10 times. There’s just you know, there’s so much to know when it comes to coding and you’re not going to memorize every single element. You’re not going to memorize every single CSS property and value and once in a while, you just need a little, you know, refresher, right, and this is the perfect website to do this. So, I’m gonna go and show you the way that we can actually set up go in and we can learn HTML and CSS. And when we show you how to set up, how we can actually start our search from right here. But before I get into it, I do want to show you that more times than not, you’re probably going to reference this for the CSS over the HTML, and here’s why. So if we go here to the Inspect tool, and we are looking at all of these different tags, if we come here and we’re isolating something, right, say if it’s there, this is the button. We know that this is the button tag so we’ll be able to go in and if you need to figure out what you can do with a button. You can go to the tutorials HTML, find the button section, and you will be good to go. 

But for this tutorial, I’m going to focus on more on the CSS. Because when we get in and we’re doing these tutorials, you will have HTML and the CSS for what we’re trying to do. So what’s really cool is, is that like, like I just showed you, you can come here and you can learn HTML and CSS and it has catalogued every property, every value, every HTML tag, that there’s out there. So if you bring us something that you’re not sure of come to W three schools.com and search for what you’re looking for and you will be able to learn what you can do with element that property of that value. Also too is you could if you want to you could keep on learning different coding languages such as JavaScript, MySQL, SQL, Python, Java. For what we are doing. We are going to focus on just HTML CSS. And maybe just a little bit of SQL, but that’s when we get to when we want to transfer our website from one hosting platform to another. And really, we don’t really need to know anything about SQL or MySQL. We just need to know where to find it. Alright, so let’s go over here and let’s start our search from learning to code. So let’s say you are trying to center a heading or a text on the page, and you’re putting font align and you’re like, why isn’t that working? So you can come in here and put font align and now look, sir search. 

Now if you come up here, CSS text align, oh, you know, the I’ve done that from time to time when I first started, you know, you’ve mixed it up fun text. I mean, it makes sense, right? Text and font are pretty much the same thing. Let’s just click on text align property. And now we are in the section where it’s just talking about the text align property. And now if we keep scrolling down, we actually start seeing the syntax of text align colon center, and it gives you all these different options. Right? And if we keep scrolling down, it gives you the property values on what you can use. He gives you more examples on what what are how we can do the text align. So let’s just say let’s use this one. Let’s go try it yourself. So once you click on here, it opens up into a new tab your own little coding editor. Now this is fairly similar to what we were using with code pen. But I prefer to use KOFUN for my tutorials, because as I was texting, or you know, as I was typing them out, they were automatically populating the website area. Now a lot of talk Kolpin as well is that there was a CSS specific area where we could put our CSS code and really interacted with the CSS and HTML. But when you’re looking at here, what you’re seeing is and I want to separate this real quick, what you’re seeing, as you see style, you see a style tag and you see a style tag here at the end, and then you hash for forward slash. So what’s happening here is all the CSS code is populating over here. So if we wanted to, let’s just start off by change the date over here, and let’s just change this to let’s just add, add to the data’s add a 24. 

And if we come up here and click run, that changes and let’s say instead of the h1 being center, we want that to the left. Because here we click Run. We get it moves over. So this is how you play with that. And before CSS was a coding language as you had to style your HTML through the style tags. And the reason why these developers got away from that is this image if you were typing out a piece of code or an HTML document, right? And you have like maybe 1000 or 2000 lines of code and then you have to go back and use these probably are stylings in here, which could be another three to four maybe 500 lines of code that you’re ended up putting in here just to just to manipulate your web page. Now working inside of that became a nightmare because say you’re all you’re working on the footer. And so you’re at the very bottom of your HTML and now you’ve got you want to style something and you have to scroll all the way back up and use the style tag, but just for this code editor, they use a style tag because they’re not putting a ton of lines of code. They put just enough to show you the example and let you play around with it. Alright, so we’re gonna get out of this because this is a pretty straightforward, pretty straightforward property value. But if we come over we come back over here, once you search these property values. 

Now you’re able to see this over here, CSS properties. Now they have an alphabetical order. So if you ever want to just go through all these properties, you can just play with them. So let’s just scroll down and say see right here box shadow. This was one of the more complicated property values that we have worked with. And we come down here. Now this is where you can start playing with all these different types of box shadows. I had a ton of different examples and gives you all the property values that you can use. And if you want to you can go and demo these out. So let’s say we want to use the blur. So come here and click the demo. 

Let this populate and now you can bounce back and forth between what each one looks like. You can come over here and change the change to a different style. And you can play with all these. So this is a pretty powerful tool. As you can see, for us to first get in and learn what we don’t know. So let’s just kind of hop back over here and click on CSS. And let’s just test this out real quick. 

Over here, we have everything from the syntax which is the code we’re talking about the selectors, comments, colors, background, borders, margins, and paddings. I mean, all of the essentials are right here and you get to go and play with these and you’ll be able to find out what the property values are and how you can utilize it in different ways. And really be able to get a quick understanding if you get lost at any moment. So I recommend if you have the time just to go in here and just play with a whole bunch of different stuff. You know, I was sick of the HTML and CSS for this course. But maybe once your web or your WordPress websites finish, you know, maybe hopping over and playing with similar stuff might be fun as well. But the only problem with this website is that it doesn’t have any video tutorials. And when I was learning this was the main way that I would learn as I had my computer. I had two side monitors that were attached to my computer. 

So on one monitor, I would be watching my video tutorials. And the other screen I’d have the website I was working on and then on my computer is where I would be playing with a website, whether it be WordPress or actual coding, like a coding editor. And that’s just how I learned so I recommend just taking the time learning this and if you want just hop, you can hop right in and start learning WordPress because as we get in if you ever get stuck, you can always come back to these tutorials for the video explanations or if you can just quickly go to different properties and check these out. by all means, use this tool as much as you need to. So let’s hop in and let’s start the next course.