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 works for other standard browsers like Firefox and Safari. In this article, we will use only a 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 on how to design and edit any web page from a browser.
Just you need to know some basics 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.
- Best 5 VR technology gadgets available in the market
- 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 element inspect 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 the 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 the browser
- There you will see CSS elements below
- Design according to your choice edited 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 its default design or default text. This option is helpful for learning purposes.
If you change some certain element or design, then how it will appear in the browser you can check it directly from your browser. For 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.
Also Read: The Ultimate Direct Mail Marketing Guide