Drupal・6 min read・Last update on July 12, 2023 # Drupal Front-End Grooming for Beginners ![Drupal Front-End Grooming for Beginners](/sites/default/files/remediation-media/64e5deb24bf681bb3244e5c3_Drupal_20Front-End_20Grooming.avif) Table of contents - [List of prerequisite tech stack for front-end developers](#list-of-prerequisite-tech-stack-for-front-end-developers) - [Setting up development requirements](#setting-up-development-requirements) - [Learning front-end development from scratch](#learning-front-end-development-from-scratch) - [Essential skills to learn ](#essential-skills-to-learn) - [Improving front-end performance ](#improving-front-end-performance) - [Conclusion](#conclusion) Front-end development takes care of the user interface on the website. It will manage the style, look and feel of the website and everything you see on a webpage, like forms, buttons, links, and more. It is the front-end developer's job to take the design concept from the design file and implement it. A themer, also known as a front-end developer, sits between the designer and the developer on a project. They are responsible for the architecture and implementation of the client-facing parts of the website. It includes working with HTML, CSS, JavaScript, and related technologies. ### List of prerequisite tech stack for front-end developers **HTML5** **CSS3** **JavaScript** - ES5, ES6, jQuery, Typescript, and JS Frameworks (REACT & Angular) **Templating** - Twig **Package managers** - NPM and Yarn **CSS Preprocessors** - SASS and LESS **CSS Frameworks** - BootStrap **Build Tools** - Task Runners (Gulp & Grunts), Module Bundlers (Webpack), and Linters & Formatters (ES Lint & JS Lint) **Performance** - Chrome Devtools **CMS** - Drupal **API Server** - Nodejs and Drupal A front-end developer crafts HTML, CSS, and JS that typically runs on the web platforms (web browsers) delivered from one of the following operating systems. - Android - Chromium - iOS - OS X (macOS) - Ubuntu (or some flavor of Linux) - Windows These operating systems run on one or more of the following devices: - Desktop Computer - Laptop - Mobile phone - Tablet ### Setting up development requirements #### VS Code intro & setup Visual Studio Code, the most popular source code editor, is lightweight but powerful. It is optimized for building & debugging modern web applications. VS Code helps you be instantly productive with syntax highlighting, bracket-matching, auto-indentation, box selection, snippets, and more. Watch this video on how to set up visual studio code for web developers. **Link:** [VS Code Intro & Setup](https://www.youtube.com/watch?v=uovNnCjjfx4&t=5s) #### Learn to use Version Control System Git is a free & open-source distributed version control system for tracking changes in computer files and coordinating work on those files among the development team. When working on big projects, it is not possible to copy and create multiple versions of the hundreds of files present. The version control system helps to streamline this process. Watch some videos of Git to understand how it works. **Link:** [Git and GitHub Introduction](https://www.w3schools.com/git/git_intro.asp?remote=github) ### Learning front-end development from scratch #### Create structure with HTML HTML is a hypertext markup language for creating web pages. We create the structure of the web pages using HTML. Every front-end developer should practically know how to build a web page structure with HTML and all about HTML5 Tags, Semantic Tags, Formatting Tags, HTML Block & Inline Elements, HTML Form Attributes, and HTML Media Tags. **Links:** [HTML Element Reference](https://www.w3schools.com/tags/default.asp) [Responsive Web Design](https://www.freecodecamp.org/learn/2022/responsive-web-design/) #### Style with CSS CSS stands for cascading style sheets. Learn CSS to set the layout (UI) of the web page with beautiful colors, fonts, styles, and more. Front-end developers should have a strong understanding of setting the web page layout (UI) with attractive styling. Developers should have hands-on practice with all CSS Selectors, like Combinators, Pseudo classes, Pseudo elements, and Attribute Selectors. Learn about Specificity in CSS, Box Model, CSS box-sizing Property, and Units. **Links:** [CSS Tutorial](https://www.w3schools.com/css/default.asp) [Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5) #### SCSS (CSS preprocessor) SCSS is a syntactically awesome stylesheet. It is a preprocessor scripting language, interpreted or compiled into cascading style sheets. SCSS lets you use variables, mathematical operations, mixins, loops, functions, imports, and other functionalities that make CSS more powerful. **Links:** [Sass Tutorial for Beginners](https://www.youtube.com/watch?v=_a5j7KoflTs&t=6s) [SASS](https://www.freecodecamp.org/learn/front-end-development-libraries/#sass) #### JavaScript JavaScript adds interactivity to web pages. Basic JavaScript is required to make static web pages dynamic and interactive. Learn the scope and difference of Var, Let & Const keywords, Operators, Loops & Arrays, Functions with Arrow & Map function, etc. **Links:** [Learn JavaScript](https://www.youtube.com/watch?v=PkZNo7MFNFg) [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) #### jQuery basics for beginners jQuery is a small & lightweight JavaScript library. It is designed to simplify HTML DOM tree traversal and manipulation, event handling, animation, and Ajax. **Links:** [jQuery Tutorial](https://www.youtube.com/watch?v=QhQ4m5g2fhA&t=2s) [jQuery](https://www.freecodecamp.org/learn/front-end-development-libraries/#bootstrap) #### Responsive design concepts A front-end developer should know how to make a website responsive on all devices. Developers should know how to write the CSS media query and define different style rules for different media queries. Learn responsive web design & media query - CSS media query in the stylesheet - Understand the right approach for media Query - Understand Width & Device width **Link:** [CSS Media Queries](https://www.w3schools.com/css/css3_mediaqueries.asp) #### Gulp Gulp is a tool often used to do front-end tasks like spinning up a web server, reloading the browser automatically whenever a file is saved, using preprocessors like Sass or LESS, and optimizing assets like CSS, JavaScript, and images. Tools like Gulp are often referred to as “build tools” as they are used to build a website. **Link:** [Gulp for Beginners](https://css-tricks.com/gulp-for-beginners/) #### Grooming in Drupal front-end development Drupal themers use PHP in template files, and Twig in Drupal 8. Advanced front-end developers will often create “glue code” modules, or functions in PHP that expose configuration options to site builders. **Links:** [Theming Drupal](https://www.drupal.org/docs/theming-drupal) [What Is a Theme](https://drupalize.me/tutorial/what-is-theme?p=2512) ### Essential skills to learn #### Drupal installation - Install Drupal on your computer: *composer update "Drupal/core-\*" --with-all-dependencies* - Setup the local development environment: ddev or lando #### Theming - Download, install, and uninstall the contrib theme. - Define a new theme with .info file. - Create a custom theme, and add & print some regions in your theme. - Check the core themes. - Make a new sub-theme from the base theme, create some CSS and JS files, attach it, and override any template file. #### Asset libraries **Links:** [What Are Asset Libraries](https://drupalize.me/tutorial/what-are-asset-libraries?p=2512) [Define an Asset Library](https://drupalize.me/tutorial/define-asset-library?p=2512) [Attach an Asset Library](https://drupalize.me/tutorial/attach-asset-library?p=2512) #### Hooks for Drupal theming Preprocess functions allow Drupal themes to manipulate the variables used in Twig template files by using PHP Functions to preprocess data before it is exposed to each template. Developers should know how to find the list of valid theme hook suggestions for any template file and enable the Twig debugging mode to discover available theme hook suggestions. - Add a new variable to a template file through the preprocess function & print it in the template file. - Add the new theme suggestion & use that to override any template file. - [Add a preprocess function in your sub-theme](https://drupalize.me/tutorial/what-are-preprocess-functions?p=2512) - Inspect variables available in template: kint(), dump() - [Change variables with preprocess functions](https://drupalize.me/tutorial/change-variables-preprocess-functions?p=2512) - [Add a new variable to a template file](https://drupalize.me/tutorial/add-variables-template-file?p=2512) - [Discover existing theme hook suggestions](https://drupalize.me/tutorial/discover-existing-theme-hook-suggestions?p=2512) - [Add a new theme hook suggestion](https://drupalize.me/tutorial/add-new-theme-hook-suggestions?p=2512) #### Twig in Drupal Twig is the default engine for Drupal. If you want to make changes to the output markup in Drupal, you need to know Twig. It is a template engine for PHP, that allows an app or system like Drupal to separate the concerns of functional “business” logic and the presentation or markup of the resulting data. **Links:** [Working With Twig Templates](https://www.drupal.org/docs/theming-drupal/twig-in-drupal/working-with-twig-templates) [Twig in Drupal](https://drupalize.me/tutorial/twig-drupal?p=2512) [Twig Syntax Delimiters](https://drupalize.me/tutorial/twig-syntax-basics?p=2512) [Arrays & Objects in Twig](https://drupalize.me/tutorial/arrays-and-objects-twig?p=2512) [Loops & Iterators in Twig](https://drupalize.me/tutorial/loops-and-iterators-twig?p=2512) [Print Values from a Field with a for Loop](https://drupalize.me/tutorial/print-values-field-loop?p=2512) [Twig Filters & Functions](https://drupalize.me/tutorial/twig-filters-and-functions?p=2512) [Whitespace Control with Twig](https://drupalize.me/tutorial/whitespace-control-twig?p=2512) [Handling Translations in Twig](https://drupalize.me/tutorial/make-your-theme-translatable?p=2512) [HTML Classes & Attributes in Twig Templates](https://drupalize.me/tutorial/classes-and-attributes-twig-templates?p=2512) [Twig Template Inheritance](https://drupalize.me/tutorial/twig-template-inheritance?p=2512) [Make Strings Translatable](https://drupalize.me/tutorial/make-strings-translatable?p=2512) #### JavaScript in Drupal Developers writing JavaScript in Drupal should use Drupal.behaviors API when writing their custom JavaScript functionality. Doing so ensures that your JavaScript is executed at the appropriate times during the lifecycle of a page, such as when the page loads, or after new DOM elements have been added via an AJAX request. **Links:** [Load JavaScript in Drupal with Drupal.behaviors](https://drupalize.me/tutorial/load-javascript-drupal-drupalbehaviors?p=2512) [Wrap your Custom JavaScript in a Closure](https://drupalize.me/tutorial/wrap-your-custom-javascript-closure?p=2512) [Use Drupal.theme for HTML markup in JavaScript](https://drupalize.me/tutorial/use-drupaltheme-html-markup-javascript?p=2512) [String Manipulation in JavaScript](https://drupalize.me/tutorial/string-manipulation-javascript?p=2512) [Use Drupal.t() for Translatable Strings in JavaScript](https://drupalize.me/tutorial/use-drupalt-translatable-strings-javascript?p=2512) [Pass Data from PHP to JavaScript in Drupal](https://www.codimth.com/blog/web/drupal/passing-data-php-javascript-drupal-8) ### Improving front-end performance Web performance is all about making websites fast. Web performance refers to how quickly site content loads and renders in a web browser and how well it responds to user interaction. - Aggregate JavaScript and CSS. - Minify JavaScript, CSS, and HTML. - Leverage browser caching and enable gzip compression. - Specify image dimensions. - Optimize images & leverage breakpoints to download appropriate image sizes. - Use lazy loading for site assets. - Keep inline background images under ~4KB in size. - Remove unused CSS & use efficient CSS selectors. **Link:** [Front-End Performance](https://www.drupal.org/docs/mobile-drupal-sites/front-end-performance) ### Conclusion Drupal Front-End Development (Theming) primarily focuses on User Experience (UX). Developers can use fewer coding and design techniques to make complex websites and attractive User Interfaces (UI) easily. If you want to attempt the Acquia Drupal Front-End Specialist Certification, explore [Preparing For Drupal FE Specialization Certificate](/insights/top-tips-for-drupal-fe-specialization-certificate). Written by Megha Sharma Frontend Engineer ## We'd love to talk about your business objectives [ Contact Us ](/contact)