fix(guide): simplify directory structure

guide/english/web-components/how-do-i-use-web-components/index.md

@@ -0,0 +1,13 @@
+---
+title: How do I use Web Components?
+---
+#### How do I use Web Components?
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/web-components/how-do-I-use-web-components/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<ahref='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->

guide/english/web-components/index.md

@@ -0,0 +1,41 @@
+---
+title: Web Components
+---
+
+## What are web components?
+
+Web components are comprised of a series of web specifications created by the [W3C](https://w3c.github.io/).
+These specifications describe a set of web platform APIs that can be used to create reusable, encapsulated, and customizable HTML elements.
+By exposing the low level web APIs used by browser vendors to create the HTML elements you may already be familiar with, web components can be used across
+a variety of environments.
+This means whether you're working on a Wordpress site, a server rendered application, a Single Page Application (SPA) with the latest framework, or no framework at all,
+web components can be used.
+For the first time, regardless of what framework is used, you can understand the web as a platform to creature unique experiences that are easily
+translated from one platform to another.
+
+## Web Component Specifications
+
+Web components are defined in [four main specifications](https://www.webcomponents.org/introduction#specifications).
+
+- **Custom Elements**
+
+  - The [Custom Elements specification](https://w3c.github.io/webcomponents/spec/custom/) lays the foundation for designing and using new types of DOM elements.
+
+- **Shadow DOM**
+
+  - The [Shadow DOM specification](https://w3c.github.io/webcomponents/spec/shadow/) defines how to use encapsulated style and markup in web components.
+
+- **ES Modules**
+
+  - The [ES Modules specification](https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system) defines the inclusion
+    and reuse of JS documents in a standards based, modular, performant way.
+
+- **HTML Template**
+  - The [HTML template element specification](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element/) defines how to declare
+    fragments of markup that go unused at page load, but can be instantiated later on at runtime.
+
+### More Information:
+
+- [Introduction to web components](https://www.webcomponents.org/introduction)
+- [Extensible Web Manifesto](https://github.com/extensibleweb/manifesto)
+- [W3C Web Component Specification](https://w3c.github.io/webcomponents/explainer/)

guide/english/web-components/libraries-used-to-create-web-components/index.md

@@ -0,0 +1,13 @@
+---
+title: Libraries to use to create web components
+---
+#### Libraries for building web components
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/web-components/libraries-used-to-create-web-components/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<ahref='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->

guide/english/web-components/shadow-dom/index.md

@@ -0,0 +1,13 @@
+---
+title: Shadow DOM
+---
+#### Shadow DOM
+
+This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/web-components/shadow-dom/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+
+<ahref='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+
+<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->