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.

The journey ahead

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.

Learn to Learn

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 ;)

Find your resources and use them

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!!

Advanced topics

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!

Final words

Never stop learning!

Resources

• Free Code Camp - an open source community that helps you learn to code (HTML, CSS, JavaScript, ReactJS, NodeJS, etc.)
• Mozilla Developer Network - tons of articles and docs about HTML, CSS, JavaScript, HTML5 APIs, Web APIs, etc.
• Google Web Fundamentals - a comprehensive resource for web development best practices, designed to help you add the right features and experiences to your web project.
• Web Accessibility In Mind - resources and articles about web accessibility
• Subscribe to newsletters like HTML5 Weekly, JavaScript Weekly, CSS Weekly, Responsive Design Weekly.

Hey buddy!

From your question, I assume you have a little knowledge about HTML, JavaScript and jQuery. The key to be a successful web developer is to practise and read a lot.

• Follow a couple of popular web development blogs. Eg. Smashing Magazine, A List Apart
• Do small freelancing projects. Use Freelancer.
• Check out popular CodePens and try to understand how they are made.
• Stay updated with latest web development news and updates. Hashnode is one of the best places to be.
• If you want to be a frontend designer, understand the basics of CSS. Chris Coyier will help you with that through his blog CSS-Tricks
• If you like JavaScript, learn AngularJS/ReactJS and NodeJS.
• and follow some popular developers on Twitter.

Cheers! 🍻

You may take a look a freecodecamp.com.

Below is the headline from freecodecamp: "Learn to code and build projects for nonprofits. Build your full stack web development portfolio today."

Ok, first -- forget EVERYTHING you've learned from jQuery, and if you have the urge to use JavaScript BEFORE the page is working properly, punch yourself in the face.

Not joking. A front end should be accessible and graceful degrading, two things scripttardery simply do not provide.

Though I'm wondering how you could "know some JS and jQ" without a command of the HTML and CSS it should be operating upon. That's your key technologies to know, and what you have to learn inside, out, forwards, and backwards.

... and it means ACTUALLY understanding their purpose, WHY they are separate technologies that work together... and that means concepts like:

1) Semantic markup -- a sick euphemism for "using HTML properly" which is to say that you choose your tags based on what they MEAN (paragraphs for actual grammatical paragraphs, headings to indicate the start of sections and subsections, lists on short bullet points or selections, tables on tabular data) or WHY they would be used in a normal professionally written document (em for emphasis, strong for more emphasis, b for proper names or references, i for book titles when not cited, cite for when you're citing a source) and NOT what you ACTUALLY want them to look like. If you choose your tags based on their default appearance you are choosing ALL the wrong tags for ALL the wrong reasons. This also means that when you first write your markup, it should have no DIV or SPAN since they are non-semantic wrappers. You only add those when styling your content as hooks without saying in the markup what that style is. (combined with numbered headings, this is why HTML 5's <article>, <section>, <nav>, <header>, <footer> and so forth are pointless redundancies that serve no legitimate purpose HTML 4 Strict didn't already provide!)

2) Separation of presentation from content -- that means NOTHING in your markup (at least when possible... there are like two or three corner case exceptions) should be saying what things are going to look like. That means classes like "column-8" or "xs-wide" or "red" are RIGHT OUT. You say WHY it's a column, WHY it would be wide, or WHAT it is... NOT what you want it to look like. This is why garbage like bootstrap is some of the most mouth-breathing idiotic short-bus nonsense in existence. Good rule of thumb, if you use the style="" attribute in your markup, you are PROBABLY doing something wrong, if you use the <style> tag, you ARE doing something wrong!

Maintaining this separation lets you create different appearances for any past, present, or future media targets. It makes creating your semi-fluid elastic responsive layout (A good accessible layout should be all three) easier as you only have to manipulate your CSS, and also simplifies reskinning at a future time or even allowing users to choose from a list of possible appearances.

3) <ballmer impersonation>ACCESSIBILITY, ACCESSIBILITY, ACCESSIBILITY. ACCESSIBILITY, ACCESSIBILITY, ACCESSIBILITY. ACCESSIBILITY, ACCESSIBILITY, ACCESSIBILITY sigh, gasp, clasp heart like having a stroke</ballmer>

No joke. Learn about dynamic fonts (%/em) and why we're supposed to use them and not pixels. Learn about elastic layout based in EM and why we're supposed to use that instead of pixels. Learn about emissive colourspace, why most webfonts are inaccessible trash on flow text, learn about the different gylph rendering engines and their effect on legible colour contrasts. READ the WCAG and try to at least grasp what it's trying to tell you. Take a good deal of time and read the articles section on NNGroup since they're one of the few places dealing in "user experience" and "accessibility" that bothers taking the time to test on actual people instead of randomly pulling fashionable bullshit out of their backside...

4) Paint programs are not design tools. The ignorant fools dicking around in Photoshop under the DELUSION that they are "designers" are generally so ignorant of everything I just outlined above, they have little if any business "designing" a blasted thing for anyone! End of the day it doesn't matter how pretty the result; if the artsy crap is so slow nobody is waiting for the page to load, the colours and fonts compromise legibility for large swaths of the public, and the resulting code ends up filled with hacks and non-semantic markup because the artsy fartsy type who knows nothing about document writing just spent the day spanking it on their tablet... what good is it?

5) The unwritten rule of JavaScript: "If you can't make a fully functioning page without JavaScript FIRST, you likely have zero damned business adding scripting to it!"

It's part of what's called "progressive enhancement" -- you write semantic markup, you create all your styles for all the different possible media targets with CSS, then you enhance the functionality with JavaScript. If we're talking about websites as your front-end, if you can't make it at least deliver the page's actual content without scripting, you're doing something WRONG.

Admittedly, if you are talking crapplications built with web technologies, that's a different ballgame altogether since those universally tell users with accessibility needs or trust issues to go plow themselves!

There's a good deal to learn, and a LOT of bad advice out there, but hopefully this response will give you some things to ponder. Bottom line, learn HTML, learn CSS, learn accessibility.... without those, you've got no business working on anything front-end related.