Video Tutorial: What makes a web page?

Transcript

[00:00:00] 

[00:00:05] Raphaël Titsworth-Morin: Hey folks Raph with Chewy here. So today we’re going to talk about what makes a webpage in the previous video we talked about what happens when you type a URL into your browser and you hit enter, about how you connect domain to a server and then how a server waits for that request and then send some stuff back.

[00:00:25] Today we’re going to talk about what is that stuff and how does it end up coming together as the webpage that you see in your browser? So what we’re going to do today, I’m gonna switch over here and we’ll see that we’re [email protected] and this project called chewy static site. I’m going to actually clear this all out.

[00:00:48] And you’ll see that we’ve got these three files. Index dot html, script.java dot, JS, and style dot CSS. Glitch is this website that you can use to edit code and deploy a simple websites. If you can use it for. If you hook it up to a domain and you want to keep it up and running all the time, then you can pay them for better performance and to do some other sort of fancier stuff.

[00:01:14] But it’s a great way or a great place to get into the basics of web development and get started building a site. So if we look at index study, HTML, script dot JS, and style dot CSS, those are the three things that basically will make. This page and we’ll break them down into into their functionality.

[00:01:39] HTML is a document. It’s a hypertext markup language. And basically what that is the stuff of your page. It’s the text, it’s the images, it’s all of that sort of stuff. So that’s. That’s HTML. The next thing you need is CSS. This is the styling. It defines not what this stuff is, but how is it displayed by the browser?

[00:02:06] And then finally JavaScript is the layer of functionality and interactivity. So you use JavaScript to make things move around or to have things change or to fetch new data from a server and display it in the existing page or anything like that So let’s start with HTML. So you’ve got this HTML document here, and right now it’s empty.

[00:02:29] We’ve just got a white page. If I take a look at what’s on here, you can see that it says Hello Chewy! At the top here that comes from this title tag. So tags are what HTML is made of. We have this initial one, which we can ignore for now, basically it tells the browser that this is HTML and how to deal with it.

[00:02:50] Then the next thing is your HTML tag, which says, okay, everything inside of here is our HTML for the document for this page, the head is basically hidden stuff. This is not anything that’s going to be displayed by the browser, but it’s a great place to load your other assets like style dot CSS and script dot JS.

[00:03:11] It also handles things like the title. So this is something that’s not displayed on the page, but you want it at the top of your. Your tab right there. So I could change that to Hello! And there we’ve got hello, let’s change it back to Chewy! And so that’s how that works. You’ll notice that a glitch automatically saves things.

[00:03:33] So if I make a change here,

[00:03:39] you’ll see it refresh and it’ll automatically display things. And here’s our first bit of content. So that. Title a header and a level one header the biggest header, the most important header, and actually also important from other, for other reasons like search engine optimization. But we can dig into that in another video.

[00:04:01] Basically all of our content will be wrapped in these different tags. So tags start with an open angle bracket like that. The name of the tag. And then closing angle bracket. And so this is, that makes up the opening tag. And here’s the closing one, which is exactly the same, except it’s got a slash before the name of the tag.

[00:04:25] So you can take a look at how we can have different levels of headers and how the browser will, by default have different sizes for those

[00:04:48] I like here. So here we’ve got the six different header sizes. There are other elements like paragraphs. This is a paragraph.

[00:05:00] Let’s see that there. There’s other sort of special elements that are I don’t know if they’re special that there’s different types of elements so you can create lists. So UL that’s means an unordered list. LI means list element one, two. So you can see these things showing up. There are things like spans, which are basically just ways of specifying other stuff within an existing sort of text tag. So if you’ve got a header and you want to do something special with a chunk of that header, maybe give it an underline or something like. Then you can specify that you can use the span to do something different to that little chunk of text within your outer tag.

[00:05:59] There are also things like divs. Divs are ways of moving things around into different sections. So let’s say we wanted. An H1 in here, and then we wanted another div that had your content.

[00:06:23] It’s just a way of like splitting things up and then you can use these things to move things around the page. You could say that, I don’t know, this div should be on the left and this one should be on the right and this one should be pink and this one should be purple or whatever. But it’s just ways of grouping and organizing things.

[00:06:41] You’ll eventually, if you dig deeper into this, you’ll realize that there’s also tags that specify, not just that are essentially divs, but that also tell the browser a bit more about what’s in the div. So you’ll have some, like a main, which basically tells the browser. This is the main thing on the page or article.

[00:07:05] If you want to specify that this is an article and there’s one that’s for, to specify navigation and an aside, which means well as you might imagine side content not your main thing, but something else. And all kinds of stuff. But we’ll stick to the basics for now. So H1 paragraph div, you can do a lot of stuff with headers, paragraphs and divs.

[00:07:29] So here we got the structure of a page. We’ve got some content and now we want to make it look different. So let’s hop into our css. So the first thing I’m going to do is I would like to not be using a serif font. I want a more modern looking sans-serif font. So I’ll do body HTML. And that’s saying, I want to apply whatever’s in here to the body tag and the HTML tag.

[00:07:59] And technically we could just stick to body. I’m going to say font family is sans-serif, and now we’ll see this switch to a sans-serif font. I also think that our H1 should be bigger. So H1 font size I dunno, 60 pixels, so pretty chunky. And I think that all of our paragraphs should also have a line height of, I dunno, 25 pixels. I want things to be really spaced out here. I’m just going to go to a website here that generates some text. So generate some lorem ipsum placeholder text.

[00:09:03] You’ll see that it’s all one big paragraph now. That’s because if we want to specify that this should be individual paragraphs, we’ve got to wrap each line here and our P tags. My bad. Forgot to close that one.

[00:09:39] Okay. I think that should be all good. Yeah. So now we’ve got our content. Cool. Cool cool. And so you’ll see. That CSS makes all of these lines have that line height. And I can make the color purple if I want. So all the paragraphs are now purple text, or maybe I can, maybe I want to make the, yeah. Anyway, I don’t know, do whatever you want. There’s a whole bunch of stuff you can do. But you’ll see that affects all of them. So let’s say you want to apply something to a specific paragraph. So let’s say this one, I want this to be a class equals quote, let’s say this paragraph is a quote. So I want to make that super obvious that it’s different by saying P dot quote, actually, you know what?

[00:10:32] I’ll remove that P. I’ll just say dot quote has a background, color of gray and a color of white. And you’ll see that’s gray now. Maybe I want to make it a little more pleasant looking. So padding 20 pixels border radius, 20 pixels. And that looks a little more fun. Cool. So that’s that specific one. 

[00:11:10] How is that working? Basically? Any tag can have attributes. So after the name of the tag, you add a space, the name of an attribute equals, and then the value of that attribute and in HTML different tags will have different attributes that you can apply to. To some extent you can add custom things, but class is one that you can basically apply to everything, to define a class of elements.

[00:11:37] So I could take this class and I could apply it to that. And now that those same rules are being applied to my H1, because it’s now part of that class. You can also apply things very specifically by saying ID. And so now in here, I could say a title, a color blue. And so that targets very specifically that element and you should never apply the same ID to multiple elements.

[00:12:15] And here in our CSS, we’ll see. How does that actually apply to a class or an ID? The hashtag symbol. Before the name of the ID is how you specify that’s going to apply to an ID. The dot before your class is going to say that this applies to a class. So these are what we call selectors.

[00:12:38] This is also a selector. It’s basically a selector for an element as opposed to a classroom. And these things can get very specific. So you could say that I only want to apply a certain rule to I don’t know, a div a span, actually let’s say a span that’s inside a paragraph that is inside a div and very specifically nested that way.

[00:13:02] So div paragraph span. And that will have a font weight of 900 right now. I don’t think we have any, but here we’ve got paragraph inside a div and then we’ll wrap this inside a span.

[00:13:28] Oops.

[00:13:36] So now you can see that one has heavier weight. And we can maybe say that should be underlined text decoration, underline. Cool. So now it’s underlined and it’s a heavier font. But you’ll see that if I moved that span, I don’t know to somewhere else, or if I were to, I don’t know, move this paragraph outside of the div. Now it’s no longer bolded because this is very specific. Has to be a paragraph directly inside a div spend directly inside that paragraph. It can’t be two divs. It has to be exactly this, this, or this, this way. You can specify things like, for example, we could say we could remove those arrows and say any div inside a span, regardless of how deeply nested they are should have that text decoration and font, and that weight.

[00:14:49] And so now if I did that, you’ll see it’s back there even without those arrows. But if I put one of those arrows back, so now it has to be a span directly inside a div. Now it’s gone. Okay. So that’s the basics of how we how we style and organize our content. We could talk next about how let’s talk next about how we create interactivity and how we make things move and do things on a page.

[00:15:21] So I’m going to take the span and I’m going to say that should be a counter. I want it to go up once a second and it’s going to start at zero. Let’s start it at zero. So zero there, and I’m going to hop into my JavaScript. So actually I won’t hop into my JavaScript. I’m going to do something that web developers rely on heavily here, which is I’m going to open up the dev tools and I’m going to use the console. You’ll find that if you do web development, you are always hopping in here, poking around like the document. Maybe you can see here, the CSS. So the exact same stuff that we were looking at two seconds ago the HTML and the console is where we do things with JavaScript. In this particular case, I’m going to use the console because I don’t have code auto completion in a in Glitch. Uh, Usually if you’re writing code, you’re going to use something like a tool like visual studio code or web storm, or any have plenty of tools out there to write your code.

[00:16:31] And most of the, most of them will have very fancy auto-completion that. Can you start typing a couple of letters and it’ll predict the function that you want to call or the variable that you’re trying to use. And. It makes things nice and easy. We don’t have that in Glitch, but to some extent, we actually have that in the console here.

[00:16:50] So I’m going to say const el is equal to document dot get element by ID, actually something I forgot. I need a way to target this thing. So I’m going to call this ID counter, and here I’m going to say. Counter. All right. And now if I do that, you’ll see that it’s selecting that span. Okay. Next thing.

[00:17:26] When we’re writing JavaScript, we have access to a bunch of sort of internal functions, like setInterval. So I’m going to write setInterval. I’m going to pass it a function. And I’m going to tell it to run every 1000 milliseconds.

[00:17:48] And here I’m going to say, const count is equal to el dot, get inner HTML.

[00:17:59] Actually, I think I could even just do inner HTML like that since we know that. The only thing inside that span is the number. That’s what we want. I’ll do const newCount is equal to count plus one, and I’m going to set the HTML dot inner HTML is equal to newCount. I don’t know if that has to be a string.

[00:18:36] I’ll just say you count. We’ll see if that works

[00:18:43] well, not quite. Okay. What’s missing here. This value is text and we want a number. So I’m going to do that again. el…. And then this is going to say, I’m got to switch that to say parseInt, and basically what this is going to do is it’s going to take this text. It’s going to figure out if that’s if that text is a number and if so, it’s going to return it as a base 10 number. So now in theory that should work.

[00:19:34] So that’s how we make things do stuff. But if I refresh the page, doesn’t do anything. And that’s because I know a lot of beginner, web developers when they first get started. There’s a little bit of confusion. About what it is that happens when you edit something in here in the browser. So if you’re messing with the console or if you changed something in these elements here, and basically what happens is like we discussed in the previous video, when you go to a URL, the server sends some stuff back and then your browser, as we’re talking about here, loads it up and presents it to you on screen.

[00:20:17] When you edit things. You’re just editing the version that’s in your browser right now. You’re not touching anything on the server. So it’s a, yeah. You’re. If you then refresh the page, any of your changes are going to be gone. So these things are saved in the browser though. For development purposes, basically to make it easy to debug stuff.

[00:20:41] So I’m going to grab that and I’m gonna grab this. And if I set that in here, you’ll see that now. Whoops. Oh, that’s the version before I added the parseInt. parseInt 10. Alrighty. There we go. So now we have a document that’s styled and does some stuff. And basically those are the core things on a webpage.

[00:21:13] You have your content, your styling for that content and the things that your webpage is going to do with that content. Now, this is just the very, very basics you can do all kinds of other stuff as you know, from visiting various websites. So you’ll be able to move things around on a page. You can make transitions for your content to fade in and out, and you can fetch new data from a server dynamically.

[00:21:40] You can do all kinds of things but it’s all built on these basics, HTML, CSS, and JavaScript. Now I’ll post this URL in the description. But basically let’s see. Oh, no, not here. In share Glitch makes it really easy to share each other’s code and to mess with it and try new things. So if you wanted to try things out yourself, you could go to this URL, hit remix.

[00:22:12] It’ll create a new version of the project for you. And then here you can do things like, I don’t know, make this happen every 200 milliseconds instead. So it goes nice and fast or 2000 milliseconds. If you want to slow it down or whatever you want. And that’ll be your very own version that you can then share with us at we.gochewy.io if you want or on Twitter we’re @gochewyio and we’d love to see what you make. We hope you learned something interesting today and that you’re that much closer to becoming a web developer or trying some new stuff out. So hit like, and subscribe and we’ll get new videos out to you soon.

[00:22:55] See you next time.

[00:22:57] 

[00:23:03] 

Related Articles

Responses

Your email address will not be published. Required fields are marked *