Video Summary

We are on the lincoln.com website. This is just their, their company website. Doesn’t matter which website you’re on. As long as you’re viewing an actual webpage, you can use this inspect tool. So we’re gonna do is I’m on a Mac, so I’m gonna do a double finger click or you can right click and you’ll see this pop up, come up and you just want to click inspect, and it’s usually right at the bottom or close to the bottom depending on what your what part of the page you’re clicking on. So what happens is I’ll take this over, and I’ll make this a little bit bigger just for the time being. And what we’re seeing here is we are seeing all the HTML code that was used to build this website. And if we come here, and we’re looking at these different divs if we click this arrow, it shows you what every little bit of that div has like that as far as dividing in so as you can see in our Simon earlier sections, you’re gonna see div upon Tiv Abon div and they usually cascade right they come in, they come in and out. That’s just because this makes it easiest. This makes it easy for us to read and understand by blocking these off. And also to as if every div was open, we would just be scrolling upon scrolling upon scrolling and trying to find each individual element. So down here is where all the CSS for certain elements resides. So if I click here, we just find what all the CSS that that this website encounters. Alright, so let’s just put this back over here so we can see a little bit more of this website. And what I want to show you here is let’s click on this little arrow right here. Once we click here, now we can start hovering over these different elements. And what’s cool is is that we do have a little bit of a pop up to let us know that this is just kind of a basic information that we might need to know for this section. 

And if we look at this, we can see that the we were targeting a span and all of the classes that are in that span, right. We also see in pixels. If you see if you look and you see the 698 or 669.78 That’s the width and the height is 79 pixels. We can see the color is white, which is just hashtag six. If we can see the font size, it’s 50 pixels, we can see that they have their own or their own font because it’s called Lincoln Miller be black. And it’s in a version of Times New Roman. So let’s just click on this. And let’s just play around. So what happens is, is that we click on this element, right, we clicked over here, it’s highlighted at the top right here. So we know that we’re working within this section. But if we come here and we’re looking at all of these these are all different classes that are used to style this one element. And what happens is is that all these basically these descendant selectors, choose different sections of how they want to style this. So if we want to we can come here and we can make this 150 pixels, right? That’s way too big. Let’s just let’s change this and go 70 pixels. And what if we want the line height to be you know what, let’s make this 80 pixels but as you can see this Learn More it has a Z index so we’re so this is this is writing on top. So if we want to change the line height, let’s change this from 60 to 160. Let’s do 160 pixels, right? So we just change the line height from this fear to 160 pixels. Alright, let’s just refresh this and let’s start again, because we because we’ve manipulated it, and if we refresh it goes back to the regular page. So when you’re playing with this, you are not actually changing the code for everyone to see you are changing the code for you to see. Alright, so let’s go down here and let’s just let’s just pick this paragraph right here. And this paragraph is set up in a div. You can use this to create your own tax and paragraphs, but I prefer to use paragraphs if I’m billing myself, just because it’s to me this can get lost in either a bit dividing do they have tax, but not all developers use the same methods. So this div could actually meet be a bunch of different things. So right here, this is the color that it has. We could you know let’s go down here. We’ll just keep scrolling let’s say that say the font size, if you check if you click this off, sometimes that will change the they’ll bounce back and forth between what you see and what you don’t. 

You know, I don’t really this one’s not really a great example. Let’s try. 

Let’s try this headline right here. All right. So if we scroll down, this is where we can see where the different the different sections of the or the different properties they’re targeting to manipulate the site. So this one’s got a padding at the bottom. What happens if we change this from 20 to 44? What happens we changed from 44 to 84. Right? 

So this is how we can go in and set up our own CSS stylings and figure out what the website we’re using or the webpage we’re looking at and what we can change. So a lot of times, what I’ll do is before actually start implementing the CSS code on WordPress, I will come in here to the Inspect tool, and I’ll play around with this because it’s just super easy to say, Okay, well, I have liked the padding when it’s maybe instead of four pixels, maybe 30 pixels looks a little bit better. So are 34 pixels. So what we would do essentially, is I could come here, and I can copy and paste all these classes that we’re selecting for this one headline copy and paste that into our WordPress, CSS editor, and then basically throw curly brackets on it and start targeting properties and declarations to start manipulating the website that we’re working on. So we’re gonna get into this a lot more once we start getting into WordPress and once we hit a spot where we can’t manipulate anything more on the page builders that the theme offers, then we’re going to hop in and start manipulating the code ourselves. And this is what really separates the average web developer or WordPress or developer from the experts, and this is how we’re going to be able to really transform your basic WordPress themes into the website of your dreams. 

And while I’m here, there’s a ton of stuff this, this inspect tool can do. But for us as WordPress developers, we only really care about a few certain functions and being able to find and pick apart the CSS code and fit in targeting individual elements and buttons and links. We can we can essentially be able to find the CSS or the find the elements, target the CSS code and manipulate ourselves. But here’s another really major tool that is super helpful when we’re thinking about mobile optimization. So I’m gonna put this a little bit are a little bit more thin. And if you come here and you see like there’s like kind of like a tablet, and then a little phone if we come here and click on this, we go into the responsive mode where what we can do is if you look over here, and you can make this website as small or as big as you want, so let’s pull this all the way as far as we can. If we come up here and look we can change the precise look of how big this is. We want this at five it was just look like a 500 pixels. We can just make it look at 500 pixels. If we want to drag this back out, we can just drag this back out. If you look at this bar over here, and if you hover, we can click here and it basically let’s refresh this 

I do not like that. Okay. Here we go. Alright, so this is like the mega version. This is how like, if you look over here, this is two if you look over there for the middle of the top, like this section right here, as I’m hovering over here. This is I’ve seen it’s like the 4k version. It’s 2560 pixels wide. Most laptops are around 14 119 100 pixels wide. So this is like the laptop our version. If you want to see what a lot like a slick really kind of like the mini laptops are where they call it and they’re called notebooks now, this is what it would look like on a notebook. If you come over here. This is what most tablets will look like. They come over here. This is what a large phone size would look like. And if you come right here to the middle, this is what the old like iPhone fours would look like only 320 pixels wide. But here’s another cool feature too is this as bounces back out. As you can go over see here and dimensions and responsive. Let’s click down here. And it gives you all these different mobile devices that you can check and view what it what it’s going to look like on let’s let’s try iPhone 12 Pro. This is what the iPhone 12 Pro would look like this web page would look like on that device. We can go here and let’s do iPad Pro. 

And now we are seeing what looks like on the iPad Pro. And you can go back and forth and just see how everything looks and when we get into mobile optimization which I would and then also to is if you’re in a certain view, you might want to go back to responsive. 

The reason why you might want to go back to responsive is because you’re going to want to be able to play with sizing because eventually what we’re going to do is is that we’re going to have a finished WordPress webpage, or even a WordPress or section on your WordPress web page. And we’re going to want to do is, is we’re going to see it and it might look good if it’s all the way if it’s as wide as this is and let’s kind of just refresh this so we sometimes see when you go back and forth it it becomes a little if you play with it too much becomes wonky. So let’s let me exit out of this and refresh. 

And we’ll go back and we’ll click inspect and we’re already in the let’s see if this works. 

Let’s just say we’re here. And we want to like maybe if we go as we go in you can see these elements starting to change. 

Maybe in size, right? Especially if you’re looking up over here these are starting to move. What’s going to happen is is that this or this website is already perfectly optimized. I mean, LinkedIn is a huge company they have you know, they probably have a full team of developers working on this at all times. We are just one person so we’re going to have to go in and make sure that every single section is looking good as it shrinks down. So that way that every device that might be looking at your website is getting a good experience. So what we’ll end up doing is and we’ll get here and now we can actually start targeting different sections and being able to say Okay, at this width we want this, this element to look like this, or between 1000 pixels and 500 pixels. we want this image to be this wide. and this is all stuff that we’re going to get into and this is more in later sections. but I think it’s just kind of important and it kind of might get you a little excited of knowing that using we’re going to use this tool to basically transform your basic WordPress website into something amazing. So with that being said, I think we should hop over and start learning about pseudo classes.