Drupal Theme Development in Practice

Learn to turn HTML designs into Drupal themes with this real-world case study course

In this course, students will go step-by-step through the process of creating a Drupal theme from an HTML design. This includes breaking down the design logically into components, determining which features from Drupal core and contributed modules to use to implement those components, and building a functional theme to match the original design.

Who is this class for?

This class is for students who already know the fundamentals of creating Drupal themes, and want to learn how to apply those skills to a real-world project. Students taking this course should understand HTML, CSS, and Twig, and have a familiarity with the Drupal CMS. Students who have never built a Drupal theme before should take our introductory course, Drupal Theming Fundamentals, before taking this course.

What does this course cover?

Students who take this course will be able to:

  • Break down a design into logical components that can be implemented as Drupal entities.
  • Determine which entity types are best suited for each element of the design.
  • Customize the layout and regions of a Drupal theme.
  • Implement design elements as regions, blocks, content, media, and paragraphs.
  • Use the Layout Paragraphs module to enhance the content editor experience when building Drupal pages with paragraphs.

At the end of this course, students will have built a functional Drupal website from a Bootstrap 5 based design, following best practices for Drupal theming. Click here to view the design mockup we will covert to a Drupal theme in this course.

How is it taught?

The course will consist of pre-recorded video lessons and live Q&A sessions with the course instructor. The lesson videos can be watched on-demand, anytime it's convenient. Throughout the course, students will work through a series of hands-on exercises, building a custom theme that demonstrates the concepts covered in each lesson. We will provide an online development environment in which to follow along with the lessons and complete the assignments.

The weekly live sessions will be conducted online using Zoom. During the sessions, the instructor will answer questions about the lessons and will help troubleshoot any issues. In addition to the live sessions, you will have access to an online forum to discuss assignments with other students and ask the instructor questions during the week.

How long is this course?

The estimated time commitment for the course is 6 - 8 hours per week for 2 weeks.

After the course is over, you can continue to access the lesson videos, free of charge, forever. There are no monthly subscription fees. Just come back and watch the lessons whenever you want. They are great when you need a refresher on a topic.

Lessons in This Class

Video Duration
Introduction 00:09:28
Introduction to the DrupalTutor Devstack 00:12:06
Installing Drupal Core 00:15:53
Fixing the Trusted Host Settings Error 00:06:03
Enabling Drupal Development Settings 00:10:00
Installing Drupal Development Tools 00:17:58
Running Drush Without the Path 00:06:40
Using the Example Code Repository 00:15:26

Video Duration
Overview of the Design 00:12:33
Mapping the Design Elements to Drupal 00:21:04
Downloading the Design Template 00:03:15
Creating the Drupal Theme 00:09:57
Adding the CSS and Javascript 00:16:21

Video Duration
Theming the Branding Block 00:20:54
Theming the Main Menu 00:18:16
Theming the Secondary Menu 00:15:34

Video Duration
Theming the Footer Branding Block 00:17:07
Theming the Footer Menu 00:07:52
Theming the Social Media Links 00:14:12
Theming the Footer Menu Blocks 00:11:03
Theming the Newsletter Subscription Form 00:06:03

Video Duration
Theming the Page Title Block 00:07:15
Theming the Page Breadcrumbs Block 00:06:33

Video Duration
Creating the Blog Content Type 00:13:15
Theming the Full Page Blog Post Page 00:25:54
Theming the Blog Listing Page 00:25:24
Theming the Latest Articles Block 00:23:22
Theming the Tags Block 00:13:28
Theming the Blog Social Media Links 00:03:53

Video Duration
Setting Up the Paragraphs Architecture 00:24:28
Theming the Text Paragraphs 00:27:54
Theming the Media Paragraphs 00:29:35
Using Layout Paragraphs 00:22:03
Theming the Cards Paragraph 00:36:00
Theming the Cards Grid Paragraph 00:13:22
Theming the Contact Form 00:21:13
Finishing the Other Paragraph Types 00:09:59

Video Duration
Making the Page Title Block Optional 00:07:21
Cleaning Up and Finishing the Theme 00:13:29

Video Duration
Class Wrap-Up 00:02:35
$ 248
Per student
  • 7+ hours of video lessons
  • 4 live webinars with your instructor
  • Permanent access to the recordings of all the lessons and live sessions
  • A development environment for your practice Drupal site
  • Access to an online forum to ask questions of the instructor and discuss with other students

When is this class taught?

Class Start Date

You can start this class any time within 6 months of purchase.

Lesson Videos

This course includes detailed step-by-step lesson videos, available on-demand to watch on your own schedule. These videos are yours forever, so you can come back and watch them any time you need a refresher.

Live Webinars

In addition to the lesson videos you will be able to attend 2 weeks of optional live Q&A webinars with your instructor. In these sessions, you can ask questions, get help with troubleshooting issues, or dive deeper into any topics that interest you. Click here for a list of upcoming Q&A webinar times.

Online Development Environment

We will provide you with 3 weeks of access to an online development environment where you can follow along with the lesson videos without installing anything on your computer.