Main content
Using the browser developer tools
Web development is tricky. That's why web developers use lots of tools to help them with their jobs—and they're always looking for new tools to add to their toolbox.
The browser developer tools which are included in most modern browsers are a big favorite of most developers. Each browser differs in exactly which tools they provide, but they're more similar than they are different.
Inspecting HTML
One great tool is the ability to right click on any element on a webpage and inspect the HTML for that element. Here's a video of how to do that in Chrome:
Inspecting CSS
Another useful tool is the CSS inspector; with this tool, you can check out which styles gets applied to an element and play with them yourself. Here's a video showing how to use this tool in Chrome:
These tools can both help you understand the structure of other websites and help you debug your own websites.
There are lots more tools as well, but those two will give you a great start to being a better web developer. Try inspecting an element on this webpage and see what you find out!
Want to join the conversation?
During the video of Using inspect Elements For CSS Styles, the word 'opacity' caught my eye. The person had given a value for it. I saw that word just minutes back during the time when I was inspecting my favourite computer game. The opacity of a button was changing its value by itself. What do we have to do to make this happen?(88 votes)
You most likely witnessed a jQuery animation in action. When you want to animate styles, JavaScript can come in very handy!
If you're planning to learn JavaScript in the context of webpages, you'll learn about animating DOM elements with JavaScript/jQuery from these tutorials:
https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-animation/p/animating-styles-with-requestanimationframe
https://www.khanacademy.org/computing/computer-programming/html-js-jquery/dom-animation-with-jquery/p/animating-visibility-with-jquery(69 votes)
How do I take this and make it an actual website?(29 votes)
You can host your (static) site for free with GitHub pages, and even use your own domain. What I particularly love about this is that it forces you to use a version control system from the beginning -- a very good habit -- and also encourages you to share.
https://pages.github.com/(67 votes)
I looked at the Khanacademy HTML and it has tags like this:
_/ _/ _/ _/ _/
<true> <false>
what do they do?(19 votes)
The_/ _/ _/ _/ _/s spelled out "KHAN ACADEMY" in big text. If you notice, they were nested inside a that looked like<!-- -->. This means this is an HTML comment and that it does nothing to the actual code. It simply said "KHAN ACADEMY". I did not see the<true> <false>tags.<true>and<false>are not valid HTML tags.(21 votes)
What is the <div> tag in HTML?(16 votes)
<div> is the abbreviation form of the word 'division', which stands for an area. When you are adding id or class to a div tag, all tags within the div tag will be affected.(22 votes)
How was the image an ellipse in the webpage for Joan of Arc?(11 votes)
With border-radius property, for example:
img { border-radius: 80%; }
You can use percentage (%) or pixels (px) values.(17 votes)
can you set a image as the background.(10 votes)
Is there any way to inspect a webpage from a mobile device, like an iPhone?(5 votes)
Yes hold your finger on the text to open it(1 vote)
how do you use the inspect element on mac OS "El Capitan" safari?(7 votes)
You need to enable developer tools first in the Advanced menu.(8 votes)
- In the CSS video to bring up the color picker she doesn't use rgb but #ff0000, would there be a particular reason to use one over the other? Presumably there are different, in what way?(4 votes)
- Color is just a number. Hexadecimal values are harder to manipulate (at least on Khan Academy, maybe it's different elsewhere) but are also more compact. At the end of the day, it's up to you which you would like to use.(9 votes)
Whilst inspecting some random websites, I have oftentimes come across CSS that is struck through (line-through) or has translucent / faded properties.
What is this and why does it happen?(6 votes)
That is the browser saying that the CSS rule with a line through it is not being applied to the element currently being inspected, because a CSS rule more specific to the element currently being inspected is taking precedence.
This is caused by Inheritance and Specificity.
Khan Academy video on inheritance: https://www.khanacademy.org/computing/computer-programming/html-css/css-text-properties/p/css-inheritance
Khan Academy video on specificity:
https://www.khanacademy.org/computing/computer-programming/html-css/more-css-selectors/p/css-specificity
Hope this helps!(7 votes)
