Carbon tutorial web components (#4347)

* feat: add step 1 of tutorial * feat: step 2 complete * feat: step 3 complete * feat: step 4 complete * feat: step 5 deploy * fix: mask urls for deploy * feat: add cdn usage * chore: adjust github instructions * chore: remove wrapping up * feat: update anchors on step 5 * feat: add note about deployed version cdn use * fix: nav and previews * fix: preview links * fix: add links to linters * fix: angular tutorial prettier complaint * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-3.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/developing/web-components-tutorial/step-3.mdx Co-authored-by: Anna Gonzales <[email protected]> * fix: review issues with case * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Anna Gonzales <[email protected]> * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: Scott Strubberg <[email protected]> * chore: yarn format * fix: bump version and remove pagination issue * Update src/pages/developing/web-components-tutorial/step-3.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-2.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-3.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-3.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-3.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/step-4.mdx Co-authored-by: Ariella Gilmore <[email protected]> * Update src/pages/developing/web-components-tutorial/overview.mdx Co-authored-by: kennylam <[email protected]> * Update src/pages/developing/web-components-tutorial/overview.mdx Co-authored-by: kennylam <[email protected]> * Update src/pages/developing/web-components-tutorial/overview.mdx Co-authored-by: kennylam <[email protected]> * Update src/pages/developing/web-components-tutorial/step-5.mdx Co-authored-by: andrew <[email protected]> * fix: review change to content * Update src/pages/developing/web-components-tutorial/step-1.mdx Co-authored-by: kennylam <[email protected]> * feat: review update existing content * chore: yarn format * fix: resource to list web components tutorial * fix: add to left nav --------- Co-authored-by: Anna Gonzales <[email protected]> Co-authored-by: Scott Strubberg <[email protected]> Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Ariella Gilmore <[email protected]> Co-authored-by: kennylam <[email protected]> Co-authored-by: andrew <[email protected]>
carbon-design-system · Feb 20, 2025 · dc369a1 · dc369a1
1 parent 2e15db5
commit dc369a1
Show file tree

Hide file tree

Showing 18 changed files with 3,027 additions and 12 deletions.
diff --git a/.github/CODEOWNERS b/.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
diff --git a/gatsby-node.js b/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,

diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml
@@ -35,6 +35,8 @@
       path: /developing/dev-resources/resources/
     - title: React tutorial
       path: /developing/react-tutorial/overview/
+    - title: Web components tutorial
+      path: /developing/web-components-tutorial/overview/
 - title: Contributing
   pages:
     - title: Get started

diff --git a/src/pages/all-about-carbon/who-uses-carbon.mdx b/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 Vanilla.js/HTML](/developing/web-components-tutorial/overview/),
   [Angular (community)](/developing/angular-tutorial/overview/) or
   [Vue (community)](/developing/vue-tutorial/overview/)).
 

diff --git a/src/pages/developing/dev-resources/resources.mdx b/src/pages/developing/dev-resources/resources.mdx
@@ -114,6 +114,17 @@ your framework of choice.
       <MdxIcon name="react" />
     </ResourceCard>
   </Column>
+
+{' '}
+
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    subTitle="Web components tutorial using Vanilla.js/HTML"
+    href="/developing/web-components-tutorial/overview">
+    <MdxIcon name="webcomponents" />
+  </ResourceCard>
+</Column>
+
 </Row>
 
 ## Tools

diff --git a/src/pages/developing/get-started.mdx b/src/pages/developing/get-started.mdx
@@ -60,6 +60,17 @@ introduce web development best practices along the way.
 </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"
       subTitle="Angular tutorial (community)"
       href="/developing/angular-tutorial/overview"
       >

diff --git a/src/pages/developing/react-tutorial/wrapping-up.mdx b/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>

diff --git a/src/pages/developing/web-components-tutorial/images/step-5/asset-404.png b/src/pages/developing/web-components-tutorial/images/step-5/asset-404.png
diff --git a/...pages/developing/web-components-tutorial/images/step-5/linter-error-details.png b/...pages/developing/web-components-tutorial/images/step-5/linter-error-details.png
diff --git a/src/pages/developing/web-components-tutorial/images/step-5/linter-error.png b/src/pages/developing/web-components-tutorial/images/step-5/linter-error.png
diff --git a/src/pages/developing/web-components-tutorial/images/step-5/spelling-illo.png b/src/pages/developing/web-components-tutorial/images/step-5/spelling-illo.png
diff --git a/...pages/developing/web-components-tutorial/images/step-5/spelling-suggestions.png b/...pages/developing/web-components-tutorial/images/step-5/spelling-suggestions.png
diff --git a/src/pages/developing/web-components-tutorial/overview.mdx b/src/pages/developing/web-components-tutorial/overview.mdx
@@ -0,0 +1,105 @@
+---
+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 to
+[W3Schools](https://www.w3schools.com/css/default.asp). For help with SCSS head
+to [sass-lang.com](https://sass-lang.com/guide/).
+
+### ECMAScript (Javascript)
+
+Javascript is fundemental to adding interaction to your HTML. There are many
+great resources out there, such as
+[W3Schools](https://www.w3schools.com/js/default.asp), which 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 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.