Hello, welcome to another exciting episode here at ITPro TV. I’m your host Mike Rodrick. And today we’re doing HTML, CSS, and Bootstrap. And with me today is our subject matter expert Mr. Victor Moreno from the FVI School of Nursing and Technology.
How you doing Victor?
Victor: I’m doing great Mike.
So today, in this particular episode, we’re going to be explaining what a website is. We’re going to be giving some context to all the stuff that we’re going to be learning later on. We will also introduce you to the two main tools that you’re also going to need to use to do any kind of web development. So that’s your text editor is going to be your best friend. And looking under the hood of your browser, that’s not something that a lot of people have done, looking on the hood of their browser.
So let’s talk about what a webpage is. If you look at my computer really quick for a second. I already have the ITPro.TV website loaded, but if I were to type here, itpro.tv. What I’m really doing is I’m instructing my web browser to send an HTTP request to a server. And you IT guys know a lot better than me how that happens, how it ends up with DNS, all this stuff, making it there. And I receive the response back, but that’s what I’m really doing. I’m just using software in a graphical way to send a request to this web server. So, let’s look under the hood of the browser, right here. These errors are just some add-ons that I have that I block a bunch of content, and this is how you block that.
Mike: Now, how did you pull that up so we could.
Victor: Yeah. Thanks, good question. So, the easiest way to remember is basically to right-click anywhere on the page. And then you can click on Inspect. Okay, so that’ll bring up a panel that has a bunch of tabs right here. And the way that I did it:
Command for PC: Hit F12
Command for Mac: I think it’s Cmd-Option-I, but don’t quote me on that I’m not a hundred percent sure.
But F12 is how you do it on PCs. So let’s take a look at what happens. So look at when I typed itpro.tv, basically what happened is I got all of this stuff back. All of this code, all of this source code right here, that’s what I got back and my browser’s the one who basically reads through all of that stuff, lays it out, figures out what it is, figures out what images it needs to load, figures out what stashes it needs to load. All these things it needs to do in order for me to have this nice, awesome-looking website. And if we go to the Networking pane here, we can actually see that process in action. So I’m just going hit Refresh here. And if I expand my whole Developer Tools right here, look at all the stuff that actually happened as a result of me typing itprotv.com. I’m hitting Enter.
Mike: So much more than a single request going out, there’s actually a lot of things going on in the background there.
Victor: Exactly because what happens is, once you get that response, that source code, this was the original request right? I get this response, this source code. This source code might cause additional requests. So it might pull up a bunch of scripts, it might pull up a bunch of CSS style sheets, a bunch of images. And each additional asset that you request, it actually has to get loaded individually. So as the browser goes line by line, from top to bottom running the HTML, it might find an image that it needs to load. So it goes and sends a request for the image. It might find a style sheet that it needs to load, it goes and sends the request for that style sheet. Maybe it finds a YouTube video that it needs to load, so it sends the request to YouTube, to load in that video. And as we can see right here, this is a script, another script, JW player, a bunch of scripts. You guys got a lot of coding going on here.
We have a PNG image and so on. So this is basically what happens when you’re sending a request. You’re really asking for a bunch of source code and then you’re your browser is looking through that source code pulling up any additional resources. And once it has everything put together, it does all this magic and puts this nice little layout for you.
Mike: And normally pretty darn quick, too.
Victor: Yeah yeah, absolutely. And as internet gets faster and faster, this gets better and better. And furthermore, as developers get savvier and savvier, they can find ways to package all the images in one, package all their scripts in one so that If you have multiple programs then you can only send one request. Because the developer did the job of packaging them all into one you only need to fire one request, get one response and it’s fast.
Mike: Very cool!
Victor: So, the next thing that I wanted to show you besides that network. Well if you actually click on any of these requests you can see the request headers and the response itself. Well the response in this case was a script so I don’t see it there. But you can see details about here.
And the other place that I wanted to take you to is the Elements pane. So the Elements pane is very important when we’re creating html layouts. Because, what it allows you to do is, visually, you can inspect the page. So, let’s say that I was editing this. This is a pretty complex page, but let’s say that there was a simpler page and I could, right-click here, Inspect. And it would take me straight to that element. And by mousing over it, I can see the visual representation right there on the page. So I can navigate which element is which just by mousing over here.
Victor: So yeah, we’re going to be getting into a lot more detail into that. This panel, on the right, right here. It’s all about CSS and it’s pretty complex so we’ll get into that when we get CSS. I don’t want to bombard with stuff here about the Developer Tools.
Victor: Especially since a lot of people haven’t seen this before. What I want to do now is take you to atom.io. Atom.io is the other element, the other best friend that I had spoken to you about, and that’s your text editor. So Atom is maintained by GitHub. GitHub is a very big and cool company. Everybody uses their main product, which is a source control product. It basically used by coders to maintain versions of their source code and control the deployment of certain features. Control the incorporation of certain features to what they call the main branch. So in short, it’s used by developers to collaborate with one another and they created this text editor, ATOM, which is like the cool kid on the block right now, a lot of people are using it.
Mike: I actually use it on my MAC as my text editor for a lot of my show notes and stuff.
Mike: I love the color coding that it does.
Victor: Yeah, right, the color coding is awesome, it does Markdown, it comes with a bunch of stuff. That’s a huge open source community. So there’s a ton of add-ons for it. And if you want to install it as a viewer you would go to atom.io. Click on Download. And one thing to know if you’re on a Windows machine, I personally use Windows so this is a word of advice for Windows users. It installs to the one profile, so it doesn’t install machine-wide, and that’s the main drawback that it has I think. If you want something that installs machine-wide because you want it for a lab setting or what-have-you.
For students or for a computer that’s going to be shared between multiple people, there’s another open source set of software made by Adobe and it’s called Brackets. So if you go to brackets.io, that’s where you can download that one and install it. And that one does run, that one does install through old profiles on the the computer. So, right now, what I’d like to do is just take you, show you, around an atom. And explain a little bit about what’s going on there.
So the way that you normally work with these modern text editors like Atom, Brackets and even Sublime texts is another one that’s very popular is you want open a folder with it, so you want. The text editor will have a little file panel on the left and you want that file panel to be looking at specific folder where all stuff for your website is going to be. So I’m creating this new folder, and I’m going to call it like first HTML lesson.
Another thing for naming convention folders, I think that you should stay away from spaces and stay away from capitals. Because when you type URLs, you type website addresses. That stuff is, especially the path after the domain name, that stuff is going to be case-sensitive for the most part, in most cases. And you don’t want to confuse yourself having capital letters, and then if there’s a space, you have to type %20. It gets messy. Let’s just not name anything with spaces when it comes to web design, no spaces and try to stay away from capitals as far as naming your files and folders go.