Guide

Acquia Certified Drupal Front End Specialist Exam for Drupal 10

Acquia Certified Drupal Front End Specialist Exam

What will you learn

  • What to study for the Acquia Certified Front End Specialist exam
  • Concepts you should know as a Drupal front end developer

Overview

The Certified Drupal 10 Front End Specialist exam is part of Acquia's Drupal certification program. The exam consists of 60 scenario-based questions that show your ability to design, develop and deploy Drupal-based solutions focusing on the front end, including basic architecture best practices for site building and theme development. We've gathered together a concise list of the Drupalize.Me tutorials, and other resources, that will help you prepare for Acquia's Certified Drupal 10 Front End Specialist exam.

We have guides for the other Acquia exams listed in our Acquia Certification Exam Preparation guide.

Study Guide: Front End Specialist Exam

0. Essential tools and prerequisites

Drush is an essential tool for Drupal development. This guide contains courses on Drush, and other command line skills such as using Composer, Git, and a CLI (Terminal) interface.

Categories
Site Building, Theming, Module Development, Backend and Infrastructure, Site Administration
Drupal 8, 9, and 10

Drupal's coding standards are a set of rules for programmers that lay out best practices, formatting, and various other rules. It tells us how to format what we write, so that everyone is using the same conventions and has the same expectations when they go to look at a new piece of code.

1. Fundamental web development concepts

In this section of the exam you need to demonstrate knowledge of HTML and CSS, PHP, JavaScript and jQuery programming concepts, along with being able to demonstrate the use of responsive design concepts.

1.1 Demonstrate knowledge of HTML and CSS

More information

HTML and CSS are the foundational languages for how browsers display web pages.

1.2 Identify PHP programming concepts

PHP

Topic
Drupal 7, 8, 9, and 10
More information

PHP: Hypertext Preprocessor (PHP) is a popular interpreted programming language that is especially suited for web development. Drupal core and all contributed modules are written in PHP.

Drupal 8, 9, 10, and 11
More information

Object-oriented PHP utilizes classes and objects to organize code into reusable chunks. This approach helps us organize complex applications, such as Drupal, into modular code called classes that can be reused across the entire system.

1.3 Identify JavaScript and jQuery programming concepts

More information

JavaScript (JS) is an interpreted programming language that is widely used on the web to control web page behavior and interactivity.

Drupal 7, 8, 9, and 10
More information

JavaScript files are included by a module or a theme by creating an asset library. Using this asset library system you can selectively choose which files to load, overwrite existing files, or customize them to suit your needs.

1.4 Demonstrate knowledge of Responsive Design concepts

Categories
Drupal 7, 8, 9, and 10
More information

Responsive web design is a set of design approaches and development best practices that ensures that a web design can be used on many types and sizes of devices.

2. Theming concepts

Generally, you should be familiar with our overviews of Drupal theming, which cover the fundamentals of creating a new theme, working with regions, CSS, and understanding sub-themes.

2.1 Demonstrate ability to define and use custom regions in a theme

Categories
Drupal 8, 9, and 10
More information

Themes define the regions that are available for site administrators to place blocks in, creating a layout framework within which the components that compose a page can be placed. As a theme developer you'll need to determine what regions are necessary to accommodate your design's layout, while also ensuring it'll work with the way Drupal uses blocks to place content onto the page. Deciding what regions to create requires knowledge of how Drupal works and a clear vision of the design you're trying to achieve.

In this tutorial we'll:

  • Explain what regions are and how they relate to themes
  • Describe how regions are handled internally within Drupal
  • Demonstrate things to keep in mind when planning the regions for your custom theme

By the end of this tutorial you should be able to describe what a region is, explain how Drupal themes use regions to place content, and get started dissecting your own designs into regions.

Categories
Drupal 8, 9, and 10
More information

Customizing the available regions in your theme is one of the first things you'll do when creating your own themes. Doing so gives you complete control over where content is displayed on the page, and the markup involved. Adding regions to a theme is a two-step process that involves editing your theme's THEMENAME.info.yml file and updating your page.html.twig file.

In this tutorial we'll:

  • Declare one or more new regions in our themes THEMENAME.info.yml file.
  • Output the content of those regions in our theme via the page.html.twig file.

By the end of this tutorial you should be able to add or edit the regions a theme provides. Also, you'll ensure that blocks placed into regions are displayed by outputting the regions in the page template.

Categories
Drupal 8, 9, and 10
More information

In order to change Drupal's default markup you need to override template files. The page template controls the overall layout of your theme, including the placement of regions. You should practice the exercise following the written instructions below. Use the video walk-through to help if you get stuck.

In this exercise, we'll:

  • Override the currently used page.html.twig template file.
  • Modify the content of the file to include the regions defined in the theme's .info.yml file.
  • Wrap the regions in the page template file with HTML markup using CSS classes from Bootstrap to achieve the example layout.

By the end of this tutorial, you'll gain practice creating a custom layout in a page template file.

2.2 Demonstrate ability to work with theme configuration

Categories
Drupal 8, 9, and 10
More information

One important aspect of theme administration is the configuration of global and theme-specific settings. In this tutorial, you will learn where theme settings are configured in Drupal's administrative interface, the difference between global and theme-specific settings, and what each global setting refers to on a base installation of Drupal with a custom theme installed.

Categories
Drupal 8, 9, and 10
More information

Some, but not all, themes come with administrator-configurable settings that you can change through the UI. These might allow you to upload your own logo, choose between a couple of different pre-defined layouts, or turn features of a theme on or off. In this tutorial we’ll look at where you can find these theme settings if they exist, and how to go about changing them.

Learn how to modify the theme settings form and provide custom theme settings in code:

Drupal 8, 9, and 10
More information

In Drupal's Appearance UI, all themes get a theme settings form. As a theme developer, you can customize the theme settings form, enabling site administrators to have more control over the appearance of the theme.

In this tutorial, we'll show you how to add admin-configurable settings to your theme. In the process of doing this, we'll use a variety of theme and module development skills and assume you have some familiarity with using Drupal's Form API, Configuration API, and theme system (see Prerequisites).

By the end of this tutorial, you will be able to provide custom theme settings that an administrator can use to modify the appearance of the theme.

2.3 Demonstrate knowledge of working with stylesheets

Drupal 8, 9, and 10
More information

Cascading Style Sheets (CSS) files are added as an asset library through a theme’s libraries configuration file. HTML attributes, including classes and IDs, are commonly added in template files with Twig.

Categories
Drupal 8, 9, and 10
More information

To add CSS or JavaScript files or libraries to your site, you can attach them as asset libraries in your theme. In this exercise, you'll create 2 asset libraries and attach them globally via your theme's info file. In this tutorial, we'll pull in the CSS and JavaScript from the popular Bootstrap framework so that we can make use of its layout utility classes later on. We'll also add a custom CSS file that contains global styles for our site, like setting the page background color.

If you want to try and complete this on your own first you'll need to:

  • Add the Bootstrap CSS and JavaScript files to your theme.
  • Define an asset library using a THEMENAME.libraries.yml file in your theme.
  • Tell Drupal to attach your asset library so that the CSS and JavaScript files it represents are included in the page.

Once that's done your site won't look all that different. But if you view the page source, or look closely, you should see that the Bootstrap files are included along with any CSS rules you placed into your custom style sheet.

Note: Since this course is focused on teaching the Drupal aspects of theme development, and not on writing CSS, we're using the Bootstrap CSS. Feel free to use the framework or library of your choice if you don't want to use Bootstrap.

You should try to complete the exercise steps on your own and use the video to help guide you if you get stuck.

At the end of this exercise, you'll find a video walk-through of the solution.

2.4 Demonstrate knowledge of working with JavaScript in a theme

Drupal 7, 8, 9, and 10
More information

JavaScript files are included by a module or a theme by creating an asset library. Using this asset library system you can selectively choose which files to load, overwrite existing files, or customize them to suit your needs.

2.5 Demonstrate knowledge of working with Breakpoints in a theme

Categories
Drupal 7, 8, 9, and 10
More information

Responsive web design is a set of design approaches and development best practices that ensures that a web design can be used on many types and sizes of devices.

2.6 Demonstrate ability to build a sub-theme from a base theme

Categories
Drupal 8, 9, and 10
More information

When it's time to start a custom Drupal theme from scratch (especially if you're new to Drupal theming), we recommend using Starterkit. Starterkit helps you get a new theme up and running by scaffolding a set of theme files with sensible defaults, saving you from a bunch of repetitive work.

In this tutorial we'll:

  • Learn what Starterkit is
  • Discuss when you should--and should not--use Starterkit
  • Walk through how to use Starterkit to generate a new Drupal theme

By the end of this tutorial you should be able to explain the use case for Starterkit and understand how to use it to start a new custom theme.

Categories
Drupal 8, 9, and 10
More information

It's time to create the bare-bones structure for a new theme on your site. You should try to complete this exercise based what you've learned from the tutorial prerequisites listed below. The video at the end of this tutorial will walk you through the implementation of this exercise if you need some help. In this exercise, we'll:

  • Create an info file that describes a custom theme to Drupal with the regions listed below (we're going to name ours "reboot").
  • Enable, and view, a bare-bones custom theme.

By the end of this exercise, you should feel comfortable starting a theme using several methods.

Categories
Drupal 8, 9, and 10
More information

Custom themes in Drupal must be configured to inherit settings, templates, and other assets from a parent theme. Which base theme you use is configurable. This allows theme developers to use a different set of markup as the starting point for their theme, organize various theme assets into a more maintainable structure, and more. All of this is made possible because of how Drupal's theme layer uses a chain of inheritance when assembling all the parts of a theme.

Base themes are also a powerful way to encapsulate standards and best practices into a reusable code base. You'll find dozens of contributed base themes on Drupal.org that can serve as a great starting point, especially if you're planning to work with an existing design framework like Bootstrap or Susy Grids. Or if you want to leverage modern JavaScript bundling without setting up Webpack on your own.

In this tutorial we'll:

  • Learn what base themes and subthemes are
  • Look at a few examples of template inheritance and how that works
  • Discuss some use cases for theme inheritance

By the end of this tutorial you'll know how to declare the base theme that your theme builds upon.

Categories
Drupal 8, 9, and 10
More information

Make your theme a subtheme of a base theme, allowing it to inherit all the base theme's templates and other properties. When creating Drupal themes it is common to use the Classy theme provided with Drupal core as a base theme to jumpstart your development.

In this tutorial we'll learn how to:

  • Use the base theme key in our theme's THEMENAME.info.yml file
  • Make our Ice Cream theme inherit from the Classy theme, or any other theme

By the end of this tutorial you should be able to tell Drupal that your theme is a child of another theme and should inherit all of the parent theme's features.

3. Templates and preprocess functions

This section of the exam will assess your ability to work with core theme templates, as well as creating your own, and modifying your output using the Render API and preprocess functions.

3.1 Demonstrate ability to use Twig syntax

Drupal 8, 9, and 10
More information

Twig is a template engine for PHP, which is the language used in Drupal. Twig can be used to design templates in generic PHP applications as well as Drupal themes.

Categories
Drupal 8, 9, and 10
More information

Twig is the default template engine for Drupal. If you want to make changes to the markup that Drupal outputs you're going to need to know at least some Twig. In this tutorial, we will outline the role that Twig now plays in Drupal, how Twig impacts the theming experience, and where to find additional resources for learning Twig.

At the end of this lesson, you'll be able to:

  • Describe the role that Twig plays in creating Drupal themes
  • Explain how Twig impacts the theming experience in Drupal
  • Locate additional resources for learning Twig
Categories
Drupal 8, 9, and 10
More information

To read a Twig template file, you'll need to recognize Twig's syntax delimiters. Twig has three syntax delimiters: one for printing out variables, another for performing actions or logic, and lastly, one for comments, also used for docblocks.

In this tutorial we'll:

  • Explore each of Twig's 3 syntax delimiters.
  • Show examples of each from Drupal's core template files.

By the end of this tutorial you should be able to recognize each of Twig's syntax delimiters and understand what the engine will do when it encounters them.

Categories
Drupal 8, 9, and 10
More information

Twig has a special syntax for accessing array keys and objects, also known in Twig as variable attributes. In this tutorial, we'll cover the period or dot (.) operator to access a variable attribute, as well as subscript or square-bracket syntax, useful for when the key of the array contains special characters, like a dash (-) or pound sign (#). We'll also look at the logic Twig uses to find the matching attribute in an array or object.

Categories
Drupal 8, 9, and 10
More information

Many of the variables that you have access to inside of a Twig template file are arrays. For example a list of values for a multi-value field, or a set of error messages generated when validating a form submission. In order to work with arrays in Twig you'll need to understand how for loops work. This is essential information for anyone creating Drupal themes.

In this tutorial we'll cover:

  • Using the for tag to iterate over an array
  • Using the loop variable inside of a for loop for additional context
Categories
Drupal 8, 9, and 10
More information

In Twig, you can modify variables using functions or filters. Twig has a bunch of built-in functions and filters. Drupal extends Twig to provide a few handy Drupal-specific functions and filters as well.

In this tutorial, we'll look at:

  • What are functions and filters?
  • How to use functions and filters in Twig
  • Detailed information about the Drupal-specific functions and filters and their use case
Categories
Drupal 8, 9, and 10
More information

The ability to loop over an array of values in a Twig template and print out each value individually is an important skill for anyone developing themes for Drupal. Common scenarios include: loop over the values of a multiple value field; iterate through a list of links; and display error messages at the top of forms. This tutorial will provide an example of using the Twig for function to iterate over a list, or a subset of a list.

In this tutorial we'll cover how to:

  • Output values from a multi-value field in an unordered list.
  • Add first and last classes to the first and last items in a list by using the Twig loop variable.

By the end of this tutorial you should be able to print out the values of an array as individual list items using a loop in Twig.

Categories
Drupal 8, 9, and 10
More information

Do you cringe at the sight of untidy whitespace or (gasp) no whitespace at all when you View Source? Learn how to tame whitespace in Twig template files in this tutorial. By the end of this lesson, you will be able to recognize how Twig controls whitespace and how you can do the same in your Drupal template files.

Categories
Drupal 8, 9, and 10
More information

In order to ensure that all user interface strings in your application can be translated using Drupal's localization system, any text you add to templates needs to use either the t filter or the {% trans %} tag. Anyone creating themes or editing template files associated with a theme or a module should know how to use these two utilities.

In this tutorial we'll look at:

  • How to use the t filter and {% trans %} tag in a Twig template
  • The differences between the two, and how to determine which one to use
  • How to translate strings assigned to variables in preprocess functions using the PHP t() function
Categories
Drupal 8, 9, and 10
More information

Theme developers often need to add or remove classes and other attributes from an HTML tag. Template files handle this with a special Attributes object that contains the attributes and their values, as well as a handful of powerful methods to help manage these attributes.

In this tutorial we’ll cover:

  • Adding/removing classes from elements in a Twig template
  • The attributes object
  • Examples of common tasks using various helper methods on the attributes object
Drupal 8, 9, and 10
More information

Before you can create a path or link to another page on your site, you'll need to know the route (unless there is already a variable available for the URL you need). Finding a route can be a tricky task unless you have the right tools. In this tutorial, we'll show how tools like Webprofiler, Drush, and Grep can be used to get route information for a page, so that you can use functions that need a route as a function parameter.

In this tutorial we'll:

  • Learn how to determine the route or path of an internal page.

3.2 Demonstrate ability to build and customize core templates for managing markup

Categories
Drupal 8, 9, and 10
More information

Template files are responsible for the HTML markup of every page generated by Drupal. Any file ending with the .html.twig extension is a template file. These files are composed of standard HTML markup as well as tokens used by the Twig template engine to represent dynamic content that will be substituted into the HTML markup when the template is used. As a theme developer, you'll work with this a lot.

In this tutorial we’re going to learn about:

  • What template files are, and how they fit into the big picture of creating a theme
  • How template files are used in order to allow theme developers to modify the HTML markup output by Drupal
  • Naming conventions for, and specificity of, template files
Categories
Drupal 8, 9, and 10
More information

This tutorial demonstrates how to locate the template file that is currently being used to render an element and override it in your own theme. This is an important skill for anyone who wants to make changes to Drupal's default HTML markup.

In this tutorial we'll:

  • Override the node.html.twig template in our theme
  • Make changes to the markup
  • Create a content-type-specific template override like node--CONTENT_TYPE.html.twig

By the end of this tutorial you should be able to modify the HTML markup used to display a node, or any other element of the page generated using a template file.

Categories
Drupal 8, 9, and 10
More information

If you want to make changes to the HTML markup of any element on the page you need to first figure out the theme hook or base name of the template file used to generate it. This information is required to override the template in your custom theme.

There are other situations in which knowing the theme hook name of a template file is useful. Including determining which preprocess function affects a template, and which template theme hook suggestions can be used.

In this tutorial we'll learn:

  • How to figure out the theme hook name for any template

By the end of this tutorial you should be able to use the output from Twig's debugging mode to determine the theme hook name of any template file.

More information

Making Drupal fast by default implies having caching layers and CSS and JavaScript aggregation utilities enabled out-of-the-box. As a theme developer this can be annoying, because you must clear these various caches in order to preview any changes. In addition, inspecting variables with debugging tools often produces PHP errors. We'll make some recommendations for PHP settings on your local environment that can prevent these errors from happening so often.

By the end of this tutorial, you should be able to:

  • Set up your local Drupal site for theme development
  • Prepare your local development environment for working on and debugging themes
Categories
Drupal 8, 9, and 10
More information

Knowing how to inspect the variables available within a template file enables you to discover all of the dynamic content in a Twig file, not just that which is already being used.

In this tutorial, we'll learn how to use {{ dump() }}, kint(), vardumper(), and XDebug to inspect variables in a template file.

3.3 Demonstrate ability to work with template suggestions

Categories
Drupal 8, 9, and 10
More information

Every theme can contain an optional THEMENAME.theme file. This file contains additional business logic written in PHP and is primarily used for manipulation of the variables available for a template file, and suggesting alternative candidate template file names. Themes can also use this file to implement some, but not all, of the hooks invoked by Drupal modules.

In this tutorial we'll learn:

  • The use case for THEMENAME.theme files, and where to find them
  • The different types of functions and hooks you can implement in a THEMENAME.theme file

By the end of this tutorial you should be able to know how to start adding PHP logic to your custom theme.

Categories
Drupal 8, 9, and 10
More information

Preprocess functions allow Drupal themes to manipulate the variables that are used in Twig template files by using PHP functions to preprocess data before it is exposed to each template. All of the dynamic content available to theme developers within a Twig template file is exposed through a preprocess function. Understanding how preprocess functions work, and the role they play, is important for both module developers and theme developers.

In this tutorial we'll learn:

  • What preprocess functions are and how they work
  • The use case for preprocess functions
  • The order of execution for preprocess functions

By the end of this tutorial you should be able to explain what preprocess functions are and the role they play in a Drupal theme.

Categories
Drupal 8, 9, and 10
More information

When determining which template file to use to theme an element, Drupal uses the list of theme hook suggestions to look for the best match. This allows for fine-grained control over how things appear based on dynamic state and contextual information in your application. The list of theme hook suggestions varies for each base template, so we need a way to figure out our options.

In this tutorial we'll look at:

  • How to determine the list of valid theme hook suggestions for any template file
  • How theme hook suggestions are added by modules and themes

By the end of this tutorial you should be able to explain how theme hook suggestions are added, and determine the valid suggestions for any template file.

More information

Themes and modules can alter the list of theme hook suggestions in order to add new ones, remove existing ones, or reorder the list. This powerful feature allows for the definition of custom logic in your application that can tell Drupal to use different templates based on your own unique needs. You might for example; use a different page template for authenticated users, or a custom block template for someone's birthday.

In this tutorial we'll cover:

  • Adding new theme hook suggestions from a theme using hook_theme_suggestions_HOOK_alter()
  • Altering the list of theme hook suggestions
  • Removing theme hook suggestions
  • Reordering the list of theme hook suggestions

3.4 Demonstrate ability to write template preprocess functions for overriding custom output

A front end specialist should be able to use preprocess functions to override, improve, or get extra data needed for templates.

  • Correct use, specificity, and hierarchy of preprocess functions
  • How to obtain information from the Database, or objects and entities from Drupal and know the correct way of passing this information to your template
  • How to use asset libraries to manage JavaScript libraries and stylesheets
  • Be aware of the changes to the theme API and the improvements to previous versions of Drupal
Categories
Drupal 8, 9, and 10
More information

Every theme can contain an optional THEMENAME.theme file. This file contains additional business logic written in PHP and is primarily used for manipulation of the variables available for a template file, and suggesting alternative candidate template file names. Themes can also use this file to implement some, but not all, of the hooks invoked by Drupal modules.

In this tutorial we'll learn:

  • The use case for THEMENAME.theme files, and where to find them
  • The different types of functions and hooks you can implement in a THEMENAME.theme file

By the end of this tutorial you should be able to know how to start adding PHP logic to your custom theme.

Categories
Drupal 8, 9, and 10
More information

Preprocess functions allow Drupal themes to manipulate the variables that are used in Twig template files by using PHP functions to preprocess data before it is exposed to each template. All of the dynamic content available to theme developers within a Twig template file is exposed through a preprocess function. Understanding how preprocess functions work, and the role they play, is important for both module developers and theme developers.

In this tutorial we'll learn:

  • What preprocess functions are and how they work
  • The use case for preprocess functions
  • The order of execution for preprocess functions

By the end of this tutorial you should be able to explain what preprocess functions are and the role they play in a Drupal theme.

More information

Preprocess functions are specially-named PHP functions that allow themes and modules to modify the variables passed to a Twig template file. They are commonly used by themes to alter existing variables before they are passed to the relevant template files. For example; Changing the makeup of render array so that it renders an <ol> list instead of a <ul> list. Or appending data to the label of a node depending on custom logic.

In this tutorial we'll:

  • Define a new preprocess function in our theme's .theme file
  • Use the preprocess functions to modify the content of an existing variable before it's used in Twig

By the end of this tutorial you should be able to define new preprocess functions in a theme (or module) that manipulate the variables for a specific Twig template file.

Categories
Drupal 8, 9, and 10
More information

Often when building a site in Drupal you'll find yourself wanting to display a list of nodes, or find entities created by a particular author, or locate some content based on a particular set of criteria. Rather than querying the database directly, Drupal provides a helper class, EntityQuery, to make things a bit easier. The EntityQuery class will probably look very familiar to you if you're familiar with the Database API, or the EntityFieldQuery class in Drupal 7.

In this tutorial we'll:

  • Go through several examples of using EntityQuery to find subsets of content.
  • Demonstrate how to iterate over the results of an EntityQuery query.

By the end of this tutorial, you should understand how to use entity queries to create custom sets of data from entities.

See the Read section of Working with Entity CRUD for how to retrieve data that you can use in a preprocess function.

Categories
Drupal 8, 9, and 10
More information

Entity CRUD (Create, Read, Update, and Delete) operations are handled via the EntityTypeManager service.

In this tutorial we'll:

  • Learn how to use the EntityTypeManager service to perform basic CRUD operations with examples you can copy/paste
  • Access both property and field values of an entity
  • Update entities by setting new field values and then saving the object

By the end of this tutorial, you'll be able to understand Entity CRUD operations and be well on your way to becoming comfortable with accessing and manipulating entity values in code.

Drupal 8, 9, and 10
More information

The Render API consists of two parts: structured arrays that provide data and hints about how that data should be rendered, and a rendering pipeline that can be used to render these arrays into various output formats. Understanding at least the basics of how the Render API works, the difference between elements and properties, and the concept of callback functions is an integral part of learning Drupal.

In this tutorial we'll:

  • Look at the fundamentals of the Drupal Render API
  • Point to additional material to provide more detail about the inner workings of the Render API and how content is output in Drupal
Categories
Drupal 8, 9, and 10
More information

An asset library is a bundle of CSS and/or JavaScript files that work together to provide a style and functionality for a specific component. They are frequently used to isolate the functionality and styling of a specific component, like the tabs displayed at the top of each node, into a reusable library. If you want to include CSS and/or JavaScript in your Drupal theme or module you'll need to declare an asset library that tells Drupal about the existence, and location, of those files. And then attach that library to a page, or specific element, so that it gets loaded when needed.

In this tutorial we’ll:

  • Define what an asset library is.
  • Explain why asset libraries are used to include JavaScript and CSS files.
  • Look at some example asset library definitions.

By the end of this tutorial you should be able to define what asset libraries are, and when you'll need to create one.

Categories
Drupal 8, 9, and 10
More information

New asset libraries can be defined by either modules or themes. In order to define a new asset library you need to create the requisite CSS and JavaScript files, and a new THEMENAME.libraries.yml, or MODULENAME.libraries.yml file that aggregates them together and provides metadata about the library itself and any dependencies.

In this tutorial we’ll:

  • Look at the structure of a *.libraries.yml file and demonstrate how to combine a couple of CSS and JS files together into an asset library that can be used in a theme or a module
  • Look at how one asset library can declare that it is dependent on another in order to ensure the assets from the dependency are loaded as well

By the end of this tutorial you should know how to define a new asset library in either a module or a theme.

Categories
Drupal 8, 9, and 10
More information

Once you've defined an asset library you'll need to tell Drupal when you want to add the CSS and JavaScript that it includes to the page. Ideally you'll do so in a way that allows Drupal to only add the corresponding assets on pages where they are needed.

You can attach a library to all pages, a subset of pages, or to elements in a render array. This allows you to have some assets that are global, and others that get loaded on an as-needed basis. To attach a library you'll need to know both its name and prefix, and then use one of the techniques outlined below to let Drupal know when to include it.

In this tutorial, we'll look at attaching asset libraries:

  • Globally, via your THEMENAME.info.yml file
  • Conditionally, via a preprocess function using the #attached render array property
  • Inside of a Twig template file

By the end of this tutorial you should be able to attach asset libraries in various different ways depending on your use case.

4. Layout configuration

This section of the exam is focused on configuration of core Drupal tools, like Blocks and Views, instead of front-end code work.

4.1 Demonstrate ability to create and configure Blocks for building layouts

A front-end specialist should be proficient in creating and managing blocks in Drupal’s UI, and in custom code. They should follow best practices for creating flexible layouts using Drupal’s built-in block system.

Using blocks in the UI to create layouts:

Drupal 8, 9, 10, and 11

Creating blocks in custom code uses Drupal's Plugin API:

Blocks

Topic
Drupal 7, 8, 9, and 10
More information

A block is a reusable widget that is placed inside regions (layout containers) of your theme. Blocks can be used by site administrators on the Block layout admin page or provided by a module using the Plugin API.

4.2 Demonstrate ability to create and configure Views for building content list pages, blocks and feeds

Categories
Site Building, Module Development
Drupal 8, 9, and 10

4.3 Demonstrate ability to use Layout Builder module to build layouts

Categories
Site Building, Theming, Module Development
Drupal 8, 9, and 10

5. Performance

5.1 Demonstrate ability to analyze and resolve site performance issues arising from site configuration

More information

Performance and scalability determine how fast your application can serve a page and to how many users at a time.

Drupal 8, 9, and 10
More information

Caching in Drupal is controlled by Drupal's Cache API which is used to store any type of data on a permanent or temporary basis. Some types of data tend to take a long time to compute, but utilizing the Cache API in your module can help your site load data more quickly.

Categories
Drupal 8, 9, and 10
More information

Drupal comes with all of its caching features enabled by default. This improves response time, but can be frustrating for themers as it makes it harder to preview the changes you make to template files.

In this tutorial we'll look at:

  • Why these features are enabled by default
  • How the theme layer leverages Drupal's caches
  • Why you should learn to disable them when doing development

5.2 Demonstrate ability to analyze and resolve site performance issues arising from custom theme

More information

The Render API is capable of detecting poorly-cacheable (highly dynamic) parts of a page and rendering them later using a process called auto-placeholdering. This works by using #lazy_builder callbacks to lazy load certain very dynamic subtrees of a render array. The place in the array where that very dynamic content would appear is first assigned a placeholder. At the very last moment it is replaced with the actual content.

This allows Drupal to do things like cache the overall page in the Dynamic Page Cache despite parts of the page being too dynamic to be worth caching. It also allows the Render API to assemble a page using cache fragments combined with non-cacheable elements.

In this tutorial we'll:

  • Discuss what lazy builders are and how they work in conjunction with placeholders to speed up the rendering pipeline
  • Cover some common gotchas for lazy builders
  • Look at some example code that implements a lazy builder callback

By the end of this tutorial, you should know how and when to use the #lazy_builder property of a render array and how Drupal uses placeholders to increase the cacheability of content and speed up the rendering process.

More information

The individual items that make up the content of a page impact the cacheability of that page. In order for Drupal's cache and external caches to better understand how the content varies on a page, module developers use the #cache render element property. The #cache property defines cacheability metadata for individual elements in a render array.

Additionally, these Render API elements can become fairly complex. The calculation of what the final HTML output should look like often involves looking up content in the database, checking multiple conditions, maybe querying an external API, and various other tasks. This can cause turning a render array into HTML to become quite expensive. In order to speed up this process, the Render API will cache the generated HTML for each element and reuse it on future requests whenever possible -- but only if you tell it to do so.

In this tutorial, we'll look at:

  • How render caching impacts the performance of a page
  • Defining the cacheability of an item with cache tags, cache contexts, and cache max-age
  • Examples of using the #cache property in a render array

By the end of this tutorial you should know how, and when, to use the #cache property when defining render arrays.

Categories
Drupal 8, 9, and 10
More information

Knowing how to clear Drupal's cache is an important skill for any developer. You'll likely find yourself doing it frequently in order to get Drupal to register the changes you make to your code, or other updates you make via the UI. It is also a good first step to trouble shooting problems with your Drupal site: Clear the cache before you do any other debugging to ensure it's not just a bad cache entry.

6. Security

6.1 Demonstrate ability to analyze and resolve security issues arising from site configuration

6.2 Demonstrate ability to analyze and resolve security issues arising from a custom theme

Security

Topic
Drupal 8, 9, and 10
More information

Keeping a Drupal site secure requires monitoring security announcements, performing regular updates, and knowing how to properly use Drupal’s APIs to write secure code.

Drupal 7, 8, 9, and 10
More information

Coding standards provide a set of rules for how your code should be formatted, and best practice guidelines for naming conventions and the location of files.

General knowledge

Drupal 8, 9, 10, and 11
More information

Object-oriented PHP utilizes classes and objects to organize code into reusable chunks. This approach helps us organize complex applications, such as Drupal, into modular code called classes that can be reused across the entire system.

More information

The Git version control system can help you keep track of changes in your codebase and make sure you don't unintentionally lose work.

Devel

Topic
Drupal 7, 8, 9, and 10
More information

Devel is a popular developer module containing a variety of developer and debugging utilities including Webprofiler, Devel generate and Kint.

Layouts

Topic
Drupal 7, 8, 9, and 10
More information

A layout can describe how various components are arranged on various levels—from an entire page from the header to the footer, to just the “middle” where the dynamic content goes, to individual components. It can apply to templates for managed content or one-off designs for landing pages.

Drush is considered an essential skill for Drupal site development.

More information

Drush is a command line interface that enables you to interact with your Drupal site without clicking around the graphical user interface (GUI).

New to the command line? Get up-to-speed with Command Line Basics.

The tutorials listed in this study guide also appear in the following guides:

Categories
Theming
Drupal 8, 9, and 10
Categories
Site Building, Theming, Module Development, Site Administration
Drupal 8, 9, and 10
Categories
Site Building, Module Development
Drupal 8, 9, and 10
Categories
Site Building, Theming, Module Development
Drupal 8, 9, and 10
Categories
Theming, Module Development
Drupal 8, 9, and 10
Categories
Theming, Module Development
Drupal 8, 9, and 10
Categories
Module Development
Drupal 8, 9, and 10
“Drupalize.Me has trained thousands of Drupalistas. Their video lessons help to address our constant need for more Drupal talent. Drupal needs training like this to support its growth.”
Dries Buytaert
Drupal Founder and Project Lead
Photo of Dries Buytaert
“They’re easy to understand. They’re thorough. They’re funny. They’re always entertaining, and it makes it easy to learn parts of Drupal and how you can integrate it into your workflow and learn more and have a good time doing it.”
Roger Carr
Drupalize.Me Member
Photo of Roger Carr
“The mission of the Drupal Association is to foster and support the Drupal software project, the community, and its growth. Drupal education, like that provided by Drupalize.Me, is important to this mission.”
Megan Sanicki
Former Exec. Director, Drupal Assoc.
Photo of Megan Sanicki

FAQs

Am I required to sign a contract?
No. You can purchase a membership and/or cancel any time. Drupalize.Me is a pay-as-you-go service.

Can I preview tutorials before joining?
Yes! Just navigate to our tutorial library. Our free tutorials are labeled with a green "FREE" tag.

Can I watch videos on my mobile device?
Yes! Drupalize.Me is a responsive site and can be accessed in the browser on any mobile device. More FAQs