I am posting this for those who are just getting started with frontend development. If you are new to coding, it could be better for you to learn a low level programming language first to have a deeper understanding of algorithms and computers. In this post however, I'll be giving a roadmap for frontend newbies. Of course this isn't the only way, but I wanted to share the way I know with you in the style of a questionnaire. So, let's get started!
Should I start with React, or Vue, or Angular?
None. Of. Them. I understand that React, Vue, Angular and TikTok are too darn popular at the moment, but if you want to be good at any of them, you’ll need to have a good grasp on JavaScript. Those frameworks are built on top of JavaScript, not the other way around. Start with learning frontend, not with learning frameworks, and please don’t use TikTok.
Where should I start learning frontend?
Start with basics. In frontend web development, you’ll be using different technologies in the same environment. It is for your best to thoroughly learn every one of them. The first thing you should learn is HTML. Then learn CSS for styling, and after that advance your skills in JavaScript. When you are comfortable with coding in HTML, CSS and JavaScript combined, you’ll have the fundamentals for building complex interfaces like a ninja, regardless of which framework you use.
<h1>Hello world!</h1>, am I set?
Umm, kinda. HTML is relatively easy, but you should understand things like inputs, forms, lists, tables and metatags. Experiment, don’t skip them just because they look easy. As I stated before, in frontend you’ll be using several technologies at the same time. You can never know which one will save you time in a random challenging situation.
This CSS boi is tricky.
Yes it is. Let's remember the legend:
When you first start writing CSS, it'll always has its own mind. Don’t let it intimidate you. As you practice more, you’ll realise it's fun to work with (IE developers might disagree). Remember; CSS is what users see, and every now and then it's what they experience. Learn it properly.
I’ll give some keywords that are crucial for you to research and study:
- Viewport
- EM and REM Units
- Responsive Design
- Flexbox
- CSS Grid, FR Unit
- CSS Variables
Tip: Use caniuse.com to determine which CSS or HTML features you can start using today. Not every browser support every feature or API.
What about Bootstrap?
Fuck it. Using Bootstrap too early will make you lazy and uncompetitive in the field. Once you learn CSS thoroughly, you can always create your own structures for styling.
I wanna dive into JavaScript.
Sure. But don’t dive too deep. Best way to learn JavaScript is to learn JavaScript. Not JQuery, not React, not Vue, not… Well, you got the point. JavaScript is an old pal, and it came a long way since its creation. Make sure your learning material covers the latest goodies. For mastering modern JavaScript; learn ES6 features and search what ECMAScript means.
Tip: Move from var to const and let.
Tip: Don't forget to look into async/await.
Wait... What about JQuery?
Fuck it too. Using JQuery too early will make you lazy and uncompetitive in the field. Once you learn JavaScript thoroughly, you will never need JQuery. And yes those sentences were copypasta from above, beacuse I used JQuery in the past and got lazy. You see it now?
Tip: What year is this?! Don’t use JQuery for a new project.
Should I know anything else before getting into a framework?
Yes dear reader. Here’s a list:
- CSS Preprocessors
- NPM
- Babel
- Webpack
You can learn a CSS preprocessor like SASS to give CSS superpowers. Also search for other items on the list to understand how today’s frameworks work. Try to create a webpack project with them for a deeper understanding.
Big question: Which one should I choose; React, Vue, or Angular?
React. Contrary to what you think, this answer is actually unopinionated. The reason why I’m giving you an one-word answer is purely because React is more common. And more importantly; choosing between them will kill you from the inside unless you start learning one of them.
Sure you can choose Vue for a different approach, or choose Angular for a reason only god knows why (well, that was opinionated). But the main point is no one is keeping you from learning all of them. Just don't waste your time and energy for choosing between them.
Also, when you got started, pay attention to state management. Learn Redux, Context API, Vuex, or other central state management tools depending on which framework you work on.
Tip: Next, Nuxt and Gatsby are great tools for eliminating the cons of clientside rendering and SPAs in genenal. If you don’t know what I mean, it's perfectly okay. Keep those tools in mind, and do your research.
What's next?
As a frontend developer, you should learn more about UI and UX. You are in a very critical position where user interacts with the app through you. Good knowledge in UX will carry you further in creating interfaces that users will love. Also, learn more about colors, typography, and negative space.
Definitely look into testing and TypeScript too. Other than that, I honestly don’t know. Once you taste the feeling of building things that people can interact with, trust me, you'll know what you’ll do next.
Tip: Look into tools like Jest for testing.
Dude, what?! There is so much to learn!
Do not rush it, take your time. Don’t jump from one thing to another, stay on course. Having good fundementals on core technologies is the key. Learn the basics, and more will follow. Don’t overload yourself with the idea of “learning everything”. You can’t, and you absolutely don’t need to.
What kind of a roadmap is this? You didn’t even explain most of the things you mentioned?
Probably not the best kind, but this is the point. There are way too experienced and way too knowledgeable people than me. Search Egghead.io, search YouTube, search Twitter. Find them and learn from them. Make a habbit of Googling everything. In this profession you choose, you should always be searching, and learning. With this post, I'm just trying to light the way for newcomers, and give them a starting point.
I hope this was useful, you can also follow me on Twitter for future content:
Oldest comments (0)