To become a "professional front-end developer", you must first have the right mindset! Prepare to embrace the fact that things will change fast. Today's best-practices and paradigms will be tomorrows anti-patterns.
Second - learn the foundation of front-end development. This means you must dream in HTML, speak in CSS and think in JavaScript. Learn about HTML semantics, web accessibility and performance (performance is something I've ignored for a long time, but you shouldn't make my mistake!!). Learn CSS - selectors and properties, CSS3 animations and transitions, etc. After learning HTML and CSS, learn JavaScript. Don't jump straight to jQuery, React, AngularJS or any other library or framework. Learn Vanilla JavaScript! You will be surprised how easy learning new frameworks will became after that.
This is very important - your journey won't always be rainbows and flowers. You will have days, even weeks of total frustration and desperation! Don't give up! If you have difficult times - take a break, go outside, breathe, come back and try again. Repeat until you succeed.
Don't be afraid to ask. Not a single person is born knowing how to code. It's absolutely normal not to have the answers to your questions. Places like StackOverflow, Hashnode, Quora must become your best friends.
The best way to learn a new technology is to experiment and build something with it. If I had only three advises to gave you, they will be - build, build and build. No matter how much or from where you learn, it won't matter at all if you don't practice. Set up a Github account and start committing your projects. You will be amazed how addictive it can become ;)
Subscribe to daily and weekly newsletters. Read articles on medium. Read what people share on Twitter. Read Github issues. Read other people's code. Contribute to other people's code. Find a community to hang out (Hashnode for example). Blog about what you have learned. Enjoy the journey!!
After you have the strong foundation, you can start learning new libraries and frameworks. Choose whichever you like and learn it good. Don't abandon it after a week or two. You will see post like "Why we've ditched <framework X> for <framework Y>" or "Why <framework X> is better than <framework Y>" - don't blindly trust these kind of articles.
Also, things like CSS Pre-processors, Automatic Build tools, Script Bundlers, Unit-Testing, etc. will become intriguing topics. Experiment with them. Try them up. Use them in a project. Integrate them in an old project. You have the freedom to make whatever you like.
Although not particularly that advanced, you should have a working knowledge of responsive design and responsive design patterns. CSS Frameworks like Foundation, Bootstrap or Skeleton are some examples of what I mean. Learn how to use them or ever create one!
Never stop learning!