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

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

helleworld_ profile image DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ« Updated on ・5 min read

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

Posted on by:

helleworld_ profile

DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

@helleworld_

Create and connect. She/her. Worked in Smart City development for the European Union. Instructor in LinkedIn Learning.

Discussion

markdown guide
 

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

 

So glad, Agathe!

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

 

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!

 

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

 

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 πŸ˜ƒ

 
 
 

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

 

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!! πŸ€—

 

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.

 

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!

 

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?

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

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.

 

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!

 
 

βž€ 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?

 

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.

 

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

 
 
 

Nice article

You referred to your readers as users πŸ˜„

 
 
 

Great, some of your advices like take notes and reuse are very important, which really get me to rethink what I have learned some time.

 
 
 

at last got the direction to be a frontend dev, Thnx/Love a lot

 

I'm just starting out on my web dev journey. Thank you for this article, I'm going to keep it nearby so I can refer to it often.

 

So glad, Adam!

Please if you need something don't hesitate to contact me! Let's go!

 
 

I feel there are many things there that aren't essentials to work as a Frontend Dev, however, is a good resource and I'm pretty sure it helps a lot of people