![]() ![]() And all those rectangles? Those boxes? They’re just stacking on top of each other, or sitting next to each other based on properties we set. Every single thing you see, all the content, the structure - it’s secretly made up of boxes. The web - all of it - is built on the box model. And subscribe on YouTube and finish the course on Webflow University as soon as you can. I, of course, or me, or however you say it, I have 100% all the time. You can see how much percentage you have finished throughout the course. But if you are on Webflow University, you can track your progress throughout the course, which is brilliant. Ahh, Because I get a lot of coffee when you subscribe, so it's good for me. If you're watching this on YouTube, please subscribe and like and subscribe and like again. Up next we are going to breathe life into it to talk about what happens when you style ing CSS. But that’s the basic power - a quick overview of HTML. We can delete stuff, we can change stuff (by the way we can even reorder stuff). And if we want to, we can start to mess with it. On any site, you can go in and inspect to see what kinds of elements make up that page. It’s made up of different types of elements (different HTML tags) that serve as building blocks. Again, it’s helpful to think of HTML as JUST the content on the page. Once we make that change? It’s now, of course.four dollars. ![]() And if we double click? Let’s try highlighting and just changing that price. Again, don’t worry about all the other code we’re just looking for the price. Let’s right click on the price, and we’ll go down and do the same thing: inspect. (When you’re inspecting, you’re doing that locally - only on your computer, and only temporarily - that’s why you don’t have to worry about breaking anything.)įinally, let’s change Apple’s prices. If at any point we refresh this page? If we go up and refresh? It’s back to the place we started. We can see it’s highlighted here, let’s click that element in the code. Except once we find the box that looks like it contains Google. Don’t worry - we’re not going to break anything. At any point, we can hover over and try to find the Google logo. Inspecting lets us see that.Īnd for the fourth part - the best part - when we inspect? We can change any of it. All of it is our HTML: the elements on the page. We can keep hovering, or we can even expand HTML elements to see that many of these elements have other elements inside. And each of those boxes? Is just a different HTML element. We’re only focused on the content here (the HTML).Īnd as we hover over, we’re just hovering over some of these things, all we’ll do is take a look at what happens. ![]() To the left is our HTML (our content) and to the right is our CSS (our styling and layout). Most of what we see here doesn’t matter right now. And at any time, we can right click on any part of the page and inspect. Here’s in a web browser (we’re using Chrome here, but you can do this in any modern browser - we’ll include how in the description). But the concept is critical: each of these types of HTML elements? Are the different kinds of building blocks you can use to build your page. And each of these tags are used to define the type of content. So is hydrogen.Īt its most basic level, HTML is just a bunch of different types of tags which you can use to build a page. Even divs - divs are just boxes that can group other elements together - those are elements, too. That last example? If we were to look at the code, we can see that all the kinds of elements that make UP the content. When we add the CSS? That’s where we control all our style and layout. Again what we’re showing here is just the HTML. Styling’s turned on, and again with - well, we had two good examples.įor a third, here’s another Apple site. Turn them back on? You get the idea.Ĭraigslist. Turn off the styles? Now it’s just the HTML. By the way, we’ll get to CSS in the next lesson.īut for now, here’s Nike. Here’s the Airpods site, but if we turn off all the styles? If we turn off our CSS? We see just the content. Yes, there are nuances we’ll cover down the road, but in this lesson, we’re going to cover five things: we’ll see what happens when we strip away styling and look at just the HTML, we’ll show examples of what kinds of HTML elements we can build with, we’ll show how you can you go in and inspect real-world sites, we’ll delete Google, and finally, we’ll change the prices on. HTML is just the basic structure (the boxes of content on the page). We’re going to take away all the styles in this lesson, and focus just on the HTML (the content on the page).
0 Comments
Leave a Reply. |