This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Tools" Lesson
>> 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: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.
>> Nina Zakharenko: So, can everyone open that up?
[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.
>> Nina Zakharenko: Once you have that and you hit Enter, if you scroll up you'll see that Hello World was printed right here.
[00:09:17] It'll show a big red X. And the number of errors that you have.