CourseFlix

Full introduction to Drupal 8 theming in easy steps

5h 49m 59s
English
Paid

Learn how to shape the front end of a Drupal 8 site with clear steps and simple examples. You will see how themes work, how templates shape markup, and how Twig fits into the system. This guide uses short lessons to help you build skill through real code.

Why Drupal 8 Theming Feels Different

Drupal 8 sits on the Symfony framework. This changes how parts of the system work. You also work with lessons learned from Drupal 7. The result is a theme layer that uses cleaner code and a clear file structure.

You work with Twig templates, objects, and classes. Much of the markup now lives in template files. This may feel new at first, but the rules stay simple once you see them in action.

How This Course Helps You

The course keeps each idea short and clear. You test each idea with a small example. When you try the code yourself, you learn how the theme layer responds. This gives you a base to explore deeper parts of the system on your own.

You also work on a small sample site. You turn a static HTML and CSS layout into a working Drupal 8 theme. This shows you the real steps of a theme build from start to finish.

Requirements

  • Basic HTML and CSS
  • A small amount of PHP

Who This Course Is For

  • New Drupal 8 users who want to start theming
  • Drupal 7 developers who want to learn the new theme system
  • Site owners who want to change the look of a Drupal 8 site
  • Developers who want a clear view of the theming workflow

What You Will Learn

  • What Drupal 8 themes are
  • How template files work
  • How to change markup in a Drupal 8 site
  • How to add CSS and JavaScript files
  • How preprocess functions shape data for templates
  • The core ideas behind the Twig template engine
  • How to build a Drupal 8 theme from scratch

About the Author: udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 55 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 55 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction to me
All Course Lessons (55)
#Lesson TitleDurationAccess
1
Introduction to me Demo
00:32
2
Introduction to the course
02:02
3
Preparing our working environment
07:29
4
What is a theme
00:48
5
Themes inside of Drupal
04:41
6
Development settings and cache clearing
03:38
7
Base themes
02:27
8
Start with our theme
03:31
9
Asset libraries
01:16
10
Adding our CSS files
03:27
11
Add our JS
03:01
12
Template files - where they are and how to overwrite them
03:06
13
Adding our markup in the template files
05:04
14
Debugging templates with kint
07:33
15
Drupal view modes
06:23
16
Node templates
12:45
17
Page and html templates
06:00
18
Regions
06:07
19
Views and overwriting views templates
12:54
20
Add and change variables with preprocess functions
07:54
21
Render API
04:09
22
Why Twig
00:42
23
Quick twig
01:21
24
Twig Print variable
02:03
25
Twig for loop
03:39
26
Twig if
02:55
27
Twig filters and functions
02:15
28
Twig attributes in drupal
01:55
29
Extending templates
06:43
30
Links to other pages in the site
03:15
31
Translatable strings
01:31
32
Simple website example overview
03:24
33
Preparing the new theme
07:27
34
Implementing the html and page wrapper
11:02
35
Subproject - Fixing the branding of the site
08:41
36
Implementing the main menu
10:13
37
Implementing the main content at frontpage
10:13
38
How you may continue to improve in Drupal 8 theming
05:59
39
Chrome twig extention
04:25
40
Removing and overwriting CSS files
10:03
41
1. Getting Started And Overview
02:46
42
2. Install Acquia Dev Desktop - Our Working Environment
04:16
43
3. Installing Drupal 8 with Acquia Dev Desktop
04:47
44
4. Declaring our Theme - Adding a Screenshot
05:22
45
5. Declaring our library - adding CSS and JS files to our theme
05:11
46
6. Activating some debugging settings
10:57
47
7. Overwriting template files in our theme
06:46
48
8. Implementing the main menu region
31:41
49
9. Theming our footer
12:43
50
10. Creating the fields in the Node and the Paragraph
13:51
51
11. Theming the node - top area and fields
19:06
52
12. Theming the first paragraph
09:01
53
13. Image paragraph
08:01
54
14. Text paragraph
05:17
55
15. Creating some example pages and wrapping up
07:41
Unlock unlimited learning

Get instant access to all 54 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription