How to become a Frontend Dev 👩‍💻👨‍💻 +the Frontend checklist✅
Tags: webdev, beginners, career, codenewbie
Published: 2020-04-28 07:03:35


<h4>Hello, users! 👋</h4>

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 <a href="http://galuxui.com.es/#/becoming-frontend">here</a>.


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


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.


<h1>📍 You start here: the 3 'ends' of Frontend</h1>


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.


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


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


<h1>🎨 How do I build my Frontend Portfolio?</h1>


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.


<h1>✅ The Frontend checklist</h1>


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.

<h1>🕐 Some tools that may save you time</h1>

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

➜ <a href="https://www.notion.so/">Notion</a>: To take notes and document all my learning and projects.
➜ <a href="https://miro.com/">Miro</a>: To create useful flows and schemas.
➜ <a href="https://github.com/">GitHub</a>: All my projects are here, literally.
➜ <a href="https://www.netlify.com/">Netlify</a>: I deploy all my projects with this platform since I don't usually have a backend. If you do, use <a href="https://www.heroku.com/">Heroku</a> instead.

<h1>🌼 Last but not least</h1>

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