Important Skills to Teach Junior TYPO3 Developer

Anyone calling themselves a junior TYPO3 developer should know HTML and CSS, some basic PHP, and how TYPO3 works. That’s a given, and people who apply to our Junior vacancies already know these things.

In addition to the basics above, there are more things they need to know about TYPO3 Fundamentals

TYPO3 Fundamentals

Following are a must very basic skills to be able to start building a custom TYPO3 project from design files.

• HTML/CSS
• PHP
• JavaScript knowledge
• Object-Oriented Programming
• The Loop
• TYPO3 terminology (Template, Pages, Storage folder, Plugin, flex form, etc...)
• TYPO3 template hierarchy
• TYPO3 functions
• TYPO3 Admin navigation etc
• TYPO3 default features/functions
• TYPO3 default elements & default extensions
• TYPO3 Custom Content Element
• Default User Roles & Responsibilities

TYPO3 Frameworks, TYPO3 Extensions, & Libraries

Technically, if a developer has a good understanding of TYPO3 Fundamentals they can work on a custom TYPO3 project entirely from scratch. And it is recommended that all developers try that for at least one simple site in order to get a complete understanding of how TYPO3 works.

Well, here we have focused on custom TYPO3 development from design files, like Adobe XD, Photoshop, or Sketch files.

An experienced developer will most often understand the project by looking at the design files. For junior developers, however, there are several things they need to learn to read the web designs correctly. For example:

• Finding typography settings

Font family, font size, line height, paragraph spacing, bullet-list design, etc. all need to be set up correctly.

• Understanding heading hierarchy

Text isn’t only about styles, it’s also important to set headings to H1, H2, etc.

• Measuring the padding between elements.
• Proper exporting of assets from design programs to be used in the build.
• Identifying and working with layers to be able to distinguish images versus image effects.

Clients usually explain all design elements to the junior TYPO3 developer for the first few websites, but that is not always possible. This is why it is important that the developer write down any questions or clarifications regarding the design and clear them before the project planning stage.

After all design files and requirements are clear then the developer needs to actually sit down and code the website. For our developers the following knowledge is required to do so:

• Setup of an IDE (Integrated Development Environment) – 

We have used PHPStorm from the beginning with all our developers, but they can also use Sublime Text, Notepad++, or any basic text editor.

• Access and familiarity with the server the site is to be hosted – 

a local environment can also be used for the initial build. The junior developer must know the step-by-step instructions for setting up a local environment.

• Familiar with FTP/SFTP clients – 

in order to install TYPO3 and the required assets.

• MySQL 

for database management.

• Ability to implement TYPO3 fundamentals – 

to set up all the template files, register post types, adjust plugin settings and code The Loop to pull it all together in the right order to match the provided designs.

• CSS adjustments with correct media breakpoints – 

to ensure correct responsive behavior.

• Basic UNIX commands

To support multitasking and multi-user functionality. Knowledge of UNIX commands should be there. One should know the Unix commands for cases where a GUI is not available.

Being a developer it is important to double-check their work to make sure all requirements are covered with the best quality before delivery. The main areas that a junior developer should focus on are:

• Design/Layout review – 

does the website look the same as the design files?

• Functional recheck – 

reading all requirements and making sure that code updates in one place did not break something in another place.

• Responsive views are correct – 

checking with both browser development tools and real mobile devices when possible.

• Cross-browser check –

 any adjustments needed for Safari, Chrome, or the dreaded Internet Explorer?

Code formatted and commented in a clean way that others can review and understand.