# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mariohernandez.gitbook.io/components/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.