Intro to HTML & CSS

We’re going to take away all the styles in this lesson, and focus just on the HTML (the content on the page). 

HTML is just the basic structure (the boxes of content on the page). 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 Apple.com.

Let’s start with the first part. 

Here’s the Airpods site, but if we turn off all the styles? If we turn off our CSS? We see just the content. CSS back on? Now it’s styled again. By the way, we’ll get to CSS in the next lesson.

But for now, here’s Nike. Turn off the styles? Now it’s just the HTML. Turn them back on? You get the idea.

Craigslist. Here’s a post for a thing. Styling’s turned on, and again with — well, we had two good examples.

For a third, here’s another Apple site. Styles turned on, styles turned off. Again what we’re showing here is just the HTML. When we add the CSS? That’s where we control all our style and layout.

That’s part one. Part 2? Let’s look at what HTML IS. 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. A heading? That’s an HTML element. A paragraph? That’s an element. A button is an element. An image is an element. Even divs — divs are just boxes that can group other elements together — those are elements, too. So is hydrogen. 

At its most basic level, HTML is just a bunch of different types of tags which you can use to build a page. And each of these tags are used to define the type of content. You don’t have to memorize all of these. 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.

That’s two parts down. Let’s go in and inspect. This is magic. Here’s Google.com 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). And at any time, we can right click on any part of the page and  inspect.

Now. Most of what we see here doesn’t matter right now. To the left is our HTML (our content) and to the right is our CSS (our styling and layout). We’re only focused on the content here (the HTML).

And as we hover over, we’re just hovering over some of these things, all we’ll do is take a look at what happens.

What you’re seeing? Is the box model. And each of those boxes? Is just a different HTML element. We can keep hovering, or we can even expand HTML elements to see that many of these elements have other elements inside. All of it is our HTML: the elements on the page. Inspecting lets us see that.

And for the fourth part — the best part — when we inspect? We can change any of it. Let’s delete Google. Seriously. At any point, we can hover over and try to find the Google logo. Don’t worry — we’re not going to break anything. Except once we find the box that looks like it contains Google. We can see it’s highlighted here, let’s click that element in the code. And let’s press delete.

We just deleted Google.

If at any point we refresh this page? If we go up and refresh? It’s back to the place we started. (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.)

Finally, let’s change Apple’s prices. We’re on a page here: Mac Studio. Let’s right click on the price, and we’ll go down and do the same thing: inspect. Again, don’t worry about all the other code; we’re just looking for the price. And if we double click? Let’s try highlighting and just changing that price. Once we make that change? It’s now, of course...four dollars. (Which is a savings.)

And that’s it. Again, it’s helpful to think of HTML as JUST the content on the page. It’s made up of different types of elements (different HTML tags) that serve as building blocks. On any site, you can go in and inspect to see what kinds of elements make up that page. And if we want to, we can start to mess with it. We can delete stuff, we can change stuff (by the way we can even reorder stuff). But that’s the basic power — a quick overview of HTML. Up next we are going to breathe life into it to talk about what happens when you style HTML...using CSS.

[Grimur] If you're watching this on YouTube, please subscribe and like and subscribe and like again. Ahh, Because I get a lot of coffee when you subscribe, so it's good for me. But if you are on Webflow University, you can track your progress throughout the course, which is brilliant. You can see how much percentage you have finished throughout the course. 

I, of course, or me, or however you say it, I have 100% all the time. Locked in. Yeah. And subscribe on YouTube and finish the course on Webflow University as soon as you can. It's good. It's actually great. It's fantastic.