Let us quickly see how to edit a web page without using any special software. There are two simple ways to edit a webpage and preview it but remember that both these ways doesn’t make a permanent change in the site, these are just alternate ways to see how your website looks when you change the text, its color, etc.
Edit a Webpage for Fun
This is what most of them love to do, people love to change some stuff on their websites, but they fear making a mess out of it, so below is a simple technique or hack that can help you to quickly edit a webpage without messing up the live website.
- You obviously need a browser to start with, so fire it up and navigate to your favorite website.
- I am using Chrome Browser and I am right now on my own website.
- Now press enter key and you should see the message “on” returned back on the console as shown in the below screenshot.
You should now see the cursor blinking on the web page as it would be on a text editor, you can go ahead and try changing the things on the web page.
Edit a Webpage like a Pro
Well this option is often used by developers but wait, why let them have all the fun? Let us give them a shot too, what do you say?
This also involves the use of developers tools so hit the F12 key again to bring it up.
This time click on the Elements tab. This is on Chrome browser but it might be something different in other browsers, for example in Firefox it is inspector and in Internet Explorer it is HTML.
Below are two simple ways to edit a webpage and I have demonstrated it as simple as possible, what else you can do is something I leave it to your imagination.
1) Inline HTML Editing
You can actually edit text or change colors inline using HTML tab. Click on any control (like button /text box), right click on it and click “Inspect element” as shown below and then apply the changes you want within the Elements tab.
2) Edit webpage using styles window
If you can learn a little CSS then you can also use the styles window to make changes as shown below:
Why edit a webpage while the changes aren’t permanent?
You can actually switch colors, change the background or change text without having to go to your back-end pages. This is something very useful to see how it looks from the front-end without having to switch back and forth every time. This is not just for developers, website owners can play around this and show their developers what they exactly need from them.