Best practices and standards are at the core of this course. This means you will be exposed to the latest trends, processes, and tools used on today's web development to build responsive, accessible, and component-driven Drupal websites.
Learning Objectives:
After completing this course you’ll come away with knowledge of:
Building flexible and scalable components using Twig and Pattern Lab
Best practices for Drupal theming and development
Drupal’s content array and how to preserve caching
Debugging a theme to obtain fields and variables information
Working with Twig template suggestions
How to integrate front-end components with Drupal
Best practices for using Twig’s include, embed, and twig blocks
Working and planning for Drupal attributes
Building reusable components
Prerequisites:
Students will get the most out of this training if they have the following:
the Latest Docker and DDEV; good understanding of Drupal's terminology such as modules, node, twig, templates, views, and others;
familiarity with running commands in a command-line tool is required, basic understanding of Twig's syntax;
good understanding of HTML and CSS;
site building skills;
a text editor of their choice.
Target Audience:
This training is primarily for front and back-end developers who wish to learn how to build Drupal websites using the component-based approach, or who have already had some experience with components in a Drupal website. This is hands-on training and coding experience is required to follow along with exercises.
Syllabus
Building components in the front end
Principles of Atomic Design
Using Pattern Lab and Twig to build flexible and reusable components
Using front-end tools such as gulp, node, npm and others
Writing semantic and accessible markup in components
Accounting for Drupal-specific requirements when building components
Twig's include, extends, embed, and Twig Blocks to nest and reuse components
Styling components to achieve responsive design
Creating components variants to leverage previously-built components and avoid duplicate code
Building Drupal’s back-end infrastructure for components
Build Drupal content types, paragraph types, views, and view modes
Using media to improve management of content assets
Planning and creating image styles and responsive image styles
Manage images for improved performance
Using entity references
Integrating components with Drupal
Theme/Twig debugging
Working with and creating Twig template suggestions
Working with Drupal's content arrays to get the field's values in a best-practices manner
Using modules such as Twig_field_value or Twig_tweak to improve rendering of content
Integrating components with Drupal using Twig presenter templates
Working with Drupal attributes, title_prefix, and title_suffix
Leveraging Drupal's view modes to enhance components integrations
Planning, building and using Image Styles and Responsive Image Styles
Best practices and standards are at the core of this course. This means you will be exposed to the latest trends, processes, and tools used on today's web development to build responsive, accessible, and component-driven Drupal websites.
Learning Objectives:
After completing this course you’ll come away with knowledge of:
Prerequisites:
Students will get the most out of this training if they have the following:
Target Audience:
This training is primarily for front and back-end developers who wish to learn how to build Drupal websites using the component-based approach, or who have already had some experience with components in a Drupal website. This is hands-on training and coding experience is required to follow along with exercises.
Syllabus
Building components in the front end
Building Drupal’s back-end infrastructure for components
Integrating components with Drupal
Source: https://events.drupal.org/portland2022/sessions/training-component-based-development-drupal