diff --git a/packages/learn/gatsby-node.js b/packages/learn/gatsby-node.js
index 12d84dc63f..62003d0d6c 100644
--- a/packages/learn/gatsby-node.js
+++ b/packages/learn/gatsby-node.js
@@ -21,7 +21,14 @@ exports.onCreateNode = function onCreateNode({ node, boundActionCreators }) {
   if (node.internal.type === 'MarkdownRemark') {
     const { frontmatter: { block, superBlock } } = node;
 
-    const slug = `/${dasherize(superBlock)}/${dasherize(block)}`;
+    let slug = `/${dasherize(superBlock)}`;
+
+    // Without this condition the slug for superblocks ends up as something like
+    // "/apis-and-microservice/undefined" and what we want instead is just
+    // "/apis-and-microservice"
+    if (typeof block !== 'undefined') {
+      slug = slug + `/${dasherize(block)}`;
+    }
 
     createNodeField({ node, name: 'slug', value: slug });
   }
diff --git a/packages/learn/src/introductions/apis-and-microservices/index.md b/packages/learn/src/introductions/apis-and-microservices/index.md
new file mode 100644
index 0000000000..9c10400d77
--- /dev/null
+++ b/packages/learn/src/introductions/apis-and-microservices/index.md
@@ -0,0 +1,7 @@
+---
+title: APIs and Microservices
+superBlock: APIs and Microservices
+---
+## Introduction to APIs and Microservices
+
+This is a stub introduction for APIs and Microservices
diff --git a/packages/learn/src/introductions/data-visualization/index.md b/packages/learn/src/introductions/data-visualization/index.md
new file mode 100644
index 0000000000..18a98ee240
--- /dev/null
+++ b/packages/learn/src/introductions/data-visualization/index.md
@@ -0,0 +1,7 @@
+---
+title: Data Visualization
+superBlock: Data Visualization
+---
+## Introduction to Data Visualization
+
+This is a stub introduction for Data Visualization
diff --git a/packages/learn/src/introductions/front-end-libraries/index.md b/packages/learn/src/introductions/front-end-libraries/index.md
new file mode 100644
index 0000000000..480b411146
--- /dev/null
+++ b/packages/learn/src/introductions/front-end-libraries/index.md
@@ -0,0 +1,7 @@
+---
+title: Front End Libraries
+superBlock: Front End Libraries
+---
+## Introduction to Front End Libraries
+
+This is a stub introduction for Front End Libraries
diff --git a/packages/learn/src/introductions/information-security-and-quality-assurance/index.md b/packages/learn/src/introductions/information-security-and-quality-assurance/index.md
new file mode 100644
index 0000000000..98ab65693e
--- /dev/null
+++ b/packages/learn/src/introductions/information-security-and-quality-assurance/index.md
@@ -0,0 +1,7 @@
+---
+title: Information Security and Quality Assurance
+superBlock: Information Security and Quality Assurance
+---
+## Introduction to Information Security and Quality Assurance
+
+This is a stub introduction for Information Security and Quality Assurance
diff --git a/packages/learn/src/introductions/javascript-algorithms-and-data-structures/index.md b/packages/learn/src/introductions/javascript-algorithms-and-data-structures/index.md
new file mode 100644
index 0000000000..baef3c2db0
--- /dev/null
+++ b/packages/learn/src/introductions/javascript-algorithms-and-data-structures/index.md
@@ -0,0 +1,7 @@
+---
+title: JavaScript Algorithms and Data Structures
+superBlock: JavaScript Algorithms and Data Structures
+---
+## Introduction to JavaScript Algorithms and Data Structures
+
+This is a stub introduction for JavaScript Algorithms and Data Structures
diff --git a/packages/learn/src/introductions/responsive-web-design/index.md b/packages/learn/src/introductions/responsive-web-design/index.md
new file mode 100644
index 0000000000..f6fe0e131c
--- /dev/null
+++ b/packages/learn/src/introductions/responsive-web-design/index.md
@@ -0,0 +1,7 @@
+---
+title: Responsive Web Design
+superBlock: Responsive Web Design
+---
+## Introduction to Responsive Web Design
+
+This is a stub introduction for Responsive Web Design
diff --git a/packages/learn/src/templates/Introduction/SuperBlockIntro.js b/packages/learn/src/templates/Introduction/SuperBlockIntro.js
new file mode 100644
index 0000000000..182247ddc5
--- /dev/null
+++ b/packages/learn/src/templates/Introduction/SuperBlockIntro.js
@@ -0,0 +1,48 @@
+/* global graphql */
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+
+import FullWidthRow from '../../components/util/FullWidthRow';
+import { MarkdownRemark } from '../../redux/propTypes';
+
+const propTypes = {
+  data: PropTypes.shape({
+    markdownRemark: MarkdownRemark
+  })
+};
+
+function SuperBlockIntroductionPage(
+  { data: { markdownRemark } }
+) {
+  const { html, frontmatter: { superBlock } } = markdownRemark;
+  return (
+    <Fragment>
+      <Helmet>
+        <title>{superBlock} | freeCodeCamp</title>
+      </Helmet>
+      <FullWidthRow>
+        <div
+          className='intro-layout'
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </FullWidthRow>
+    </Fragment>
+  );
+}
+
+SuperBlockIntroductionPage.displayName = 'SuperBlockIntroductionPage';
+SuperBlockIntroductionPage.propTypes = propTypes;
+
+export default SuperBlockIntroductionPage;
+
+export const query = graphql`
+  query SuperBlockIntroPageBySlug($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      frontmatter {
+        superBlock
+      }
+      html
+    }
+  }
+`;
diff --git a/packages/learn/utils/gatsby/index.js b/packages/learn/utils/gatsby/index.js
index 3f39992056..f3c5acc5a6 100644
--- a/packages/learn/utils/gatsby/index.js
+++ b/packages/learn/utils/gatsby/index.js
@@ -20,6 +20,10 @@ const intro = path.resolve(
   __dirname,
   '../../src/templates/Introduction/Intro.js'
 );
+const superBlockIntro = path.resolve(
+  __dirname,
+  '../../src/templates/Introduction/SuperBlockIntro.js'
+);
 
 const views = {
   backend,
@@ -73,13 +77,27 @@ exports.createChallengePages = createPage => ({ node }, index, thisArray) => {
 };
 
 exports.createIntroPages = createPage => edge => {
-  const { fields: { slug }, frontmatter: { block } } = edge.node;
-  createPage({
-    path: slug,
-    component: intro,
-    context: {
-      block: dasherize(block),
-      slug
-    }
-  });
+  const { fields: { slug }, frontmatter: { superBlock, block } } = edge.node;
+
+  // If there is no block specified in the markdown we assume the markdown is
+  // for a superblock introduction. Otherwise create a block intro page.
+  if (!block) {
+    createPage({
+      path: slug,
+      component: superBlockIntro,
+      context: {
+        superBlock: dasherize(superBlock),
+        slug
+      }
+    });
+  } else {
+    createPage({
+      path: slug,
+      component: intro,
+      context: {
+        block: dasherize(block),
+        slug
+      }
+    });
+  }
 };