Banner

Drupak Drupal Career Development Program

Drupal UI Suite & Component-Based Site Building

Learn how to build modern Drupal websites using UI Suite and Single Directory Components (SDC). This lesson covers UI Patterns, reusable components, layouts, field formatters, Views integration, and design systems, enabling site builders to create flexible, component-driven interfaces directly from the Drupal admin.

Topics Covered

  • Introduction to UI Suite
  • Design System Architecture
  • UI Styles
  • UI Patterns
  • UI Pattern Blocks
  • UI Pattern Layouts
  • UI Pattern Field Formatters
  • UI Pattern Views
  • Single Directory Components (SDC)
  • Component-Based Development
  • Card Components
  • Mapping Fields to Components
  • Slots and Component Properties
  • Grid Layouts
  • Views Integration
  • Iconify Integration

  • UI Icons

     

     

Course Content

01
HTML, CSS And Tailwind CSS
1.1
Introducation To HTML
1.2
CSS Box Model, Selectors & Specificity
1.3
CSS Basics – Selectors & Floats
1.4
HTML5 & CSS Positioning
1.5
Images & CSS Gradients
1.6
BEM & Responsive Design
1.7
CSS Flexbox & Responsive Design
1.8
CSS Grid Basics
1.9
Advanced CSS Grid
1.10
Figma to HTML & CSS
1.11
Responsive Navbar & Theme Switcher
1.12
Tailwind CSS Introduction
1.13
Modern CSS Techniques
02
JavaScript: Basic to Advanced
2.1
JavaScript Fundamentals
2.2
Functions & Arrays
2.3
Array Methods & DOM
2.4
DOM Manipulation & Events
2.5
Tabs & Accordions
2.6
Modal Component
2.7
Object-Oriented JavaScript
2.8
Scope, Closures & This
2.9
Async JavaScript
2.10
Working with APIs
2.11
ES6 Modules & Vite
03
PHP and MySQL Fundamentals
3.1
Introduction to PHP
3.2
Blog website project - Part 1
3.3
Blog website project - Part 2
3.4
Blog website project - Part 3
3.5
Blog website project - Part 4
3.6
Blog website Project - Part 5
3.7
Blog website project - Part 6
04
Advanced PHP Development
4.1
PHP OOP Fundamentals: Classes, Inheritance & Autoloading
4.2
Advanced PHP OOP: Design Patterns & Dependency Injection
4.3
Doctrine ORM in PHP: Entities, Relationships & CRUD
4.4
Build a Custom PHP MVC Framework from Scratch
4.5
Advanced PHP MVC: Dynamic Routing & View Rendering
4.6
PHP MVC Dependency Injection Container & Auto-Wiring
4.7
Advanced PHP MVC: Request, Response & Error Handling
4.8
PHP MVC with Twig & Database Models
4.9
PHP MVC CRUD Operations & Entity Controllers
4.10
PHP MVC Sessions, Flash Messages & CSRF Protection
4.11
PHP MVC Middleware, DI Container & Redirect Responses
4.12
PHP MVC Event Dispatcher & Event-Driven Architecture
4.13
PHP MVC Framework Refactoring & Architecture
05
Symfony: Beginner to Advanced
5.1
Symfony Fundamentals: Installation, Routing & Twig
5.2
Symfony Doctrine ORM & CRUD Operations
5.3
Symfony Forms, Validation & CRUD
5.4
Symfony Doctrine Relationships & Advanced ORM
5.5
Symfony Security, Authentication & File Uploads
06
Drupal Development Masterclass
6.1
Drupal Fundamentals: Installation, Content & Site Building
6.2
Drupal Site Building: Media, Layout Builder & Configuration
6.3
Drupal Views, Workflows & Content Modeling
6.4
Drupal Advanced Views & Project Management System
6.5
Drupal ECA Automation & Notifications
6.6
Drupal Event Management Website Development
6.7
Drupal Paragraphs & Custom Theme Development
6.8
Drupal Advanced Theming & Paragraph Components
6.9
Drupal Views Theming with Twig & Tailwind CSS
6.10
Custom Layout Plugins, Layout Paragraphs, Mercury Editor
6.11
Introduction to Preprocess Hooks
6.12
Drupal Custom Modules, Hooks continued & Field Groups
6.13
Drupal Single Directory Components (SDC) & DaisyUI
6.14
Drupal UI Suite & Component-Based Site Building
6.15
Drupal Group Module & Multi-Site Management
6.16
Building Multi-sites in Drupal using Group module - Drupal Camps Website - Part 1
6.17
Building Multi-sites in Drupal using Group module - Drupal Camps Website - Part 2

WHY CHOOSE US AS YOUR DRUPAL PARTNER?

We combine strong technical skills, business insight and hands-on Drupal AI experience in every project. With over 100 projects delivered since 2012, an Acquia-certified team and clear, honest communication, we turn complex technology into a real advantage for your business.

consultation image