Tutorial overview

Welcome to Carbon! This tutorial will guide you in creating an Angular app with 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.

• Audience
• Prerequisites
• Outline

Here’s a preview of what you will build:

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 page.

Prerequisites

Angular

This is a web development tutorial that uses the Carbon Angular components. If you’re just getting started with Angular and enjoy learning-by-doing, check out the official Angular guide.

ES6/ES2015

Angular apps often use the latest and greatest from JavaScript (ES6/ES2015). You’ll want to be up to speed on the most commonly used features of the language. Let’s Learn ES6 covers those features in depth.

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. Their getting started guide is a great way to learn GitHub.

npm

This tutorial uses npm for dependency management so we can take advantage of offline installs. Make sure that you have npm installed 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
   • Create a web app with the UI shell component.
2. Building pages
   • Build out pages with the grid and various components.
3. Using APIs
   • Populate the data table with an external data source.
4. Creating components
   • Extend Carbon by creating your own components.
5. Deploying to IBM Cloud
   • Build and host your app in a production environment.