added browser comptability steps

Author: khan4019

js3.html

@@ -80,6 +80,7 @@ <h2>part -3: intermediate</h2>
       <p class="gray"> <span class="purpleBold">More Questions</span> <a href="css.html">css interview questions</a>, <a href="html.html">html interview questions</a> </p> -->
 
       <div id="responsiveWebsite">
+        <h2>responsive</h2>
         <p><strong>Question:</strong> What are the things you would consider to make a website responsive?</p>
         <p><strong>Answer:</strong> It depends on what I am trying to do but you can talk about a some of them-</p>
         <ul>
@@ -94,8 +95,27 @@ <h2>part -3: intermediate</h2>
         </ul>
         <p>ref: <a href="http://www.1stwebdesigner.com/css/responsive-website-tutorial/">responsive tutorial</a>, <a href="http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~ou5vLQZqqXIubV">Read best practices</a></p>
       </div>
-      
-      
+      <div id="browserCompatible">
+        <h2>browser compatibility</h2>
+        <p><strong>Question:</strong> How will you make a website compatible to multiple browsers?</p>
+        <p><strong>Answer:</strong></p>
+        <ul>
+          <li><strong>html</strong>, write valid html. use doctype.</li>
+          <li><strong>css</strong>, understand box model, float, clear and other css properties. Remember older browser doesnt support css3</li>
+          <li><strong>browser prefix</strong>, dont use browser prefix. Or you could use it if you implement <a href="http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/">graceful degradation</a></li>
+          <li><strong>tools</strong>, reset, bootstrap, <a href="http://modernizr.com/">modernizr</a>, jquery, etc.</li>          
+          <li><strong>never same</strong>, something will never be same across browsers like drop down menu</li>
+          <li><strong>internet explorer</strong>, understand problems in IE6, IE7. IE6 becomes problematic when float is overused like double margin on floated elements, negative margin. You can have a stylesheet for IE specific version.</li>
+          <li><strong>test</strong>, ther is no alternative to test your website as many browser versions as possible</li>
+          <p>ref: <a href="http://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/">cross-browser css coding</a>, <a href="http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/">css3 solutions for IE</a></p>
+        </ul>
+      </div>
+      <div id="compatibilityTest">
+        <h2>test compatibility</h2>
+        <p><strong></strong></p>
+        <p><strong></strong></p>
+        <p>ref: <a href="http://browsershots.org/">browsershots</a>, <a href="http://www.browserstack.com/screenshots">browserStack</a>, <a href="http://www.hongkiat.com/blog/complete-guide-to-cross-browser-compatibility-check/">compatibility checking tools</a>, <a href="http://www.1stwebdesigner.com/design/tools-browser-compatibility-check/">10 tools</a></p>
+      </div>
 <div>
   <!-- <h3 class="purpleBold">Express anger!</h3>
   <p class="gray">Feel free to express your anger (sorry u have to use facebook). also find out mistakes ( technical, wrong answer, spelling, grammar, sentence, whatever), let ur dude learn and grow.</p>