I have already posted In one of my previous tutorial about Unreadable or Hide Your jQuery Source Code Earlier. So, now your jQuery code is fully protected, It would be toughest task for someone to know / Understand your code. But what about HTML and CSS ?  Well, You can protect your HTML and CSS codes too, by converting them to Unreadable Javascript. Once you convert your codes to unreadable javascript, you can use in any HTML page, and no one will be able to find actual CSS or HTML code through page source of your HTML page.

Also see : Best websites to learn HTML, CSS, Javascript Online for beginners !

Firstly, select any HTML and CSS code that you want to convert to unreadable javascript. Your HTML and CSS code should be look like this :

<style type='text/css'>
.example {
background:#000000;
border: 1px solid #79D858;
width:400ox;
height:300px;
text-align:center;
}
.exampletexts{
font-size:36px;
color:ffffff;
}
</style>
<div class="example">
<div class="exampletexts">Example Texts</div>
</div>

Now, go to about.com’s HTML to Javascript convertor page  and paste your HTML and CSS codes together into textarea, Click “Convert” button then immediately it will convert your code to Javascript that you can find in other textarea box right below the convert button.

The converted javascript code will be look like this :

document.writeln('<style type=\'text\/css\'>\n.example {\nbackground:#000000;\nborder: 1px solid #79D858;\nwidth:400ox;\nheight:300px;\ntext-align:center;\n}\n.exampletexts{\nfont-size:36px;\ncolor:ffffff;\n}\n<\/style>\n<div class="example">\n<div class="exampletexts>Example Texts<\/div>\n<\/div>');

So, we have converted HTML and CSS code to Javascript, and now, we will need to convert javascript code to unreadable javascript code. That we can do using Obfuscator tool.

Go to Js Obfuscator tool Website , Paste the javascript code into textarea box, then press “obfuscate” button then immoderately It will convert your javascript code to unreadable javascript code. Then final unreadable javascript code will be look like this :

eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d.c(\'<2 e=\\\'b\\/g\\\'>\\n.1 {\\h:#a;\\6: 5 7 #9;\\8:f;\\t:q;\\i-r:s;\\n}\\n.3{\\u-p:o;\\j:k;\\n}\\n<\\/2>\\n<0 4="1">\\n<0 4="3">l m<\\/0>\\n<\\/0>\');',31,31,'div|example|style|exampletexts|class|1px|nborder|solid|nwidth|79D858|000000|text|writeln|document|type|400ox|css|nbackground|ntext|ncolor|ffffff|Example|Texts||36px|size|300px|align|center|nheight|nfont'.split('|'),0,{}))

Now, add javascript tag to the code and use it in any HTML page you like. I am reaping, don’t forget to add javascript tag to the code, after adding javascript tag to the code it should be look like this :

<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d.c(\'<2 e=\\\'b\\/g\\\'>\\n.1 {\\h:#a;\\6: 5 7 #9;\\8:f;\\t:q;\\i-r:s;\\n}\\n.3{\\u-p:o;\\j:k;\\n}\\n<\\/2>\\n<0 4="1">\\n<0 4="3">l m<\\/0>\\n<\\/0>\');',31,31,'div|example|style|exampletexts|class|1px|nborder|solid|nwidth|79D858|000000|text|writeln|document|type|400ox|css|nbackground|ntext|ncolor|ffffff|Example|Texts||36px|size|300px|align|center|nheight|nfont'.split('|'),0,{}))
</script>

Well, Now your code is fully protected and no one will be able to find out the actual HTML and CSS code, and it will be work perfectly, but one of the important thing is that before the processing, you should save your HTML and CSS version as backup, because after converting the code to unreadable one, You may won’t be able to convert it back to the HTML and CSS version.

If you have any question / Query about this tutorial, Feel free to ask by joining our forum @ https://www.makingdifferent.com/discuss/  Registration not required !