I‘ll share with you some key points to improve your technical skills based on my experience as a front-end developer and some great references I've found on that. Btw, you may have already seen this front-end RoadMap created by Kamranahmedse. It's one of my favorite references.
Always remember: you need to practice a lot, instead of just reading the theory. And here are just a few tips you can use to find your own path, I mean, there is not just one way to achieve your successful career as a developer. Let's go?
This article is divided into 3 sections:
- What´s a front-end developer?
- PHASE 01 - Beginner Level
- PHASE 02 - Intermediate Level
- PHASE 03 - Advanced Level
From technical skills to the ability to plan their projects and communicate their ideas, front-end developers bridge the gap between a designer (who provides mockups and wireframes) and a back-end developer (who provides databases and servers).
By learning all the fundamental and basic concepts, you´ll be able to call yourself a front-end developer. At the end of this section, use this App Ideas Collection repository to create small projects focused on beginners in order to practice your new skills. Feel free to find other projects that you can also use as references and practice a lot.
Start by learning how internet works
Basic but very important things: HTTP, DNS and Domain Name need to be clear in your mind first of all. It is really important that you understand how the Internet works and how it interacts with browsers, because your work will be extremely related to these concepts. So don't skip this step.
The secret to becoming a great developer is always understand what you are making in each line of your code. And it´s one of the biggest problems when people start learning from frameworks instead of learning the basics first. Because when some problems show off, they have no idea about how to fix them.
So, be an expert on the fundamentals of these three languages before delving into any framework. The good news is that it will only take a few weeks to understand the basics and get things started. 🎉😁
There are a lot of ways to learn it. You can use free or payed platforms, such as:
- Front-end Developer Handbook 2019
- Free Code Camp
- Learn to Code: HTML and CSS
- Wes Bos courses
- Udemy courses
- Youtube Channels in General
- And more
Learn some basic design principles
It may be a controversial point because some front-end developers don´t believe they are able to learn design or some think that they don´t need design skills. But I have the following thought about it:
A front-end developer helps to bring to life concepts and ideas to improve user experience through the code. So, you should know basic design principles, but not necessarily be skilled in designing. Do you understand me?
You should be able to question the logic behind a UI and UX decision because you´ll probably have to work with designers. Or sometimes you´ll have to find solutions without designers in the day to day programming life.
What´s design principles?
“Design principles are fundamental pieces of advice for you to make easy-to-use, pleasurable designs.” - IDF
Some of important design principles I think every front-end developer needs to know:
- Gestalt: this is a set of psychology principles that focus on how human minds organize complex images when we perceive objects and how they help us to understand the world. We can use it to organize the content on the interfaces in order to create a pleasant aesthetic and something easy to understand.
- Don’t Make Me Think by Steve Krung: it´s not necessarily a design principle, but it's a great guide for user experience improvements in a very simple and accessible way.
- Visual Hierarchy: an important part of effective design is being able to guide users' eyes in order to help them find what they’re looking for easily.
- Emotional Design by Donald Norman: It's about understanding why people love (or hate) our products and services. One of my best readings.
- And there are many more design principles that you can learn over time.
Once the foundation of front-end development is solid in your mind, it's time to level up your skills and get ready to cover more opportunities in your career.
At the end of this section, don't forget to practice a lot. One tip is to create some projects and host them in your GitHub repository.
Learn tools, concepts and methods around front-end development
Building larger projects and working with different teams require you have more knowledge and skills than the basics. Below, you will see a list of technologies that front-end developers use in their professional routine.
- Version Control Systems: there is no doubt that every programmer should know Git and Github as they are the standard in terms of version control and code repository.
- Web Security Knowledge: learn at least the basics of HTTPS, Content Security Policy, CORS and OWASP Security Risk will increase a lot your knowledge about how the internet works.
- Package Managers: learn what´s npm and yarn and how to use them into your projects will give you much more power. 😎
- Write better CSS: the state of how to work with CSS is changing because of modern frameworks and CSS-in-JS, but it's important you learn about CSS Architecture like BEM (or OOCSS) and CSS Preprocessors (such as Sass and PostCSS). You´ll still use them for building simple websites.
- CSS Frameworks: Creating a responsive design from scratch for every project can be time-consuming. For this reason and because it's always important having good documentation about the code, CSS frameworks help us a lot. My suggestion is to play with Bootstrap, Material UI and Bulma frameworks. Just have fun building amazing interfaces and share them in your Github 👌.
Now it's time to become a great front-end developer and have lots of opportunities around the world. Here, you will be able to cover all trends in terms of front-end development - such as React Framework, Typescript, GraphQL, APIs with NodeJS, Mobile and Desktop applications ...
At this point, there are many things to learn and my advice is: stay calm. I know you want to learn everything quickly, but keep enjoying the journey. :)
Pick a modern JS framework
Now it’s time to get involved with certain frameworks. There are multiple options but one of the most famous web frameworks of these days is React (but you can also learn Angular or Vue).
“To infinity and beyond”.
Front-end development is huge and at the same time changing rapidly. Keep up to date with the latest tools and trends and try to learn things according to your professional interests or based on the project's requirements that you are working on.
Some things I find very interesting:
- Learn PWA (Progressive Web Apps)
- Master TypeScript
- Understand what´s GraphQL
- Play with GatsbyJS and NextJS
Some links to help you:
Here is a complete roadmap you can use as reference:
Don't be intimidated and, again: stay calm and enjoy the trip.
✨Get involved with open source projects and make sure that you practice a lot instead of just reading the theory. ✌
Thanks for reading this article so far and let me know if you have more tips about the fantastic journey to be a great front-end developer. 😍