How to teach your partner to be a front-end dev

I am a self-taught front-end developer with 6 years of experience. At some point, my wife wanted to change her professional activity and decided to also try herself as a front-end developer. Previously, she was engaged in marketing and setting up ad campaigns.
I will tell you our story, how I trained her from scratch to a confident junior dev and helped her quickly find a job. I hope our experience will be useful or will add motivation to someone.

Step 1 | Motivation

Before that, I often told her about what tasks I was working on, how I’ve solved them, and she was always interested in listening. The main thing here is to tell in the simplest possible language, not to load complex details and try to interest your student.
In addition to the fact that the front-end development itself seemed exciting and cool to her, to start creating interfaces at the initial stage it is not necessary to know high-level programming. It’s enough to be good at HTML, CSS and the basics of JS and how front-end frameworks work.
There are some people trying to build a career as a developer and immediately aim at high and difficult positions. For someone, this certainly works, but it takes much more time. In general, it helps to start at least from something, from a junior or adjacent position. This way you will get real practical experience, which is appreciated and usually gives more than doing something just for yourself for years.

Step 2 | Preparation and theory

It all starts with taking online courses, I can advise a few resources that we’ve used:

• Responsive Web Design - in the first place, of course, freeCodeCamp with an excellent (and updated!) course for learning the HTML and CSS base,
• JavaScript Algorithms and Data Structures - another great JavaScript base course.,
• Front End Development Libraries - here you can see the React basics and SASS for example,
• The Modern JavaScript Tutorial - an excellent JavaScript knowledge base with homework assignments to master the material,
• YouTube - I won't recommend specific channels, you can always find useful videos or courses in your language.

Along the way of learning, there always comes a moment when the student begins to get lost and upset by the volume of material. In this case, your support and help in understanding difficult moments will be very useful to him.
We all google every day, so the main goal of this stage is not to understand and learn everything, but to put into your brain as much information as possible about what exists in the world of the front-end, so later you can return to this material.
It is also helpful to show real examples that your student can already solve or at least think of options on how to deal with it.

Step 3 | Portfolio and practice

After studying the theory and a little practice along the courses, I’ve explained to her more difficult points about the development and its ecosystem:

• Node.js, npm/yarn, gulp, webpack - how to run and build a project,
• Git, GitHub, GitLab, Bitbucket - version control system,
• The structure of a standard project, how to write clean and efficient code.

Usually this all seems very complicated and incomprehensible to a beginner, but the main thing is to understand what and why they do, details can be dealt with later along the way. These tools exist to make life easier for the developer, not to complicate it (but we all know the sad truth).

There are plenty of easy and free design templates available online to build a portfolio, I also have some from past projects that are good for learning. We started with one simple responsive page (originally it was an email letter layout), we did it together, analyzing each step and pitfalls in detail. Then there was a landing page layout with a complex structure and animations, which she did almost herself, addressing only tricky questions.

I am strongly convinced that every front-end developer should have an excellent knowledge of vanilla HTML, CSS and JS, and only then move on to frameworks. Therefore, the third, “graduation” project was a multi-page e-commerce layout using only vanilla JS. It was a completely independent work, which, although it took more than a month, was very useful. I only helped with code reviews every few days.

Finally, we made a small SPA React-app using TypeScript and styled-components to understand the modern React ecosystem. When you already know the base at the proper level, it becomes much clearer why and for what exactly you need React or TypeScript.

Step 4 | Finding a Job

After almost six months of training, we made a resume and began to slowly look for suitable offers. After several interviews, she got a job at a cool fintech project as a junior front-end developer. She was distinguished among the other candidates by her knowledge of best dev practices, which we disassembled and used together. Now she still works there, but already as a middle React dev and continues to learn every day.

Сonclusion

It helped a lot to have a mentor who not only walked the same path before, but was also really interested in success. My advice and help greatly accelerated the process. It was also very useful for me, in order to explain something (especially in a simple way) you need to know it perfectly. Now we share our knowledge with each other, which is also great.
Therefore, I would like to wish all beginners good luck, patience and... make your partner your mentor 😆