Hello, users! 👋

Today I wanted to share with you some advice on How to become a Frontend Developer.

I wrote this because I've been asked frequently things like: "How can I become a Frontend Developer?", "When will I know if I'm ready or not to apply for a job?", "What should I learn?"...

And I thought I had to answer those questions publicly.

Before you start reading let me tell you: I'm just a designer who codes, but I have enough experience and I understand the industry needs, so here you have my advice on How to be Front.

This article was published in Spanish here.

🖐 Before we get started... What does actually mean to be a Front Dev?

If you've been around for a while you probably know each professional says a different thing.

Some people say design is not a part of Frontend area, not even semantic languages as HTML... They kind of customize their role.

I want to share with you the definition I think, by my experience, that suits a Frontend Developer: A professional who is familiar with semantic languages (HTML), styling languages (CSS) and web programming languages (JavaScript, PHP, Python), and is able to create a functional page.

The Frontend role must not be mistaken with other roles like Web designer, UX designer, or Graphic Designer.

📍 You start here: the 3 'ends' of Frontend

There are 3 languages you shall totally be familiar with if you're willing to join the Frontend Devs Fight Club, listed below these lines:

➜ HTML: Literally, every page you visit on the internet its been built with this language. The Internet's basically about HTML. It makes a webpage be a webpage. (And for those claiming "HTML isn't a language..." WELL, then what does the L in HTML stands for then?!).

➜ CSS: This language is the one building those fancy-really-colorful-amazing interfaces you're madly in love with. It's a VIL (very important language) here, you must TOTALLY understand how to use it.

➜ JavaScript: This guy makes the page and the interface work. Its the language you'll be building your web's functionality with.

🤔 I've heard about React? Angular, Vue... Which one should I choose?

I hear this question all the time in my mentorships. "I've seen x it's been asked a lot in job offers... Should I learn it?".

The answer is: it depends. Are you really good and familiar with HTML, CSS, and JS? Then go for it. You aren't? Stay way.

Either way, if you want to focus in Frontend I suggest you go learn Vuejs since it's a framework focused on the interface building (which is, pretty much, your job as a frontend).

🎨 How do I build my Frontend Portfolio?

Now, that's another really common question.

I've heard a lot of things like "your portfolio shouldn't be a sticker collection"... Now, WHY NOT? Painters don't organize expositions about their failures, but about their amazing drawings and pictures. Go ahead buddy, show 'em what you know.

On another hand, I suggest you to focus not only in your portfolio but also in your social media. I understand you'd like to remain "anon" but online presence has its benefits. Now, you don't have to write 100/posts a month, or have 50k followers, you could just follow and interact with those who inspire you, those who you admire and share their content.

Some of the benefits of having online presence are — ➀ people will know about you and your work faster than sending 55 CV's a day, — ➁ you'll meet people from inside the industry who are able to give you help and feedback, — ➂ you can help others, too!

You can build online presence around Twitter, Dev.to, or Medium, for example.

✅ The Frontend checklist

Another question I've been asked a lot is "How will I know if I'm ready to apply for jobs?"... So I created a very simple checklist so you know where you must work harder and what skills you already master:

❒ You're familiar HTML, CSS and JS at an advanced level.
❒ You're familiar and have experience with external JavaScript libraries. (Momentjs, Chartjs).
❒ You're familiar and have experience with CSS Frameworks. (Bulma, Bootstrap, Foundation, Materialize).
❒ You have experience with CSS Grid and Flexbox.
❒ You have experience with API's.
❒ You have experience with JSON's.
❒ You can connect an API to an interface.
❒ You have minimum experience with databases.
❒ You know how to deploy a web application. (For example via Heroku, Netlify or GitHub Pages).
❒ You're familiar with JS Frameworks. (Vue, React, Angular).
❒ You're familiar or have experience with authentication. (JWT).

You don't have to become a ninja-master-pro-jedi, you just need to be familiar/experienced with those techs listed above. Remember that you won't get the "professional experience" until you face a real project with a real client.

🕐 Some tools that may save you time

I wanted to share with you the most useful tools I use to organize my job and projects:

➜ Notion: To take notes and document all my learning and projects.
➜ Miro: To create useful flows and schemas.
➜ GitHub: All my projects are here, literally.
➜ Netlify: I deploy all my projects with this platform since I don't usually have a backend. If you do, use Heroku instead.

🌼 Last but not least

To end this post I'd like to share some useful advice that helped me develop my career up until now.

📌 If you want to test and learn new techs, don't learn all of them at once and in the same test project. Go one by one, make sure you're familiar enough with the current one to get started with the next.

📌 The sentence "this tech is better than that one" it's a lie, like the cake. There are newer and older techs and they all work and get the job done. The difference's about how they work and how simplified they are.

📌 Reuse. You don't have to create your projects over and over again.

📌 Comment your code and your projects.

📌 Don't forget taking notes of everything you learn or even creating a simple guide or tutorial for yourself. That'll help you retain what you've learned.

📌 There aren't any "gurus" or "magicians" out there, just people who practiced with the same tech as you but for a longest time.

That's it for now, hope this was useful.

Hope to read you soon,
let's keep coding 💻!