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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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
- Inspect variables available in template: kint(), dump()
- Change variables with preprocess functions
- Add a new variable to a template file
- Discover existing theme hook suggestions
- Add a new theme hook suggestion
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:
Print Values from a Field with a for Loop
HTML Classes & Attributes in Twig Templates
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
Wrap your Custom JavaScript in a Closure
Use Drupal.theme for HTML markup in JavaScript
String Manipulation in JavaScript
Use Drupal.t() for Translatable Strings in JavaScript
Pass Data from PHP to JavaScript in Drupal
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:
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.