Hi, I’m Ulyana, a self-taught front-end developer switching careers from a real estate analyst to tech. In August 2020 I was offered a job after only two weeks of interviewing. After sharing this awesome news with the Twitter #100DaysOfCode community a lot of people asked about my learning process, so I decided to make a post about it.

While reading this do not try to compare me with yourself, the only reason I’m doing this is to share resources I used, to describe my learning routine, and to tell my story which may be motivating for you. I had a unique opportunity not to work for more than a year and spent as much time on learning as I wanted to. Also, the job market varies very much depending on the location. I live in Moscow where a developing, less competitive market gives lots of career opportunities even for newcomers. So I believe being able to find a job in this short period is more about the market than about my skill set and knowledge.

How Did I Start?

In 2018 I moved to China because of my husband’s work. I had to quit my job as a real estate analyst in Moscow and became a housewife in Shenzhen. Having constantly worked for 8 years since my university graduation, I never had an opportunity to rethink my career path. Suddenly, given tons of free time, I started to consider different options.

In Spring 2019 I spent some time back in Moscow with my family and my Mum told me that she is doing an online course about personal finance and investing. Returning to China I thought if even my Mum is doing online courses why am I still so skeptical about online education? I had already been thinking about the tech industry but had no idea how to start and what programming language should I learn.

Luckily I remembered that some time ago I bookmarked an article on how to become a web developer from scratch. I’ve read it several times. I liked that it provided a step-by-step 5-month plan with free(!) online resources. Something inside me clicked and I decided to give it a shot. Thanks to Andrei Neagoie for sharing this roadmap. No kidding! It changed my life! To be completely honest it took me 10 months to complete this program.

Deep Work

Basically, at the same time I decided to learn web development I was finishing a brilliant book "Deep Work" by Cal Newport. I strongly recommend it to everybody, because it made me rethink my approach to work, to care about the time I spend on tasks, and how focused I am.

By Newport’s definition, deep work refers to:

“Professional activity performed in a state of distraction-free concentration that pushes your cognitive capabilities to their limit. These efforts create new value, improve your skill, and are hard to replicate.”

The most practical things I started to do after reading this book are planning time for deep work in advance and tracking the hours I spend on learning and projects.

To organize my day I started to divide it into time blocks and plan on the day before how many hours I'm going to spend on each block. It looks pretty scary and I don’t do this anymore but in the beginning, it helped me develop a habit of spending sufficient time on learning.

Another thing that helped me was tracking deep work hours to estimate how productive I am; by comparing weeks and marking achievements reached. I used a simple excel table, but any other convenient way works as well. By using different colors I mark hours spent on different tasks such as projects, freeCodeCamp, tutorials, etc.

A 5-month Plan Which Became a 10-month Plan

So from May’19, I started following Andrei Neagoie's 5-month guide. All the resources you can find in the updated 2020 version. In this post, I want to focus on the most important things for me.

At the beginning of each month, I looked through all the provided materials and tried to estimate the approximate time I’ll spend on each task. As you can see I'm a big fan of excel tables so I did another one :) After finishing each tutorial I used a time tracker and kept track of real-time I’ve spent. It helped me to divide very big goals into small parts, to plan the next month, mark visually what I’ve already learned, and most importantly gave me satisfaction from a small achieved result.

Fundamentals

The first month is focused on how the Internet works, HTML and CSS, and computer science basics. The absolute highlights for me were:

• Harvard’s CS50's Introduction to Computer Science. Andrei recommends the 2017 edition and to listen to lectures only, I followed his advice, but now thinking about doing a full course on EdX.
• When I started I knew only a bit of HTML, with this course by Dani Krossing I learned how HTML and CSS work together and even built the first version of my portfolio.

JavaScript

From the second month, the actual fun began, I started to learn JavaScript! Immediately some memories from school computer classes were evoked and I had flashbacks of when we learned Visual Basic and Pascal as kids (yes I’m that old).

The main resource of this month was https://javascript.info/. It took me around 2 months to read the whole tutorial and to solve the challenges. It has rather in-depth explanations that formed the fundamentals of my understanding of the language. Even while reading it for the first time I hardly understood 50% of this theory. I still come back to it and sure will in the future to review some of the concepts. I know what writing notes by hand is not for everyone but it really helped me to understand, structure, and remember information and I still use these notes every day.

This tutorial is divided into two parts The JavaScript language and Browser: Document, Events, Interfaces. I’ve read them both and strongly recommend to do the same, some parts will be very hard, others less, just don’t spend too much time on the stuff you struggle to understand, form a big picture and keep going. I tried to solve all the challenges after each chapter, some of them are difficult so I checked the solutions and tried to solve it again the next day by myself.

more JavaScript

In the 2019 edition of the 5-month plan Andrei recommended his own Udemy course JavaScript: The Advanced Concepts, he removed it from the 2020 version maybe because it’s a bit early to dive deeper into hard parts of JavaScript or maybe because it was the only paid course from the whole program. But I did it and enjoyed it actually, it helped me to understand the event loop, closures, type coercion, hoisting, ‘this’ keyword, and functional vs object-oriented programming.

At this point, I also decided to add a freeCodeCamp curriculum into my learning process. I started with JavaScript Algorithms and Data Structures. After reading the whole javascript.info it took me only 50 hours instead of declared 300 hours to solve tasks and final 5 projects of the algorithms section. If you are doing the freeCodeCamp algorithms and struggling with it I strongly recommend finding a suitable for you in-depth tutorial on strings and arrays methods and after reading it try to implement your new knowledge with freeCodeCamp challenges.

By the end of 2019, I kind of had an understanding of what JavaScript is capable of. I was able to solve basic string and array problems. I knew how to make a webpage with HTML and CSS but wasn’t sure how to use all that knowledge in building projects, even a very small one. I knew about DOM manipulation but it felt very complicated and not intuitive. If you follow any JS tutorial makers, influencers, motivational speakers, they all tell you that you should “escape tutorial hell and start making PROJECTS”. I was completely lost on that part and started to make something by myself only with React. Don’t be like me! I haven’t done this yet but plan to do a #JavaScript30 challenge by Wes Bos to improve my vanilla JS skills.

React

At the beginning of 2020, several very important things happened: I started learning React, started the #100DaysofCode twitter challenge and the COVID pandemic hit China by the end of January.

The next big section was all about React. Setting the development environment was a little bit of a struggle for me, none of the courses available in this section could provide step-by-step guidance for me, huge help was this beginner React youtube tutorial by Mosh Hamedani. After it, I discovered an awesome beginner guide by Bob Ziroll on Scrimba. After finishing this tutorial I started to feel that I can make something by myself not just by following the instructions. That was an amazing feeling and I think that’s the best evidence of the teacher's talent. Thanks to Bob for this. Later I discovered that this tutorial was included in the 2020 updated 5-month plan edition.

So I started with a small project to practice using useEffect hook and by saying small I mean really small! This color-app renders 4 identical components with a random colored circle and calculates the complementary color for its background. Deploying something online for the first time can't be forgotten, I still remember the gif I used to tell Twitter that I have the first GitHub pages deployment :D

Another thing I strongly suggest is to start #100DaysofCode as early as you discover it. If you've never heard about it, it is a challenge to code for at least one hour a day and to tweet about your progress daily. I started this challenge only when I started to learn React, by that time I was coding for six months for more than 3 hours a day but felt very isolated in my journey and only could tell about my struggles and little victories to my husband! Huge thanks to him for listening to me and always supporting me! But having a community of people learning the same thing as you are and probably facing the same problems was a game-changer for me. Twitter #100DaysofCode community is a great source of inspiration and motivation for me and it could be for you as well!

By this time we started to get horrible news from Wuhan about 'the new virus'. Normally at this time, almost everything in Shenzhen is closed anyway because of Chinese New Year, this year it lasted not only for a few days but for more than a month. There was no official lockdown but everyone tried to stay at home as much as possible. So it was a great opportunity to stay focused on learning, but I strongly believe that if I didn’t have that learning habit by that time it would be very hard to concentrate on something meaningful with all that bad news flowing in, and holding that feeling of uncertainty. I tried to stay focused and positive, and coding helped me a lot.

The next project was a Random Recipe Generator I made to practice fetching data from an API. It was inspired by one of Florin Pop's 100 Days - 100 Projects challenges. If you need a project idea I recommend checking this list. Later I added some additional functionality. You can check the final version of Recipe Generator here.

After learning the basics of React I decided to go along with the freeCodeCamp curriculum again, quickly got the first Responsive Web Design Certificate, and moved on to the Front End Libraries section. After reviewing React concepts I started building projects, to get this certificate you have to make 5 projects and pass all auto-tests, the Calculator and the Pomodoro clock were the hardest for me, building the Drum machine I enjoyed the most.

Backend

The final part of the program covered a little bit of the backend, I learned how to build RESTful API and use MongoDB and Firebase. To make things work I had to follow additional tutorials like this by Dev Ed and this by Nick Karnik.

I had an idea of adding authentication to the Recipe Generator project to allow users to add recipes to favorites. To understand how to add Firebase Auth I followed this great tutorial by The Net Ninja. Since that time I followed tutorials mostly for specific project ideas and features.

After upgrading Recipe Generator I came back to freeCodeCamp and got APIs and Microservices Certification.

So by March 2020, I had finished a 5-month plan in 10 months, adding 4 freeCodeCamp certificates, additional tutorials, a couple of small projects, and 2 larger projects relatively ready for adding to my portfolio. To be honest, I felt very lost without having any more guidance, so decided that I need a strict future learning plan made by myself.

Interview Preps, Big Project Idea, and a Portfolio

The main reason I was learning front-end was to get a job. At first, I planned to find a remote position, later we decided to come back to Russia and I understood that by the summer I should be ready for interviews.

I searched for junior developer positions in Moscow and was very demotivated, the amount of stuff they expected me to know was unbelievable. I started to write out things that occurred more often than others like data structures, BEM class notation, CSS preprocessors like Sass and Less, CSS-animations/GSAP, Redux, TypeScript, Webpack, design tools like Figma or Sketch. I divided this into blocks and tried to plan how I can learn all of that stuff:

• Data Structures and Algorithms,
• Technical interview questions,
• Design and CSS
• Portfolio,
• Advanced React

Data structures and Algorithms

I decided to start reading the book Cracking Coding Interview by Gayle Laakmann McDowell to cover data structures and algorithms. This book provides very limited theory and a lot of challenges with solutions. I was able to figure out the first chapters on Arrays and Strings, Linked Lists, Stacks and Queues, was completely lost with Trees and Graphs, and decided to come back to it later. I made a GitHub repo with tasks and my solutions, check it out if you are doing these challenges as well.

Although I think I went the most difficult way, this book is for more experienced developers or at least for those who had a formal CS education. Also, it uses Java language, I had to figure out how to implement the examples in JS. Maybe it is better to start with an Algorithm and Data Structures JavaScript course, of which there are tons on Udemy.

Another great way to practice algorithms is by using platforms like Codewars, adding gamification to the learning process. I have 5 kyu now and challenges are already very hard for me. Master Algorithm and Data Structures is one of the key priorities for me now.

Technical interview questions

The main resource for me for this was this popular GitHub repo with sets of interview questions on HTML, CSS, JS, and other topics. I made a simple google doc with answers on these topics and reviewed it before interviews. I had a couple of technical interviews with only questions from these lists. So highly recommend checking this out!
And as a bonus another great list of tricky, mostly advanced JS questions.

CSS and Design tools

At that point, my knowledge of CSS was limited to the freeCodeCamp Responsive Web Design section. To learn more, I decided to take an Advanced CSS and Sass course by the brilliant Jonas Schmedtmann because I’ve seen some great feedback about this course on Twitter and it was a perfect choice for me. I started to use BEM class notation, CSS preprocessor, learned a ton of cool CSS tricks, animation techniques, and got many ideas for my portfolio.

I’ve seen a lot of job listings with requirements of knowing Figma, Sketch, or Photoshop, so to have just a basic general understanding of what it is I started one of my projects with prototyping design in Figma. It helped me a lot to understand what design consistency is and how having just a basic design system for myself improved the general feeling of the final result which I’ll show you later!

Portfolio

Without having any professional experience I understood that my portfolio should represent all the skills I got, should be well designed, and be catchy.

Once I read that it is better to include a few bigger projects than a lot of small apps I decided that each of the projects I include in the portfolio should be specialized into some skill set.

So I picked Recipe Generator to show basic knowledge of React and the ability to fetch data from an API.

Also by that time I got an API and Microservices certificate from freeCodeCamp, packed all 5 final projects into one to show the basic knowledge of Node, Express, and MongoDB.
But I also realized that I need something more sophisticated. So I decided to build a music database, something like Discogs, with React and Firebase. I remember that I planned to spend one week on this project but I enjoyed building it so much so in the end, it took more than a month of my time. But I learned a lot! I designed it all by myself, did not follow any tutorial, only searched for specific information depending on the issue I had, and even now I like the result.

To get some inspiration for the portfolio itself I made quick research of web agencies websites. One that particularly blew my mind was https://www.metalab.co/, I liked image transitions on links hover and implemented that by myself for my portfolio's main page with the project list.
I decided to make a page for each project to describe in-depth what technologies I used and what I’ve learned. I remember the day I bought the domain name: it was pure excitement and happiness, and that feeling alone was worth all the effort. Here it is ulya.dev.

Resume, Сover Letter, And Coach

In June ’20 my husband, our cat, and I managed to move to another country during the pandemic and return to Moscow. I was a little bit afraid that coming back to our previous life will make me come back to the things I used to do and I’ll be less motivated in learning frontend and finding a job in that field. So I decided that it was crucial not to waste time, and to start the interview process as soon as possible. So once we arrived and were forced to be on a 2-week strict quarantine at home, between cleaning the house, unpackaging stuff I determined a special time to finish the portfolio and prepare a resume.

Writing a resume in switching careers is tricky. After reading numerous articles on that subject I picked several key issues:

• even if you don’t have professional experience in a new field you should focus on projects you’ve built during your studies, pick the skills essential for each job listing, and show projects made with these technologies

• you still need to give a person who reads your resume an understanding of what your background is, so I mentioned 3 last jobs I had and described them as short as possible just to give the general idea of my skills

• if you switching careers don’t be afraid to have a slightly different structure of the resume than usual
  The structure I came to:

  • Skills and accomplishments: where I represent projects proving my frontend, backend, and visual design skills
  • experience: at first I describe the period when I didn’t work and why I started to learn frontend and after the usual listing of the previous jobs
  • technical skills: the technologies I use
  • further education: the main courses I took to learn frontend (I’ve put this part before formal education because it’s more relevant)
  • formal education
  • interests.

If some of your friends work in tech, I strongly recommend having a chat with them and showing your resume, and asking for their opinion. I didn’t have anyone to ask but I’ve found another approach.

An essential part of the interview preparation for me was an awesome unexpected coach session with an HR expert experienced in the IT Moscow market. I did also found a blog catwomenko.ru (unfortunately available only in Russian) and was so impressed by the content about writing resumes, job searching, and the work process itself in tech, that I decided to send the author a message. I’m not a person who easily reaches out to unknown people, but I decided to do it. I had a very limited understanding of finding jobs in this new market for me, and the author seemed to be the right person. She gave me a very detailed review of my resume, pointed out what issues I should focus on presenting myself, and reviewed a couple of cover letters I wrote for the particular job listings. But most importantly she assured me that I was ready for a junior position.

Conclusion

As I said in the beginning it didn't take me too long to find a job, I had 3 rejections after the interviews, and a dozen companies rejected my CV. I didn’t perform perfectly at the interview with the company I work for now, but they saw potential in me and seemed to be happy with their choice. It took me more than a year to be where I want to be and it's still only the beginning. Thank you for reading that far, and I hope my story helped you in some way with your journey! Wishing you lots of luck and an unstoppable desire for learning.