Drupal
min read
January 13, 2023

Top Tips for Drupal FE Specialization Certificate

Top Tips for Drupal FE Specialization Certificate
Table of contents

The Drupal Front-End Specialization Certificate is part of Acquia's Drupal Certification Programs, and the name of the exam is Acquia Certified Drupal 9 Front-End Specialist. The fee for the exam is $300. This exam contains 60 scenario-based questions. You get 90 minutes to complete and require a minimum 68% score to pass the exam. 

Why is Acquia Drupal 9 Front-End Specialist Certification necessary?

The certification will assess your knowledge of Drupal front-end development skills. It will validate the skills & knowledge of Drupal developers in fundamental web development, theming, template & preprocess functions, and site-building. Drupal front-end developers will get opportunities to accumulate knowledge and practical skills to improve their work efficiency. The exam tells you where you stand in the front-end area. 

Essential exam-related topics

Acquia's Drupal Certification program 

TOTAL = 60 Questions

  • Fundamental Web Development Concepts (12-15 Questions)
  • Theming Concepts (14-16 Questions)
  • Templates Preprocess Functions (14-16 Questions)
  • Layout Configuration (8-10 Questions)
  • Performance (2-4 Questions)
  • Security (2-4 Questions)


Find below some essential links and related topics to prepare for the certification exam. 

Fundamental web development concepts

HTML

We create the structure of the web pages using HTML. Every front-end developer must have practical practice in creating a structure of the webpage with HTML.

Required knowledge: HTML5 Tags, Semantic Tags, Formatting Tags, HTML Block & Inline Elements, HTML Form Attributes, and HTML Media Tags. 

Links:

HTML Semantic Elements

HTML Block and Inline Elements 


CSS

You need to have a strong understanding of setting the layout (UI) of a webpage with beautiful colors, fonts, styles, and more.

Required knowledge: Specificity in CSS, Box Model, CSS box-sizing Property, and Units.

Required hands-on practice: CSS Selectors, like Combinators, Pseudo classes, Pseudo elements, and Attribute Selectors.

Links:

CSS Selectors

CSS Specificity

CSS Box Model

CSS Units

CSS Box-Sizing Property

HTML & CSS 


JavaScript

We use JavaScript to add interactivity to the web pages. It helps you to make static web pages dynamic and interactive.

Required knowledge: Scope and difference of Var, Let & Const keywords, Operators, Loops & Arrays, Functions with Arrow & Map function.

Links:

JavaScript Arrow Function

JavaScript Array map()

JavaScript 


PHP Programming concepts

It is essential to have a good basic knowledge of programming languages.

Required knowledge: How to clear the function calls, print array values, merge two or multiple arrays, and how the operator works.

Required hands-on practice: Data types, Operators, Loops & Arrays, and Functions & Strings.

To do: Create a function, use if conditions & operators in the function, and call another function in the function. Create arrays & check how we print all the values of the array & specific values of the array.

Links:

PHP Data Types

PHP Operators

PHP Loops

PHP Arrays

PHP Strings 


Responsive design concepts

A front-end developer should have good knowledge of how to make a website responsive so that it looks good on all devices, and which is the right approach for media queries.

Required hands-on practice: Writing CSS media queries and defining different style rules for different media queries.

To learn: Responsive web design & media query, CSS media query in the stylesheet, understanding the right approach for media query, and understanding width & device width.

Link:

CSS Media Queries 

Theming Concepts

It is necessary to practice & complete the Drupal Theming from Drupalize.me  and Drupal.org

Links:

Theming Drupal

What Is a Theme?

Drupal Front-End Grooming 


Building a sub-theme from a base theme

It is vital to know all about core themes and sub-themes as it is necessary to take care of all the required files & basic keys in the custom folder structure.

Required knowledge: Understand the folder structure, core themes, required files & keys in the subtheme.

To do: Create a subtheme with the set base theme as false, subtheme inheritance, and default fallback theme.

Links:

Creating Sub-Themes

Drupal Theme Folder Structure

Sub-Theme Inheritance 


Define and use custom regions in a theme

Drupal FE developers should analyze all the pages of a website and decide the regions for the site. It is important to know about defining & printing the regions, which all Drupal default regions will be available, and from which file it will come.

Required knowledge: Definition of regions, printing the regions, and Drupal default regions.

To do: Practice defining no regions in the sub-theme, with only one region in the subtheme, and check which regions will be available.

Link: 

Adding Regions to a Theme 


Knowledge of working with stylesheets

It is necessary to understand the process of creating CSS or JS files, defining & attaching libraries, and how to override and extend the asset libraries of the Drupal core.

Required knowledge: Role of asset libraries, adding assets (CSS, JS) to a Drupal theme, ways to attach libraries to the specific and all pages, defining a library, overriding and extending libraries, and adding properties to include CSS/js.

To do: Practice with stylesheets to know how CSS & JS loads for modules and themes as an asset library in Drupal.

Link:

Adding Assets (CSS, JS) to a Drupal Theme 


Working with theme configurations

It is important to know about the theme configuration of Drupal & how themes can modify the entire theme settings form by adding a PHP function, and how we can get the settings in the theme files.

Required knowledge: Understand the creation of theme settings in sub-themes, the use of theme-settings.php, learn the add, and get the setting values.

Link:

Creating Advanced Theme Settings 


Working with breakpoints in a theme

Drupal front-end developers should use Drupal breakpoints with responsive image modules, know how to define the breakpoints in Drupal, which keys are required to define the breakpoints, and the working of breakpoint groups in Drupal. 

Required knowledge: Understand the creation of breakpoints & breakpoint groups.

To do: Practice with breakpoints, use a breakpoint with a responsive image module, and read the advance use part.

Link:

Working with Breakpoints in Drupal 


Working with JavaScript in a theme

Required knowledge: Drupal behavior, the use of Drupal behavior, why we use it, and the code syntax to write Drupal behavior functions.

To learn: Understand the use of these two arguments of the function (context & settings). 


Understanding JavaScript behavior in Drupal

Required knowledge: How to run JavaScript in Drupal, why we need Drupal behavior, use context, settings & once(), and how to pass variables from PHP to JavaScript in Drupal.

Links: 

Understanding JavaScript behaviors in Drupal

Drupal Behaviors 

Templates Preprocess functions

Working With Twig Templates 


Using Twig syntax

Twig is a default template engine for Drupal. If we want to output markup in a module or theme in Drupal, we need the Twig templating language & templates. 


Understanding Twig in Drupal

Twig syntax delimiters

Twig all tags - block, extend, auto escape, embed, include, use, merge, set, import.

Twig all filters - spaceless, strip tags, lower, upper, raw, capitalize, trans.
 

Classes and attributes in Twig templates - Add classes in attribute, add new attributes & attribute objects in Twig, and use without a filter in attributes.
 

Arrays & functions - Create a new array, add values in an existing array, and t function.

Links: 

Twig Documentation

Filters - Modifying Variables In Twig Templates

Twig Merge Filters

Using Attributes in Templates 


Build and customize core templates for managing markup

Template files in Drupal are responsible for the HTML structure of all the Drupal pages.

Required knowledge: Steps of overriding the Twig template file & which order, Drupal template naming conventions, conventions page lists used for the base HTML structure, order of the templates, overriding the template file, & Twig template naming conventions.

Link:

Twig Template Naming Conventions 


Work with template suggestions

Developers should know how to find the list of valid theme hook suggestions for any template file. We need to enable the Twig debugging mode to discover available theme hook suggestions.

To learn: Theme template suggestions alter, discover existing suggestions with debug mode, and add new theme hook suggestions.

Link:

Discover Existing Theme Hook Suggestions 


Pre-process functions for overriding custom output

Required knowledge: In which file do we write the preprocess function, and when does the code of the preprocess function run.

To do: Add the same preprocess function in the theme & module. Check which one will run first. Which one overrides the existing one? Write the preprocess code for only specific node types.

Link:

Twig Best Practices - Preprocess Functions and Templates 


Form alter and template suggestions alter

Developers should know the hooks for form-specific alteration in Drupal.

To do: Provide a form-specific alteration for shared ('base') forms, perform alterations before a form is rendered, and provide a form-specific alteration instead of the global one. Run the hook to alter the node_form for all nodes.

Link: 

Function Hook Base Form 

Layout configuration

You have to have good site-building experience in blocks, views, content, and entity reference fields. 


Blocks

Developers should know when and how to create and configure blocks for building layouts.

Required knowledge: Strong understanding of blocks in Drupal, how to create a block, how to place it in one region and multiple regions, how to configure the block to display it in only specific types of content pages, and how to check other configurations of blocks.

Link:

User Guide to Blocks 


Views

Developers should know how to create and configure views for building content list pages, blocks, and feeds.

Required knowledge: A good understanding of views with all configurations, how & when to create a view block & view page.

Required hands-on practice: The why & how to use relationships in views.

To do: Check all the settings of views (formats, fields, filter criteria, pager, and block), Expose, Grouping, Relationship, and Contextual Filters.

Links:

Creating Listings with Views

Relationships in Views

Contextual Filters in Views 


Layout Builder

We can create a different layout structure based on content type & as per page of the same content type. Use the Layout Builder module to build different layouts

Required knowledge: How to create a page layout using the layout builder.

Required hands-on practice: Working with the layout builder module.

To do: Change the layout on a content type basis, and change the layout on a per-page basis of the same content type.

Link:

Introduction to Layout Builder 

Performance

Every front-end developer should know how to resolve the site performance issues arising from site configuration, what to do if a website is loading slowly, and how to take care of site performance. 


Effective ways to improve the page performance 

A few ways to improve front-end performance are to minify HTML, CSS, and JavaScript, aggregate CSS, and JavaScript, optimize images, leverage browser caching, and more.

Link: 

Front-End Performance 

Security

Resolve security issues arising from custom theme 

Developers should write secure code for Drupal and use safe translation filters with placeholders while writing the code in a Twig file. 


Writing secure code in a Twig file, & Safe Translation Filters with the placeholder

Link:

Filters - Modifying Variables In Twig Templates 


New techniques implemented in Drupal 9 for security

Link:

Writing Secure Code for Drupal 


Naming conventions & location of files

Link:

Drupal Theme Folder Structure 

Extra introductions to read

Drupalize - Acquia Certified Drupal Front End Specialist Exam

Acquia - Study Guide 

Tip

Read the questions carefully. Be calm and relaxed during the examination. 

Conclusion

The Drupal Front-End Specialist Certification helps to showcase your skills & knowledge in the area of Drupal Theming. It allows you to prove your experience and increase your value as a Drupal Front-End Specialist Developer. 

All the best for your Drupal Front-End Specialization Certificate!

Register & Schedule the Exam! 

Written by
Artwork by
No art workers.
We'd love to talk about your business objectives