Learning path: designer #

This path is for learners who will shape how sites built with Exponential look: designers, front-end developers and students of web design. You should know HTML and CSS. Finish the editor path first, so you know the content your designs will show.

The designers' own section of the help is large; this path picks the pages a learner needs first. The full map is Designers: start here.

Contents #

1. The steps
2. Rules to learn early
3. Going further
4. Where the path leads next

The steps #

Step 1: What a design is (1 hour) #

• Read: Designers: start here, What a design is.
• Practice: find the design of your study site's public siteaccess with php bin/php/console exp:ini where site/DesignSettings/SiteDesign site (Getting started).
• Check: where can a design live? (In design/ of the installation or in extension/<name>/design/<design>/, as Templates and design says.)

Step 2: The design cascade (1 hour) #

• Read: The design cascade, Templates and design section 1.
• Check: why do you never edit design/standard/templates/? (It is the fallback; you override it instead.)

Step 3: See which template wrote what (1 hour) #

• Read: Template path comments, Templates and design.
• Practice: switch the path comments on for your study site, find three templates in the page source, switch them off again.

Step 4: The pagelayout (1 hour) #

• Read: The pagelayout.
• Practice: find the pagelayout template of your design with the path comments.

Step 5: Templates and overrides (3 hours) #

• Read: Templates overview, Override basics, Learning the template language.
• Practice: project 3.

Step 6: Pages with blocks (2 hours) #

• Read: The layouts editor.
• Practice: project 4. Look at which block views your design offers in the block's Design tab.

Step 7: Themes as extensions (2 hours) #

• Read: Themes are extensions, A theme by hand, A theme with the RAD wizard.
• Practice: create a design extension with the wizard at /setup/designextension (Extensions), switch it on, and override one template in it.

Step 8: Accessibility and right to left (2 hours) #

• Read: the trainers' Theme design course, module 5, and Languages.
• Practice: check one page of your design with the keyboard only, and note what you cannot reach.

Rules to learn early #

• No inline CSS in administration templates. The administration designs keep all CSS in stylesheets, use shared components and tokens, and give every new token a dark-mode value; a test enforces it (Styling the administration).
• Escape what users type. wash on every value from content or visitors (Templates and design).
• Override, do not edit. Changes go in your own design or extension, so updates do not overwrite them.

Going further #

Where the path leads next #

• Study projects: 2, 3, 4, capstone.
• With a trainer: Theme design, 8 modules, about 24 hours.
• Next path: developer, when you want to write the PHP behind a design.

Related pages #

• Choosing a learning path
• Learning the template language
• Building a portfolio
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.