Introduction to Web Development Tools

[00:00:00]
>> [MUSIC]

[00:00:39]
>> Nina Zakharenko: So I've been working as a developer for the past eight years and it's a job that I find really rewarding. Cuz I feel like I get to go to work and solve problems. And I find it really fun and so I'm hoping to share this, some of the skill set with you.

[00:00:56] We're kind of scratching the surface, but it's going to be enough for you guys to kind of get a grasp of everything and know enough to know how to find more information and how to learn some of these things in a more in depth kind of way. So the first thing that we're gonna talk about is our tool set.

[00:01:13] And it's really, really important and why? It's because the tools of our trade are designed to help us. To help us solve problems, to help us do things faster, and you need a good text editor and a way to debug HTML, CSS, and Javascript. And there are lots of browsers out there but Chrome is kind of, it's the one that's really geared towards developers.

[00:01:39] It's much easier to find your way around. The developer tools are built-in, unlike some of the other browsers. And the text editor we'll be using today is Sublime Text. But you can use any editor of your choice. So the reason we use a text editor that's specific for code is because we have syntax highlighting for all the different programming languages that we use, HTML, CSS.

[00:02:13] So, in this example, the brackets are highlighted in a different color, and the string, which is the thing between those quotes, is a different color as well. And that's a visual indicator that things are correct. And so your brackets have to match up. And so if they're colored, it's much easier to see if you've missed something.

[00:02:37] Same with your parenthesis. So Sublime text has a great feature. Where your parenthesis, when they match up they will be highlighted, so if you type parenthesis into Sublime text, it will put underscores underneath the matching pairs. So in the example above we have an extra parenthasy with no match and so when we type it and put our cursor on it, we'll see that no other parenthesis highlighted.

[00:03:09] It also has a great tool called replace all, so for example if you wanna change a string in a whole block of text, you can go to edit and replace type in your new thing, hit replace all, and it'll find all of the instances and swap them out for you.

[00:03:31] So, we're gonna use Chrome to debug our web pages, and if you guys could visit google.com and right click anywhere that's not an image, and click on View Page Source.
>> Nina Zakharenko: So when you guys do that, you're gonna get something like this. And it's like whoa, what is all this stuff?

[00:03:56] There's a bunch of numbers, not a ton of words. It's not really clear at all. So a better way of debugging a page. And you guys cant try this out by right clicking on the Google image and going to inspect element
>> Nina Zakharenko: Okay, that's much better. So by doing this, you're scrolling right into the source of the code that does the specific thing and so here you can see it's an image tag which we'll talk about later but there's also a link to the image that's being used and if we hover over that link, we'll see the Google logo.

[00:04:49] So a great thing about Chrome is that you can actually go ahead and update the values. So, if you have this up here, you'll see that there's a height tag. You can double click on it and update the value. So you can enter new value, press Enter and you'll see your changes.

[00:05:13] So one thing to note about this is these changes are only on your computer if you refresh the page you'll lose them. So.
>> Nina Zakharenko: Let's try and change the Google logo. So we're going to navigate to google.com, we're going to right-click and inspect the google image element. And then we're gonna set the width to 700, and the height to 30.

[00:05:45] So I'll go ahead and do that with you guys.
>> Student: You just have to go back.
>> Nina Zakharenko: Back.
>> Student: Yeah [INAUDIBLE].
>> Nina Zakharenko: Is that fine?
>> Student: Yeah.
>> Nina Zakharenko: Okay, so we got google.com, we're going to right click, inspect element. It'll pop up this console here and let me make this text size bigger so that you can see it.

[00:06:18] So we're going to double click in the height. Change that value to 30. And double click in the width and set that value to 700 and press Enter. And you guys should see something like this.
>> Nina Zakharenko: Is everyone see that? Does anyone need help?
>> Student: [COUGH]
>> Nina Zakharenko: Okay.

[00:06:42] Great
>> Nina Zakharenko: Okay, so that was our result. The other great thing about Chrome is it has something called a Javascript Console which we'll be using a lot later in the class. And to do that, you go to View, Developer, and Javascript Consoles.
>> Nina Zakharenko: So, can everyone open that up?

[00:07:24]
>> Nina Zakharenko: So it's View, Developer, and JavaScript Console. For the purpose of this class, it would be nice to open that up in a brand new tab so that if there's anything going on with the webpage that you have this consult open on, it's not interfering with your work.

[00:07:45] For example, like Google here so this is totally fine we can just go in here and press Enter a few times to clear it out.
>> Student: [INAUDIBLE] On the top left. No top left yeah there we go. That was-
>> Nina Zakharenko: This? There we go. Yup, you can hit this right here to clear out your console.

[00:08:10] So we're going to type something out here and see our result. So let's type console.log, and in the process, this developer console should be giving you hints. So as you type you'll see things that match. And then we're gonna put a quote and Hello World match that quote and match that parenthesy.

[00:08:43]
>> Nina Zakharenko: Once you have that and you hit Enter, if you scroll up you'll see that Hello World was printed right here.
>> Nina Zakharenko: So the other thing that we'll be using the console for a lot is if you have an error in your Javascript files. You'll see an indicator here in the developer toolbar.

[00:09:17] It'll show a big red X. And the number of errors that you have.