In this post, I am going to show you how to learn HTML with it.
But, wait a minute.
If I wanted to know the HTML for that wonderful interface, why can't I just right click and select 'view page source'?
Well, yes you can. However, can you locate the specific HTML tag among the big pile of HTML code in 5 seconds? With Chrome's built-in 'Inspect element' tool, you can (another reason why I like Chrome).
So, let's get started, shall we?
Step 1)
Right click anywhere on the page, preferably near the element that you wish to inspect.
Next, select 'Inspect element'.
Step 2)
After this, a new console will open up from the bottom. This is the 'Developer tools'.
On the bottom row there should be a magnifying glass icon (as shown below), click it.
Step 3)
Now, hover your mouse over to the element that you want to know its HTML code and click it.
Note that, as you hover around, the hovered element will be highlighted.
In this example, it's the HTML code of one of the sidebar block that my friend wanted to remove.
And, you're done. Clicking the chosen element brings you to the exact HTML code tag that represent the element. Try to hover over the HTML code in the console too, notice that Chrome will highlights the element especially 'div' tags.
Repeat for elements in other part of the page.
Does that even took 5 seconds?
What's next? Additional Resources
- Learning HTML, CSS, and Javascript from the Ground Up with Google.
- Then HTML5
- More CSS->here.
- Avoid w3schools.com at all costs! Here's->why.
Well, that's all for now. Any questions? Drop me a comment below.
P.S. Sorry for MIA for a while, but I'm back now.
P.P.S By the way, check out my friend's food blog, yummytraveler.com if you're passionate about gastronomy.
P.P.P.S. My PC has yet to encounter any problem with viruses since I stopped paying for antivirus about 7 months ago.
No comments:
Post a Comment