added two more points for responsive

Author: khan4019

js3.html

@@ -80,21 +80,19 @@ <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">
-        <p><strong>Question:</strong> What are the things you would do to make a website responsive</p>
-        <p><strong>Answer:</strong> There  is a series of stuff you can do. and a summery of them are</p>
+        <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>
           <li><strong>layout</strong>, keep it simple. dont use div, absolute position or float unnecessarily. kill inline styles. use HTML5 doctype, reset stylesheet, semantic core layout.</li>
           <li><strong>media queries</strong>, to load stylesheet based on the size of the media or apply rules based on the orientation of the media</li>
           <li><strong>breakpoints</strong>, choose the right breakpoints to switch style. common breakpoints are &lt;480px, &lt;768px, &gt;768px. There are three nice to have breakpoints &lt;320px, &gt;769px and &lt;1024px, &gt;1024px.</li>
-          <li><strong>flexible</strong>, don't use fixed width rather use relative to viewport size. like em, %</li>
+          <li><strong>flexible</strong>, don't use fixed width rather use relative to viewport size. For example, 50% of the viewport will always be half of the screen and doesn't depend on the device. This is also important for font-size and it is recommended to use something relative like em</li>
           <li><strong>pictures</strong>, pictures are a big of a deal for responsive websites. Right now you can change src attribute of an image based on the media query alone. Hence you can use background-image or use different picture versions and show/hide their parent in media queries.</li>
-          <li><strong></strong></li>
-          <li><strong></strong></li>
-          <li><strong></strong></li>
-          <li><strong></strong></li>
-          <li><strong></strong></li>
+          <li><strong>max-*, min-*</strong>, you can use <code>max-width:768px;</code> <code>min-height:350px;</code> to apply style</li>
+          <li><strong>navigation</strong>, re-layout navigation/ menu in lower resolution is very important</li>
+          <li><strong>tools</strong>, don't reinvent the wheel. use bootstrap or similar libraries for responsive website</li>
         </ul>
-        <p>ref: <a href="http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic#awesm=~ou5vLQZqqXIubV">Read best practices</a></p>
+        <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>