Learn CSS, HTML and JavaScript Offline! Using MBT HTML Editor

MBT-HTML-Editor The biggest problem faced by majority of newbie bloggers and web developers  is editing their templates. And the reason for this is lack of awareness with browser languages like CSS, XML, HTML, JavaScript etc. There are several websites online that have tutorials in these fields and one of such websites is www.w3schools.com This website is popular because it lets you play with the code! It has an Online HTML Editor Tool that lets you see live preview of the code that you use. Many developers find this tool pretty useful but has someone ever imagined that you can actually rip this tool out of w3schools and use it offline for practicing coding while offline? Well fortunately after some trial and error we could successfully create a similar tool entitled as “MBT HTML Editor” or Blogger HTML Editor This is the first time all bloggers are having a chance to have fun playing with important codes like CSS, HTML and JavaScript and learn important coding in a more interesting way! Now you can actually test a code before adding them to blogger.

This tool is better than any other HTML Editor found online or available as a software, 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
  3. Is equal in size to a peanut i.e 2.32 Kb
  4. Code is saved in browser if your PC shutdowns accidently 
  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

To Download this HTML Editor to your PC follow the steps below,

  • Click this link –> MBT HTML Editor (See it in action here: Blogger HTML Editor)
  • The MBT HTML Editor window will expand. Now you can start using it Online but to work offline in it you need to save it first. To save it click on the file menu at top-left-corner of your browser and then choose “Save As”  or “Save Page As”. Select a safe location and hit enter, as shown below,

downloading-html-editor

 

  • Done!

Troubleshoot:- In IE a Security alert will 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,

 html-editor-instructions

 

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

Playing With A Code

Lets now play with a code using our HTML Editor. I am using the 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/AVvXsEjevYHv86pvTtlfqO3cqdio6zoqpDpq1uMRszjjSOyYLIvK_W30vGmiu5zrRVwEpUrH78ccLPM8O0ToDGEj9hBQ7AB9spJ7D0nvIc_9X-31fMo8xlHn-BdKPSDd8HAipUf_jQ08OpiCEGgY/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,

MBT-HTML-EDITOR-DISPLAY

Some Important Tips:-

  • To go backward to previous changes, click Ctrl + Z
  • To go forward to last changes made, click Ctrl + Y
  • To get URL of an image saved in your hard drive suppose Drive F, open Firefox browser and simply type  F: in the address bar and hit enter. That drive will open and now simply browse to that image and right click on it and then click on Copy Link Location. Alas! you got the URL. Now use this URL wherever required during your offline code editing adventure.
  • 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

 

Hope this Tool will be of great use to bloggers and web developers across the globe. I hope you may find it easy to better understand and learn browser languages and implement them to invent new codes with new creativities. Do let me know how useful you find it. We played our part and now its your turn to spread the message!

Note:-

I have also created a tool that lets you change special HTML Characters to Entities. It lets you add HTML code to your posts and comment section as I usually do. Hope you will like it too. You can have a look at it by click this link –> Change Special HTML Characters To Entities

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

23 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Great post brother no words to thank you.

    ReplyDelete
  2. Awesome Job Mohammad!!!!! Unbelievable. you are a wizard man a pure wizard :!

    I'm also impr3ssed with that encoding tool.

    Thks for All these tools. You have started a revolution man!

    ReplyDelete
  3. You welcome Huzaifa and willey.


    I will avail the code for subscription widget soon

    ReplyDelete
  4. Hi MOHD__ i use chrome to use it but it says page not found error what to do??

    ReplyDelete
  5. @Anup

    I have corrected the error. You can now download it.

    ReplyDelete
  6. But where is download link?? no download link

    ReplyDelete
  7. oh my god ......u are tooo good man ,really havent came across someone like u who is so perfect.ur all the posts are excellent and belive me we are blessed to have helpful friends like u .
    god bless u
    bye
    priyanka rautela

    ReplyDelete
  8. This is really great...I like this software very much..

    ReplyDelete
  9. That is a great software for css, html, and javascript beginners. Thank you for sharing it to us.

    ReplyDelete
  10. Here is a FREE brand spanking new website to learn programming too!

    codecademy.com

    ReplyDelete
  11. thank's very much, I like if can make on mode offline.

    ReplyDelete
  12. this is freaking very very goo.!!!!!i can use this for my school..!!!thanks alot!!!!

    ReplyDelete
  13. Thanks to my all friends & this site owner for found a great site.

    ReplyDelete
  14. got to do a lot of work
    happy that i will learn so much
    sad that all these are here from so many years...
    fell a bit backward bro.. still lemme start

    ReplyDelete
  15. good work...a best software for beginners ...now i am using this one for html and css....thank you..:)

    ReplyDelete
  16. Wow...you are awesome. Very useful. Keep up the excellent work brother.

    ReplyDelete
  17. Very helpful software...I have been using it for html..
    Thanks for the share :)

    ReplyDelete
  18. Hey great information...thanks for sharing

    ReplyDelete