Carbon tutorial web components

.github/CODEOWNERS

@@ -17,3 +17,7 @@ src/pages/data-visualization/* @theiliad # @natashadecoste
 # Lee Chase for Vue tutorial
 
 /src/pages/tutorial/vue/* @lee-chase
+
+# Lee Chase for Web components tutorial
+
+/src/pages/tutorial/web-components/* @lee-chase

gatsby-node.js

@@ -61,6 +61,11 @@ exports.createPages = ({ actions }) => {
     toPath: '/developing/react-tutorial/overview',
     isPermanent: true,
   });
+  createRedirect({
+    fromPath: '/tutorial/web-components/overview',
+    toPath: '/developing/web-components-tutorial/overview',
+    isPermanent: true,
+  });
   createRedirect({
     fromPath: '/tutorial/angular/overview',
     toPath: '/developing/angular-tutorial/overview',
@@ -192,12 +197,12 @@ exports.createPages = ({ actions }) => {
     toPath: '/elements/motion/overview',
     isPermanent: true,
   });
-   createRedirect({
+  createRedirect({
     fromPath: '/guidelines/motion/choreography',
     toPath: '/elements/motion/choreography',
     isPermanent: true,
   });
-   createRedirect({
+  createRedirect({
     fromPath: '/guidelines/motion/code',
     toPath: '/elements/motion/code',
     isPermanent: true,

src/data/nav-items.yaml

@@ -35,6 +35,8 @@
       path: /developing/angular-tutorial/overview/
     - title: React tutorial
       path: /developing/react-tutorial/overview/
+    - title: Web components tutorial
+      path: /developing/web-components-tutorial/overview/
     - title: Vue tutorial
       path: /developing/vue-tutorial/overview/
 - title: Contributing

src/pages/all-about-carbon/who-uses-carbon.mdx

@@ -134,6 +134,7 @@ Here are some ways developers can begin engaging with Carbon.
 
 - Check out a tutorial in your framework of choice
   ([React using Next.js](/developing/react-tutorial/overview/),
+  ([Web components using Vaniall.js/HTML](/developing/web-components-tutorial/overview/),
   [Angular (community)](/developing/angular-tutorial/overview/) or
   [Vue (community)](/developing/vue-tutorial/overview/)).
 

src/pages/developing/angular-tutorial/step-1.mdx

@@ -198,7 +198,12 @@ Run the following command to install the packages:
 npm install carbon-components carbon-components-angular @carbon/icons
 ```
 
-The following links can be useful depending on the versions of Angular and Carbon you wish to use. They provide detailed information about the components and the global configuration of the design system. Additionally, they may cover alternative methods for configuring Carbon, which can vary based on the Angular version and any additional libraries available. Keep in mind that the configuration for 'styles.scss' may also vary.:
+The following links can be useful depending on the versions of Angular and
+Carbon you wish to use. They provide detailed information about the components
+and the global configuration of the design system. Additionally, they may cover
+alternative methods for configuring Carbon, which can vary based on the Angular
+version and any additional libraries available. Keep in mind that the
+configuration for 'styles.scss' may also vary.:
 
 - [Getting Started with Carbon for Angular](https://angular.carbondesignsystem.com/?path=/docs/getting-started--docs)
 - [Carbon Design System Documentation](https://angular.carbondesignsystem.com/documentation/index.html)

src/pages/developing/get-started.mdx

@@ -57,6 +57,16 @@ the way.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+    subTitle="Web components tutorial using Vanilla.js/HTML"
+    href="/developing/web-components-tutorial/overview"
+    >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
       subTitle="Angular tutorial"

src/pages/developing/react-tutorial/wrapping-up.mdx

@@ -4,16 +4,7 @@ description:
   Welcome to Carbon! This tutorial will guide you in creating a React app using
   Next.js with the Carbon Design System.
 tabs:
-  [
-    'Overview',
-    'Step 1',
-    'Step 2',
-    'Step 3',
-    'Step 4',
-    'Step 5',
-    'Wrapping up',
-    'FAQ',
-  ]
+  ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
 ---
 
 <PageDescription>

src/pages/developing/web-components-tutorial/overview.mdx

@@ -0,0 +1,104 @@
+---
+title: Web components tutorial
+description:
+  Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML
+  app using Web Components from the Carbon Design System.
+tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5']
+---
+
+import Preview from 'components/Preview';
+
+<PageDescription>
+
+Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML
+app using Web Components from the Carbon Design System. We'll teach you the ins
+and outs of using Carbon components, while introducing web development best
+practices along the way.
+
+Web components are native custom components based on standards that can be used
+in any modern browser with any JavaScript library or framework just like plain
+HTML elements.
+
+For more information
+[see Web Components](https://www.webcomponents.org/introduction).
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Audience</AnchorLink>
+<AnchorLink>Prerequisites</AnchorLink>
+<AnchorLink>Outline</AnchorLink>
+
+</AnchorLinks>
+
+Here's a [preview](https://carbon-tutorial-nextjs.vercel.app/) of what you will
+build:
+
+<Preview
+  height="400"
+  title="Carbon Tutorial"
+  src="https://carbon-tutorial-nextjs.vercel.app/"
+  frameborder="no"
+  allowtransparency="true"
+  allowfullscreen="true"
+/>
+
+## Audience
+
+This tutorial is intended for people with all amounts of web development
+experience. If you want to jump straight to code, you may want to skip this
+tutorial and go to the [developers getting started](/developing/get-started)
+page.
+
+## Prerequisites
+
+### HTML
+
+This is a web development tutorial that uses HTML. If you're not sure that you
+are quite ready then hop over to
+[W3Schools](https://www.w3schools.com/html/default.asp)
+
+### SCSS (CSS preprocessor)
+
+This tutorial uses SASS, or rather the CSS styled flavour called SCSS. If you
+need help with CSS then head again to
+[W3Schools](https://www.w3schools.com/css/default.asp) for SCSS head to
+[the guide](https://sass-lang.com/guide/) on sass-lang.com.
+
+### ECMAScript (Javascript)
+
+Javascript is fundemental to adding interaction to your HTML. There are many
+great resources out there [W3Schools](https://www.w3schools.com/js/default.asp)
+is more than enough for everything in this tutorial.
+
+### GitHub
+
+We'll be using GitHub to build an app together, so if you're new to GitHub, make
+sure you've [made an account](https://github.com/join). Their
+[getting started guide](https://guides.github.com/activities/hello-world) is a
+great way to learn GitHub.
+
+### Pnpm
+
+This tutorial uses [Pnpm](https://pnpm.io/) for dependency management as that
+was the default for `create-vite`. Make sure that you have
+[Pnpm installed](https://pnpm.io/installation) prior to starting the tutorial so
+you can follow along step-by-step.
+
+## Outline
+
+Each step in this tutorial illustrates a different aspect of developing web
+applications with Carbon. We recommend starting with step 1, but you can pick up
+any step and take it from there.
+
+1. [**Installing Carbon**](/developing/web-components-tutorial/step-1)
+   - Create a web app with the UI shell component.
+2. [**Building pages**](/developing/web-components-tutorial/step-2)
+   - Build out pages with the grid and various components.
+3. [**Using APIs**](/developing/web-components-tutorial/step-3)
+   - Populate the data table with an external data source.
+4. [**Creating components**](/developing/web-components-tutorial/step-4)
+   - Extend Carbon by creating your own components.
+5. [**Deploying**](/developing/web-components-tutorial/step-5)
+   - Build and host your app in a production environment.