edit any web page from a browser

How to Design And Edit Any Web Page From A Browser?

Do you know, you can edit any web page from a browser directly? Yes, you can do it right from your chrome browser using Developer Tools. This does not only work for chrome browser but also work for other standard browsers like Firefox and Safari. In this article, we will use only chrome browser. You can not only just edit any web page you can also design that web page.In this tutorial,

You can not only just edit any web page you can also design that web page.In this tutorial, I will show you these steps how to design and edit any web page from a browser. Just you need to know some basic of HTML and CSS. If you don’t have basic about this topic then you can check w3school.com. They have a great tutorial about HTML and CSS and it is enough for beginners.

Recommended:

How to edit any web page from a browser?

  • Open any web page that you want to edit
  • Right click on the text that you want to edit
  • Select inspect elementinspect element
  • The Developer Tools will open and from there select Elements (from the top left corner from the Developer tools).
  • In which text you right clicked that’s corresponding Document Object Model(DOM) will be selected.edit text on browser
  • Double click on the text, edit mode will be enabled then
  • Now start editing the text
  • After editing, click on the outside of the Developer Tools box and you will see edited text. This is how we can edit any web page from a browser.Text edited

How to design a web page from a browser?

  • Here you have to repeat same things you do before. Open any web page that you want to design
  • Right on the text or any element that you want to design
  • Select inspect element
  • Developer Tools will open, from there select Elements
  • Then select Stylesedit design from browser
  • There you will see CSS elements below
  • Design according to your choiceedited design

Remember you can edit any web page from a browser but this change is not permanent. When you reload the browser you will see it’s default design or default text. This option is helpful for learning purpose. If you chang some certain element or design, then how it will appear in the browser you can check it directly from your browser. One who is learning web development or designing it is good practice to use Developer Tools for them. It will help you to learn faster.

You may like this:

Leave a Reply

Your email address will not be published. Required fields are marked *