Learn CSS, HTML and JavaScript Offline!

The biggest problem faced by almost every newbie blogger and web developer is editing a template. And the main reason for this is lack of awareness with browser languages like CSS, HTML, JavaScript etc. There are several websites online that have tutorials in these fields and one of such websites is www.w3schools.com. OK so now lets say you know the browser languages now where do you practice them and put them to good use? In this case w3schools is my favorite website and it is popular because it lets you play with the code! It has an Online HTML Editing Tool that lets you see live preview of the code that you use. Every developer including me has found this tool pretty useful. I thought that you guys those who are not aware of this should have a chance to have fun playing with important codes like CSS, HTML and JavaScript and learn important coding in a more interesting way! Well fortunately after some trial and error we could successfully create a similar tool entitled as “MBT HTML Editor”. Now you can actually test a code before adding them to blogger!

I guess this tool is better than any other HTML Editor found online or available as a software, or you can say the best tool available in the following ways,

1. It works Offline in any browser available.
2. Takes less than a fraction of a second to show live preview of your codes.
3. It is even smaller than a peanut as its size is 1.63 KB.
4. Code is saved in the browser if your computer accidentally shuts down.
5. You can go back several times using Ctrl + Z and go forward using Ctrl + Y.
6. Can be used to test a code for Cross Browser Compatibility!
7. It is free of charge thanks to MBT! :D

Downloading Instructions

You can use this MBT Editor Both Online and Offline if you want.

• Click this link –> MBT HTML Editor 
• The MBT HTML Editor will open. Now you can start using it Online but to work offline in it you need to save it first. To save it, press Ctrl+U and then the source file will open up and then copy all the codes from there and then paste in a notepad and save it as HTML Editor.html ( .html is important) 

• Done!

Troubleshoot:- In IE a Security alert may appear, ignore it by right clicking on it and then selecting Allow Blocked Content.

Instructions For Using MBT HTML EDITOR

This tool consists of two panes i.e left pane and right pane. See a screen shot below,

The left pane is the area where you add your CSS and HTML codes and the right pane is the area where a visual view of the code is displayed. The CSS code is added just between <style> and </style>  and the HTML code is added just below </style>.

Note:- Where it is written Add Here it means Add HTML Code Here

Playing With A Code

Lets now play with a code using our HTML Editor. I am using the easy Image Opacity Effect Trick here as an example,

The CSS code for Opacity Effect looks like this,

img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
img:hover {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

Now to apply this effect to an image we will need an HTML code as shared below,

<img  class="Fadein"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsqB9nV7kb4uCPgvqxfCWmYJiM-DXAQyNBrPDYcuxBrLIkbowDMhn0w6zwp2ioSov86vsbaIdK08FqKGzvdseHgGqueeW1zbx78eGXZRX6qckG5Ev_ZGDlxYfB4fKSpV43igDJM0OJO7h-/s400/DIGG.png">

Now The best part, add the CSS code just between <style> and </style>  and the HTML code just below </style>. Hit the Preview button and watch the dancing code in action in front of your eyes. You can now start the play!

See this screen shot,

Some Important Tips:-

• To go backward to previous changes, click Ctrl + Z
• To go forward to last changes made, click Ctrl + Y
• Once you are happy with the code that you prepared then simply paste the CSS code just above ]]></b:skin> inside your blogger template and the HTML code where you want the effect to be seen i.e post or sidebar

Need Any More Help?

I hope that this editing Tool will be of great use to bloggers and web developers across the globe. I hope you will find it even more easy to better understand and learn the  browser languages and implement them to invent new codes. Do let me know how useful you find it and how much this new cool tool helps you. We played our part and now its your turn to spread the message! Peace :>