How to get the html code and styling of any website

If you own a website or a blog, you always want to have the best design and styling on your website. You keep searching on internet for terms like "how to make a div look good", "how to add effects in particular section of website or blog" and etc.

Also while those searches you come across designs that you were looking for but not with the code ready to copy. Instead you get it in working state on the website you found accidentally while searching. Now if you want to know how that thing is designed or more precisely its basic HTML code, what would you do?

Here I will cover simple steps to find out the  basic HTML code of any element in any website. Note that most of the websites use external CSS (Cascade Style Sheet) for adding styles to their website elements. We won't be able to see those codes. Still we can get enough information to start designing our own element using help we get from "Inspect Element" property in Google Chrome and Mozilla Firefox and other advanced browsers.

Start with basic learning
Internet explorer shows "Properties" option when you right click on anywhere on the web page. It displays complete HTML code of loaded webpage. If you have little knowledge on website designing, it can surely help you a lot. But if you don't understand HTML code, give a try to this website. w3schools.com.


Now its time to get extra knowledge
If you are on Google chrome and Mozilla Firefox, you are going to enjoy some advanced features, like getting area specific code in websites, their styling shown in different pane for your ease and rest depends on your own knowledge.

Steps to follow 

1. Right click on any element of the website to know more about it. For example, if you want to know how we have designed the pager shown our home page, you can right click on it and then select Inspect Element option from the list. 

2. As soon as you click on the Inspect element option, another screen comes out of the bottom of your browser with all the details. Hover your mouse over the code below to see where its related to the element you clicked on. In our example we clicked on the 'Next' button. When we brought pointer over the <div class="blog-pager" id="blog-pager">, it automatically highlights the area where this div is. 

Notice it also tells some extra information there on the highlighted area. Here it is showing the 

class and the dimensions of the  Div element.

3. If you will notice, there is another area at the bottom right which displays other related information. 

It shows 

• Computed styles
• Styles
• Metrics
• Properties
• DOM Breakpoints
• Event Listeners 

You can expand each option to get details about it. If you are weak in HTML coding, don't check the "Show Inherited" option in the same window. See the image for locating it. 

4. Use the search option at the bottom most bar to get code of any element. For that click on the search icon, then select the element on the webpage to get its code. Its HTML code will be displayed to you. Without selecting search option, wherever you will click, its normal action would take place.

This was the complete guide for getting basic HTML code of any webpage.  By using this technique, you will learn a lot of new things and then you can easily use that information on your webpage. Do share with us if you have learned a new thing while doing it. We will keep on improving this article with your continuous support. 

---