Skip to main content

Component-Based Development and Theming with Drupal

Learn how to build Drupal websites with a component-based approach to leverage performance, scalability, and flexibility.

In this 3-day hands-on training workshop, you will learn the process and workflow our team at Mediacurrent uses to develop large-scale Drupal 8 and 9 websites using the component-based approach. Drupal best practices will be at the core of the training to ensure components are built and integrated with Drupal in a way that leverages caching performance, and re-usability.

Training length: 3 Days

"It's a game-changer! If you love theming and development, take this course!"

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

Learning Objectives

  • 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

"This training is on point! I can really tell how the curriculum has been catered to us. I appreciate that."

Who This Course is For

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 a hands-on training and coding experience is required to follow along with exercises.

What You Can Expect From This Course

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. 

Prior to training

Our team of trainers has put a lot of effort into making sure your training experience is successful before you step foot in the door (or in these days of distance learning, before you login to the training platform). This means we will provide guidance and support to ensure you are ready for training with your local environment and any questions you may have. In addition to providing a detailed set of instructions for setting up your local environment, we will hold a virtual call, prior to the training day, to assist anyone who needs help with their local setup.

During training

Since this will be virtual training, you will have our team at your disposal to answer questions and help you if you get stuck. You will be able to ask live questions and discuss issues related to the topic at hand. If necessary, you will be able to share your screen to help you debug your issues so other students can benefit from this opportunity to learn something new.

After training

In addition to providing you with world-class training material that can be accessed at any time, even after training has passed, we will share the recordings of each of the lessons we do. This is a great way to reference the training at your own pace afterward.

"You certainly lived up to your reputation (world-class developer/trainer). Keep up that great work!"

Course Requirements

Environment:

  • macOS or Windows Pro, or Linux
  • Latest Docker and DDEV
  • Latest stable (LTS), version of NodeJS with NPM
  • Github account

Technical:

  • Completion of Beginner course or equivalent experience
  • Good understanding of Drupal's terminology such as modules, node, twig, templates, views, and others is helpful
  • 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 are helpful

Other requirements:

  • Access to Zoom webinars
  • Text editor of your choice(VSCode, PHP Storm, Coda, etc.)

Other Training Opportunities

Training is critical for the success of your team and organization, but training is not easy to come by as it can be a costly investment. Public training events like this one are a perfect middle-ground of cost and quality. We feel confident you will find in Mediacurrent a training partner you can trust.