> For the complete documentation index, see [llms.txt](https://mariohernandez.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mariohernandez.gitbook.io/components/readme.md).

# Welcome

In this hands-on training curriculum you will learn the process of identifying, building, and integrating components with Drupal using Twig, Storybook and React. Drupal best practices are at the core of the training to ensure components are built in a way that leverage caching, performance and re-usability. This curriculum has been taught in person at various Drupal events such as meetups and DrupalCons across the U.S. and Europe.

![Homepage design](/files/-M8ERdICoLYEgIzbjfmI)

#### This training covers the following topics:

* Principles of Atomic Design for building flexible and scalable components
* Building a custom Drupal 8 theme using [Mediacurrent's Theme Generator](https://github.com/mediacurrent/theme_generator_8)
* Using Pattern Lab and Twig too build flexible and re-usable components
* Twig's **include**, **extends**, **embed**, and **Twig Blocks** to nest and reuse components
* Debugging a Drupal site using Kint
* Working with and creating Twig template suggestions
* Working with content arrays to get field's values
* Integrating components with Drupal 8
* Using Drupal Views and View Modes with components
* Drupal and Twig best practices
* ... and more

#### At the end of this training you would have learned:

* The principles of Atomic Design and how to take to your advantage to build flexible, reusable components in a Drupal website
* How to build a Drupal 8 theme
* The basics of Twig and how to use it for advance logic on your components
* How to use debugging tools to identify templates and content arrays in drupal pages
* How to integrate Pattern Lab components with Drupal's paragraph types, content types and Views
* ... and more