For free and easy web editing, do it in your browser

Some of us still have to write html and css, but gone are the days when we needed expensive software to create and test it. Here’s how you can do it in your browser, for free.

Web browser icons.

I look after a charity’s website, which contains a lot of content that changes frequently. The content management system is old and we don’t run a testing server. Therefore, I need a way to tweak and preview my work without affecting the live site. I used to rely on Dreamweaver, but now I use my browser.

I’m using Google Chrome in Windows Vista (I know, I know), but most of what follows can also be achieved in the other major browsers. I’m also presuming that you, the reader, have a basic grasp of html and css.

html/css

The latest browser versions include their own developer tools. Open a web page and right-click on something. In the context menu that appears, there should be an item like ‘Inspect element’. (In Internet Explorer, press F12 or go to Settings and select ‘Developer tools’.)

(From now on I’ll stick to Chrome, but if you’d rather play around in another browser, be my guest.)

I now see a set of panels at the bottom of the screen. By default, they show me the page’s underlying html and css. I can edit both the content and the css and see the results in front of me (until I refresh the page, which – obviously – resets everything).

If I right-click on an element in the html view, I can edit the html itself or copy the whole lot, including its child elements. This means I can easily copy chunks of a page, edit them in a text editor (I use Notepad++, which is free), then paste them back into the page.

This is all great, but wouldn’t it be even better if I could simply edit directly on the page, like in WordPress or Microsoft Word? With a plugin, I can. (I use PageEdit in Chrome, but there are plenty of others.) It gives me a set of editing tools (I can change the font size, add bold and italics, edit the text, add pictures – you name it) and it lets me export the results as html. Nice.

Colour

ColorZilla logo

ColorZilla

Perhaps I’ve seen a colour that I want to use in my page. Using ColorZilla (a plugin for Chrome and Firefox), I can select the colour from the screen and copy its values (as hex, rgb or hsl). I can then paste those values directly into my css.

Capturing

Of course, everything is lost when I reload the page. So, what If I want to show someone else my work? Well, I simply take a screenshot and send it to them. My PC will do that without any extra software; but, using plugins, my browser can do it better.

Awesome Sceenshot logo

Awesome Sceenshot

I use the Awesome Screenshot plugin (available for Chrome, Firefox and Safari). Not only does it let me take a picture of the screen, but I can capture the whole page if I want to, even if it’s too long to be visible. Once the image is captured, I can crop it and annotate it.

FTP

FireFTP logo

FireFTP

So, you’ve edited your page to your satisfaction and have sought your colleagues’ approval. Now, you just need to upload it. Well, the browsers can help here too, as most allow you to access ftp directories. However, the FireFTP plugin for Firefox gives you much greater control over your ftp accounts (in my opinion, it’s better than many of the stand-alone ftp clients that are on the market).

Now, go exploring!

So there you have it, a taster of what can be achieved in the browser without having to fork out for expensive, industry-strength software. But I’ve only scratched the surface: now go and mine it!

2 thoughts on “For free and easy web editing, do it in your browser

  1. Gavin Wray

    Some good links there, thanks. ColorZilla and the tool to capture full size (scrolling) screenshots are going to be useful to me.

    I thought I’d chip in and link to Code School’s free course on how to use the Developer Tools in Google Chrome: http://discover-devtools.codeschool.com. Level 1 and 2 deal specifically with the tools to edit html and css.

    Personally, I found the Developer Tools a little difficult to start using, particularly for live editing html and css. There are some neat ways you can edit the live html or css, see the updates in your browser and then save the changes to your source files. It can help you work faster as it removes one step from the ‘copy to text editor, save, upload, refresh page, repeat’ workflow.

      

    Reply
    1. Michael Post author

      Thanks Gavin. Plugins like PageEdit are great for that, but I still find it handy to use the developer tools for some things – maybe because I’m used to using Firebug. But I mentioned them mainly because they’re native and some people don’t trust plugins.

        

      Reply

Leave a Reply