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
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
?

Your Class Session Details

Lesson Videos

Your lesson videos will be available starting December 6, 2023. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting January 3, 2024. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting January 17, 2024. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting January 31, 2024. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting February 14, 2024. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting February 28, 2024. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting March 13, 2024. You can start and stop the videos at your convenience, and use them as a reference forever!

Your lesson videos will be available starting March 27, 2024. You can start and stop the videos at your convenience, and use them as a reference forever!

Development Environment

Your practice development environment will be available from December 6, 2023 to January 2, 2024.

Your practice development environment will be available from January 3, 2024 to January 30, 2024.

Your practice development environment will be available from January 17, 2024 to February 13, 2024.

Your practice development environment will be available from January 31, 2024 to February 27, 2024.

Your practice development environment will be available from February 14, 2024 to March 12, 2024.

Your practice development environment will be available from February 28, 2024 to March 26, 2024.

Your practice development environment will be available from March 13, 2024 to April 9, 2024.

Your practice development environment will be available from March 27, 2024 to April 23, 2024.

Live Webinars

Webinars for this session are scheduled at the dates and times below. Don't worry. These webinars are strictly for questions and troubleshooting. They are not required to cover the lesson material, and you are not expected to attend them all. These webinars will also be recorded, so if you can't attend a webinar due to your time zone or other conflicts, you can submit your questions ahead of time and watch the answers on the recording.

Webinar Schedule
Date Time(s)
December 7 10:00am-11:00am EST
December 12 4:00pm-5:00pm EST
December 14 10:00am-11:00am EST
December 19 4:00pm-5:00pm EST
Date Time(s)
January 4 10:00am-11:00am EST
January 9 4:00pm-5:00pm EST
January 11 10:00am-11:00am EST
January 16 4:00pm-5:00pm EST
Date Time(s)
January 18 10:00am-11:00am EST
January 23 4:00pm-5:00pm EST
January 25 10:00am-11:00am EST
January 30 4:00pm-5:00pm EST
Date Time(s)
February 1 10:00am-11:00am EST
February 6 4:00pm-5:00pm EST
February 8 10:00am-11:00am EST
February 13 4:00pm-5:00pm EST
Date Time(s)
February 15 10:00am-11:00am EST
February 20 4:00pm-5:00pm EST
February 22 10:00am-11:00am EST
February 27 4:00pm-5:00pm EST
Date Time(s)
February 29 10:00am-11:00am EST
March 5 4:00pm-5:00pm EST
March 7 10:00am-11:00am EST
March 12 4:00pm-5:00pm EDT
Date Time(s)
March 14 10:00am-11:00am EDT
March 19 4:00pm-5:00pm EDT
March 21 10:00am-11:00am EDT
March 26 4:00pm-5:00pm EDT
Date Time(s)
March 28 10:00am-11:00am EDT
April 2 4:00pm-5:00pm EDT
April 4 10:00am-11:00am EDT
April 9 4:00pm-5:00pm EDT