Steps to becoming a professional front-end developer

In 2016 I started learning front-end full-time and after six months I landed my first coding job. Now I help beginners get there even faster. I've put together this list of project-based learning resources to help that happen.

  1. Do Foundational HTML two times.
    1. First time: follow along by writing the exact same code as in the course.
    2. Second time: make Anki cards at the end of each lesson.
  2. Learn CSS basics. Unfortunately, I still haven't come across a resource that I would want to recommend.
  3. Do Practical JavaScript. I recommend doing this course three times in order to solidify JavaScript fundamentals. If you can, also try to go to office hours.
    1. First time: follow along by writing the exact same code as in the course.
    2. Second time: rename variables, annotate code with comments, and make Anki cards.
    3. Third time: build the todo app only by following the requirements.
  4. Extend the todo app you built in Practical JavaScript with following features:
    1. Replace "Toggle Completed" button and accompanying input element with "Toggle" button on each todo <li>. Use "Delete" button as an example.
    2. Add "Delete all" button that deletes all todos.
    3. Clicking "Add" button when the input is empty should not add a todo.
    4. Pressing Enter on input field should add a new todo.
    5. Add three counters before the todo list:
      1. Number of all todos
      2. Number of completed todos
      3. Number of uncompleted todos
    6. Replace parentheses with checkboxes. Clicking "Toggle" button on individual todo should toggle that todo's checkbox. Checkboxes should only be presentational i.e. user shouldn't be able to toggle them.
  5. Do Watch and Code Premium. Consider doing this course two or three times moving on to the next step.
  6. Start building personal project(s). Personal projects are the best way to put your coding skills into practice. If you decide to continue working on the todo app from Practical JavaScript, here are eight features in increasing order of complexity to get you started:
    1. Ability to filter todos: active, completed, or all.
    2. Hovering on todo should display "Created on" and "Last updated on" dates in a tooltip.
    3. Todos should be sortable by completion status.
    4. Todos should be searchable using an input field.
    5. Todos should support a deadline. Todos nearing deadline should be colored orange and todos past deadline should be colored red.
    6. Todos should be sortable by deadline date.
    7. The app should have two separate todo lists: one for personal todos and the other one for work-related stuff.
    8. Ability to create additional todo list.
    9. Ability to drag and drop todos, including between todo lists.
  7. Learn these 10 ES6 features. First four are necessary to make any sense of the official React tutorial (next step). The remaining six features are so common that practically every React project will be using them. You're after basic understanding of these new features. Don't go too deep with every possible use case. It shouldn't take you longer than 2 weeks to cover them all if you study daily.
    1. let and const
    2. Arrow functions
    3. String literals
    4. Classes
    5. Promises
    6. Rest/spread operator
    7. Object destructuring
    8. Default parameters
    9. Async/await
    10. Modules
  8. Learn React
    1. Start with plain React (ignore the new version of the article).
    2. Learn to implement forms in plain React.
    3. Learn to interact with the DOM in plain React.
    4. Get familiar with routing in plain React.
    5. Do official React tutorial.
    6. Read React todo app source code.
    7. Build your own React todo app. Use localStorage to persist the data even after the user closes the page. Here's a great article if you get stuck.
    8. Take a look at how a fully fledged React application is structured. This example app also uses Redux which you can ignore for the time being.

There is so much activity in front-end development - new libraries, frameworks, tools, etc. - that even experienced developers find it impossible to stay up-to-date. This list makes it easy to get started by ignoring all non-essentials. This is not a sprint, so beware JavaScript fatigue to avoid burnout.

You've completed the steps and are ready to apply for jobs? Head over to my tips on how to land that first coding job.

Updated 28 May, 2019