diff --git a/content/index.md b/content/index.md
index 171b3a68790a..c60c51734359 100644
--- a/content/index.md
+++ b/content/index.md
@@ -3,6 +3,9 @@ title: webpack
 ---
 ## Write your code.
 
+<div class="homepage__wrap">
+<div class="homepage__left">
+
 **app.js**
 
 ```js
@@ -11,6 +14,8 @@ import bar from './bar';
 bar();
 ```
 
+</div><div class="homepage__right">
+
 **bar.js**
 
 ```js
@@ -19,8 +24,14 @@ export default function bar() {
 }
 ```
 
+</div>
+</div>
+
 ## Bundle with webpack.
 
+<div class="homepage__wrap">
+<div class="homepage__left">
+
 **webpack.config.js**
 
 ```js
@@ -32,6 +43,8 @@ module.exports = {
 }
 ```
 
+</div><div class="homepage__right">
+
 **page.html**
 
 ```html
@@ -48,5 +61,8 @@ module.exports = {
 
 Then run `webpack` on the command-line to create `bundle.js`.
 
+</div>
+</div>
+
 ## It's that simple.
 ## [Get Started](/get-started)
diff --git a/styles/homepage.scss b/styles/homepage.scss
new file mode 100644
index 000000000000..1b4cd15f67e4
--- /dev/null
+++ b/styles/homepage.scss
@@ -0,0 +1,30 @@
+.homepage {
+  &__left,
+  &__right {
+    width: 100%;
+    float: left;
+
+    @include break {
+      width: 50%;
+      padding: 0 15px;
+    }
+  }
+
+  &__wrap {
+    display: block;
+
+    @include break {
+      margin: 0 -30px;
+    }
+
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+  }
+}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index 69f73b5ce11e..8e12733dfbc8 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -8,6 +8,7 @@
 @import 'vars';
 @import 'fonts';
 @import 'functions';
+@import 'mixins';
 
 @import './reset';
 
@@ -85,3 +86,4 @@ details:focus, summary:focus{
 }
 
 @import './markdown';
+@import './homepage';
\ No newline at end of file
diff --git a/utilities/markdown.js b/utilities/markdown.js
index 095d850de954..9936a8b1a1ff 100644
--- a/utilities/markdown.js
+++ b/utilities/markdown.js
@@ -71,7 +71,7 @@ module.exports = function(section) {
       rendered = rendered.replace(/\n.*?MARKDOWNSUMMARYSTART.*?\n/g, "<summary><span class='code-details-summary-span'>");
       rendered = rendered.replace(/\n.*?MARKDOWNSUMMARYEND.*?\n/g, "</span></summary>");
     }
-    
+
     return rendered;
   };
 
@@ -95,7 +95,8 @@ module.exports = function(section) {
         xhtml: false
       };
 
-      var tokens = parseQuotes(content);
+      var tokens = parseContent(content);
+      tokens.links = [];
 
       return marked.parser(tokens, markedDefaults);
     },
@@ -112,23 +113,90 @@ module.exports = function(section) {
   };
 };
 
-function parseQuotes(data) {
-  var tokens = marked.lexer(data).map(function(t) {
+function parseContent(data) {
+  var tokens = [];
+
+  marked.lexer(data).forEach(function(t) {
+    // add custom quotes
     if (t.type === 'paragraph') {
-      return parseCustomQuote(t, 'T>', 'tip') ||
+      var quote = parseCustomQuote(t, 'T>', 'tip') ||
         parseCustomQuote(t, 'W>', 'warning') ||
         parseCustomQuote(t, '?>', 'todo') ||
         t;
-    }
 
-    return t;
+      tokens.push(quote);
+    }
+    // handle html
+    else if (t.type === 'html') {
+      tokens = tokens.concat(handleHTML(t));
+    }
+    // just add other types
+    else {
+      tokens.push(t);
+    }
   });
 
-  tokens.links = [];
-
   return tokens;
 }
 
+function handleHTMLSplit(tokens, htmlArray, merging) {
+  const htmlItem =  htmlArray[0];
+  htmlArray = htmlArray.slice(1);
+  const tickSplit = htmlItem.split('`');
+  const tickLength = tickSplit.length;
+
+  // detect start of the inline code
+  if(merging.length === 0 && tickLength%2 === 0) {
+    merging = htmlItem;
+  }
+  // append code inside the inline code
+  else if(merging.length > 0 && tickLength === 1) {
+    merging += htmlItem;
+  }
+  // finish inline code
+  else if(merging.length > 0 && tickLength > 1) {
+    htmlArray.unshift(tickSplit.slice(1, tickLength).join("`"));
+    merging += tickSplit[0]+"`";
+    tokens = tokens.concat(parseContent(merging));
+    merging = "";
+  }  else if (merging.length === 0) {
+    tokens = tokens.concat(parseContent(htmlItem));
+  }
+
+  if(htmlArray.length === 0) {
+    return tokens;
+  }
+
+  return handleHTMLSplit(tokens, htmlArray, merging);
+}
+
+function handleHTML(t) {
+    let tokens = [];
+
+    // Split code in markdown, so that HTML inside code is not parsed
+    const codeArray = t.text.split(/(```(.|\n)*```)/g).filter(v => (v && v !== '' && v !== '\n'));
+
+    // if only one item in codeArray, then it's already parsed
+    if(codeArray.length == 1) {
+      return t;
+    }
+
+    codeArray.forEach(item => {
+      // if item is not code, then check for html tags and parse accordingly
+      if (item.indexOf('```') !== 0) {
+        // split all html tags
+        const htmlArray = item.split(/\s*(<[^>]*>)/g).filter(v => (v !== '' && v !== '\n'));
+        tokens = handleHTMLSplit(tokens, htmlArray, "");
+      }
+      // normally parse code block
+      else {
+        tokens = tokens.concat(parseContent(item));
+      }
+    });
+
+    return tokens;
+}
+
 function parseCustomQuote(token, match, className) {
   if (token.type === 'paragraph') {
     var text = token.text;