DEV Community

Cover image for How to become a Frontend Dev πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» +the Frontend checklistβœ…
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Posted on • Updated on

How to become a Frontend Dev πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» +the Frontend checklistβœ…

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 πŸ’»!

Top comments (45)

Collapse
 
agathebadia profile image
Agathe Badia • Edited

This is so cool, thanks DesirΓ©! I have it in my bookmarks, but I don't know if I already wrote a comment or not ^^ This is a really nice way to start and structure the learnings! I am a few months old developer, and this is still super useful to have a framework like that available :D

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

So glad, Agathe!

I hope you keep improving and you find your path into the tech world, welcome!

Collapse
 
ziizium profile image
Info Comment hidden by post author - thread only accessible via permalink
Habdul Hazeez

Awesome write up.

Quick note:

In the section entitled: Some tools that may save you time. The tools are not linked, they are empty a tags missing the href attributes.

Link tags with empty href attributes

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

I wrote hre instead of href πŸ€¦β€β™€οΈ, it works now!

Collapse
 
luctst profile image
Info Comment hidden by post author - thread only accessible via permalink
Lucas.T • Edited

Great article πŸ™‚

There is a popular repo with a lot of contributors who just help you to be less confused about the things to learn if you’ll like to become a front, back or full-stack dev.

I think it can help some people

πŸ‘‰ github.com/kamranahmedse/developer...

Collapse
 
metruzanca profile image
Info Comment hidden by post author - thread only accessible via permalink
Samuele Zanca

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

I would suggest looking into whats in demand in your area and learn that instead. e.g. vuejs has almost no jobs in my country. Most use angular but with higher demand (and growing) for React (& React Native). Vuejs is still great, but it won't be the best use of your time becoming a master in something that you won't be able to use anytime soon whilst demand for it slowly grows.

Imo you can also skip CSS frameworks that have you learn a bunch of class names. Its easier(and more lucrative) to just learn how to use flexbox and grid properly and possibly use a component library like Ant Design instead. Maybe use something like BEM to keep your classe names standardized.

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thank you for your answer!

Vuejs is the easiest JavaScript framework, awesome to learn what a js framework is and looks like. React and Angular have incredible huge and difficult learning curve while Vue doesn't. I'm still suggesting to learn Vue, and then learn any of the other mentionted.

Also CSS frameworks are necessary since most companies without any designer (which is common) use them. You need to be familiar and know a CSS framework, it's just a must, no matter how you look at it.

Collapse
 
curious_web_addicts profile image
Curious Web Addicts

I agree with Samuele.
I will suggest using the most in-demand framework. I also don't think React and Angular have a difficult learning curve. I studied both from scratch as a newbie in the field and the basics can be learned in a week just reading through the docs or using some tutorials. They need time to master as everything in the checklist.

In my experience, CSS framework is not something you must use, but its something dependable of projects, teams and companies. Usually, they are also easy to learn through documentation and practise, therefore in my opinion new professionals should focus more on the basics of CSS.

Collapse
 
haaxor1689 profile image
Info Comment hidden by post author - thread only accessible via permalink
MaroΕ‘ BeΕ₯ko

I feel like you forgot to mention that if you want to be good frontend developer you should have some basic knowledge of tech stack that your closest coworkers use. You've mentioned databases and APIs but being familiar with design/ux basics is just as important. Employers don't need a code monkey but someone who is able to actively discuss and question decissions and that should apply to your coworkers as well. It's much harder to work with designer that doesn't think about resposivenes/accessibility or doesn't know the difference between dropdown and select.

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

I understand your point but Frontend is not designing. So you don't need to start learning the principles of UX-UI and design systems, and graphic design and typography essentials unless you're the designer and also the frontend of your company. Which... Actually shouldn't ever happen.

Collapse
 
haaxor1689 profile image
MaroΕ‘ BeΕ₯ko

It's not about being able to do work of designers/devops/backenders but about being able to understand what they are doing and discuss decissions on their side that affect you as well. You start this blog post saying that you are just a designer that codes. You are still a designer but much more valuable one because you have knowledge about frontend ecosystem and frameworks. And that's a big advantage against other designers that may have no idea how html or js works.

Thread Thread
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

MaroΕ‘ I really understand your point, it is good to have some knowledge but I often see the "design knowledge" that is being asked to frontenders is just too much and I don't think they'd use it in a company, but in their personal projects. Also, my developers discuss design things with me without knowing a lot of design πŸ˜†, the only thing you need it's being interested in your coworker's work, that's it!

Collapse
 
alais29dev profile image
Alfonsina Lizardo

Great checklist! Looking at it helps me see the long way I've come in just a year since I started coding, I can check more than a half of the items on the list and I'll probably be able to check them all this year :)

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

That sounds great! Don't ever doubt about how much effort you invested in your future, we all forget our long way sometimes but it's right there. Congrats!! πŸ€—

Collapse
 
klaffert profile image
Kelliann Lafferty

Awesome article DesirΓ©! I've been looking to establish myself as a Front End Dev and it's very helpful to have a clear sense of direction from the viewpoint of someone who is in the industry. Thanks for this article and checklist!

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Really hoping it will help you! Please contact me if you have any doubt, my DM's are always open! πŸ™Œ

Collapse
 
nanouchkaya profile image
Claudine

I've read a lot of articles about the journey of a frontend developer. I really like yours as it's quite short and goes to the essential. And I appreciate your final tips and tools - I'm going to have a look on Miro!
Thank you for sharing πŸ˜ƒ

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

So glad to read that! 😊

Collapse
 
monfernape profile image
Usman Khalil

Amazing checklist

Collapse
 
kohenhayden profile image
Kohen Hayden

I've been messing around with web technologies for my hobby projects, articles like this are making me feel like I should switch directions and be a frontend dev.

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Why switching directions? I'm designing, drawing, coding, and writing at the same time. One thing is your "professional title" and the other thing is what you enjoy to do!

Collapse
 
kohenhayden profile image
Kohen Hayden

I'm a Product Owner and an iOS Developer, but I really feel like it's difficult to wear more than one hat.
I'm doing a lot of hobby projects, such as frontend and python.
I've always enjoyed frontend, but I was always somehow scared of it, like it's too much, there's always some new Sass, SCSS, React.js, Gatsby.
It feel almost impossible to stay up-to-date with the latest trends in frontend.
Have you always been a frontend dev?

Thread Thread
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

I guess deep inside I always was, yes... However new techs shouldn't scare you, every frontender sticks to its favorite tech in the end, or to the tech in their company. I, for example, only work with Vue+SASS and nothing else, unless I'm needed to.

Learning SASS or stay always in the vanilla CSS it's up to you, we often forget that each tech has its specific purpose, you don't have to use everything to perform your job correctly!

That's why in the article I wanted to focus on the essentials, 1 CSS fw, 1 JS fw, API's, JSON's... With the base knowledge, you can go everywhere. 😊

Thread Thread
 
schnubb profile image
Schnubb

This is actually the essence of our work. When you got the basic technologies (html,css,js) it doesn't matter which tool, framework or helper you add to your stack. Everything ends up being html, css and js. These make the web visible, interactive and accessible. Everything else depends.

Collapse
 
danidre14 profile image
danidre14

Ahaha...I could check everything on the list. (Don't know everything in each category but I know some, for example I don't know Vue, React, AND Angular...only React.

ANd I don't know grid much, but I do know flexbox.

I'm more on the full stack end of things xd

Okay but I guess I'm down good with front-end....now to get a job!

Collapse
 
dimitrimarion profile image
Dimitri Marion

Good introdution. :)
If you wonder what resources you should learn from, check out my article: How to Become a Front-end Developer in 2019

Collapse
 
m121 profile image
Mateo Perez Salazar

Thank you

Collapse
 
shofol profile image
Anower Jahan Shofol

βž€ 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 - I don't get this point. Can you please explain How do you find recruiters or clients by a portfolio? Do I need to share or send somewhere?

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Hello Answer; when you create online presence people will organically check your portfolio, media, work and projects.

You need to build your presence in a way you're comfortable. Writing articles, sharing content, sharing your achievements, letting others know about you and what you've been working on, etc.

It's a long way but it ends up really well.

Collapse
 
vicradon profile image
Osinachi Chukwujama

Nice article

You referred to your readers as users πŸ˜„

Collapse
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Thanks! I always do! 😊

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more