You may face a challenge of teaching other people frontend engineering more than once in your career or in your company’s lifespan, be it a rapidly scaled team, mass-hiring, or your teammates who decided to pursue that next horizontal growth opportunity.

If you have multiple learners, the chances are high that you’ll have a diverse group lined up to enter the frontend world — a mix of last-year students, junior devs, and engineers with years of experience in other domains.

The frontend is a multi-tech discipline that is very different from classic backend techs, like Java. The trainees’ success comes with a number of steps. Firstly, they need to get fluent in HTML, CSS and JavaScript, and learn how the technologies interact with each other. They also need to understand the pros and cons of different approaches. For example, CSS and JS may be equally good at solving a problem, but particular downsides for the architecture or scalability may prevent using one of them. Once your learner feels comfortable with the core, they can dive into the depth of JavaScript’s asynchronous prototype-based programming paradigm that does the magic utilizing only one thread. Having the basics covered, we have just scratched the surface, as there’s a whole world of frontend ecosystem that evolves at an enormous pace. We have not touched the server side yet, with Node.js and other tools. There is a lot of tools and skills to learn (and thus to teach), and it’s overwhelming when you don’t know where to start and how to keep your trainee going. However, it is doable. You can start with the three methods that we have assembled after many trials and errors:

1. Define goals, not resources The frontend syllabus is usually quite obvious and there are many good learning sources out there. Yet, it is not easy to put together and maintain the universal list of recommended resources. Most people have their favorites — blog posts, videos, and courses that they believe to explain the material in a perfect way. However, the majority of those resources become obsolete in less than 6 months which is really fast. If only there was a way to keep these recommended items up to date… and there is one! Define only high-level goals — that list of things that a person should know by the end of a training phase, accompanied by the important topics that help navigate in that certain area — and a trainee will cope with finding matching material themselves (like, Google it). For example, these may be the goals for learning HTML.

2. Offer controlled practice Reading and watching does not guarantee understanding. Applying the acquired knowledge is crucial for learning. Prepare hands-on activities to help people verify their understanding on their own. Let’s say your trainees learned about the element positioning that may be handled via CSS layout modes (block, inline, table, and positioned), and a newer CSS Flexbox and CSS Grid layout modules. Have them apply their new knowledge in a near-to-the-fields challenge. For instance, ask them to implement a sticky header and footer with a two column layout using each of the techniques. It will take some time to complete the exercise, but the learner will get an insight of multiple CSS properties and will benefit from real-world experience in a safe learning environment.

3. Assign a mentor Last but not least, an essential part of learning is having feedback from the mentor. He or she can assist the learning process by asking questions that validate the understanding of the material, and, what’s more important, can identify the gaps in trainee’s knowledge, and help to fill them in.

These three ideas, among others, helped us to create a FED Training Kit that covers the first two aspects — setting goals and practice. We use this collection of learning materials for frontend developers (FEDs) to train people with different backgrounds and expertise.