Merge pull request #4 from sarbbottam/fix/heading

fix(heading): usage and order

Author: gokulkrishh

src/step-1/Introduction.js

@@ -7,7 +7,7 @@ class Introduction extends Component {
       <div className="introduction">
         <h1>1. Introduction</h1>
         <p>In this codelabs, you will be learning what is a progressive web application, how it works and how to build one.</p>
-        <p><b>What is a Progressive Web Application?</b></p>
+        <h2>What is a Progressive Web Application?</h2>
         <p>A progressive web application (pwa) uses modern web technologies to deliver native app like experience even when user is offline. Features are.</p>
         <ul className="pwa">
           <li><b>Responsive</b> - Fits any form factor and works across the devices.</li>
@@ -19,17 +19,17 @@ class Introduction extends Component {
           <li><b>Installable</b> - Add to homescreen.</li>
           <li><b>Linkable</b> - Easy to share.</li>
         </ul>
-        
-        <p><b>What you will learn</b></p>
+
+        <h2>What you will learn</h2>
         <ul>
           <li>App Shell Architecture</li>
           <li>Service Worker and its lifecycle</li>
           <li>Caching the resources</li>
           <li>Offline</li>
           <li>Native app like features.</li>
         </ul>
-        
-        <p><b>Things you need</b></p>
+
+        <h2>Things you need</h2>
         <ul>
           <li><a href="https://www.google.com/chrome/browser/desktop/" target="_blank">Chrome Browser</a> 46 or above</li>
           <li>Text Editor</li>

src/step-3/AppShell.js

@@ -37,14 +37,14 @@ class AppShell extends Component {
         <h1>App Shell Architecture</h1>
         <p>An app shell architecture is minimal level <span className="highlight bold no--bg">HTML, CSS, Javascript</span> required to power the application user interface.</p>
 
-        <h3>Components for App Shell</h3>
+        <h2>Components for App Shell</h2>
         <ul className="">
           <li>Header with icon and title</li>
           <li>Menu with overlay</li>
           <li>Main section</li>
         </ul>
 
-        <h3>HTML for App Shell</h3>
+        <h2>HTML for App Shell</h2>
 
         <Highlight lang='html' value={appShellCode} />
 
@@ -73,7 +73,7 @@ class AppShell extends Component {
 
         <p>See the full result <a href="http://www.webpagetest.org/result/161021_1H_G6C/">here</a>.</p>
 
-        <h3>Applications using app shell in production</h3>
+        <h2>Applications using app shell in production</h2>
         <ul>
           <li><a href="https://www.google.com/inbox/" target="_blank">Inbox</a> by Gmail</li>
           <li><a href="flipkart.com" target="_blank">Flipkar Lite</a></li>

src/step-7/Finish.js

@@ -12,7 +12,7 @@ class Finish extends Component {
       <div>
         <h1>Deploy</h1>
         <p>The final step of this codelabs is deploying our github cards with HTTPS server.</p>
-        <h3>Follow the below steps.</h3>
+        <h2>Follow the below steps.</h2>
         <p><span className="highlight bold no--bg">Step 1</span> - Install surge via npm.</p>
         <Highlight lang="bash" value={surgeInstall} />
 
@@ -24,7 +24,7 @@ class Finish extends Component {
 
         <p>After successful deployment, you will get an url in your terminal. Copy it and open in your desktop and mobile browsers :D</p>
 
-        <h3>What next?</h3>
+        <h2>What next?</h2>
         <p>Everything is perfect, except the deployed site is loading in HTTP unless we change the url to HTTPS. So lets fix it by forcing HTTP to redirect to HTTPS.</p>
 
         <Highlight lang="bash" value={surgeDeployHTTPS} />