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.
First time: follow along by writing the exact same code as in the course.
Second time: rename variables, annotate code with comments, and make Anki cards.
Third time: build the todo app only by following the requirements.
Replace "Toggle Completed" button and accompanying input element with "Toggle" button on each todo <li>. Use "Delete" button as an example.
Add "Delete all" button that deletes all todos.
Clicking "Add" button when the input is empty should not add a todo.
Pressing Enter on input field should add a new todo.
Add three counters before the todo list:
Number of all todos
Number of completed todos
Number of uncompleted todos
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.
Ability to filter todos: active, completed, or all.
Hovering on todo should display "Created on" and "Last updated on" dates in a tooltip.
Todos should be sortable by completion status.
Todos should be searchable using an input field.
Todos should support a deadline. Todos nearing deadline should be colored orange and todos past deadline should be colored red.
Todos should be sortable by deadline date.
The app should have two separate todo lists: one for personal todos and the other one for work-related stuff.
Ability to create additional todo list.
Ability to drag and drop todos, including between todo lists.
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.
let and const
Start with plain React (ignore the new version of the article).