DEV Community

Cover image for How to Become A Front-end Developer (A Complete Practical Guide)

How to Become A Front-end Developer (A Complete Practical Guide)

Syakir on June 05, 2020

This article was originally published at https://www.devaradise.com/how-to-become-front-end-developer Front-end Developer, also known as Front-e...
Collapse
 
lmuzquiz profile image
lmuzquiz

Skip Jquery. Go straight to JS and then VueJs or Alpine

Collapse
 
xavortm profile image
Alex Dimitrov

Not like you need to "learn" jQuery, it's just a library of nice functions that help out. If you have to use it, you can always look into the documentation and find the functions you need. From personal experience, there are a few gotchas for edge cases, but that is valid for anything really

Collapse
 
ozzythegiant profile image
Oziel Perez

I agree. I don't use jQuery anymore. Sure, it's still important to be familiar with it as many projects will be using it for legacy reasons or for quick scripts but I practically get everything else done in Vue now. Since Vue has certain patterns to adhere to, it makes it easier to pick up existing projects that are using vue.

Collapse
 
bukazoltan profile image
bukazoltan

On one hand, I agree, modern JS makes Jquery pretty obsolete. On the other hand, lots of job requirements have it still on for legacy sites.

Collapse
 
syakirurahman profile image
Syakir • Edited

The point i include JQuery there, is because i believe there is a stage when junior developer need to know how the interactivity in the web works. Some UIs like slider, popup, carousel, etc are easier to create with JQuery. Event bootstrap js is still dependent on JQuery.
Not all developers going straight to develop a web app with modern js frameworks like VueJS, React or Angular. Most of them will create a common website for portfolio, blog or landing page which is more suitable to use jquery than modern frameworks because it's easier to learn and use.

Collapse
 
lmuzquiz profile image
lmuzquiz

Also stop using Bootstrap, and start using TailwindCSS

Thread Thread
 
syakirurahman profile image
Syakir

Ok. Will update it as alternative

Collapse
 
lmuzquiz profile image
lmuzquiz

smashingmagazine.com/2020/03/intro...

"....In this article, we’re going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites. If you regularly build sites that require a sprinkling on Javascript to alter the UI based on some user interaction, then this article is for you."

Collapse
 
siphosenkosindhlovu profile image
Siphosenkosi Mthulisi Ndhlovu

If you're going to do WordPress development jQuery is sort of needed.

Collapse
 
rahmanxyz profile image
Rahman

good resourse provided by you ! thank man

Collapse
 
syakirurahman profile image
Syakir

You're welcome bro..

Collapse
 
rahmanxyz profile image
Rahman

Bro i have a problem .. I learned html and css. Currently i'm trying to learn flexbox and css grid and its totally mess me and stuck ! Can you please tell me how can I learn css grid effectively or maybe some guide or hint to learn these concept ....

Thread Thread
 
syakirurahman profile image
Syakir • Edited

This post from medium might help you.
medium.com/youstart-labs/beginners...

Thread Thread
 
tripol profile image
Ekanem

@Hafizur To master Flexbox, I will also recommend this resource:
geddski.teachable.com/p/flexbox-zo...

I helped me understand it by playing a game

Collapse
 
changoman profile image
Hunter Chang

This video course is helpful for learning CSS Grid: youtu.be/T-slCsOrLcc

Collapse
 
ozzythegiant profile image
Oziel Perez • Edited

I say have a quick overview of Bootstrap but at this point that framework is really bloated with too many styles and components. Try Bulma instead. It has only the the most common components and styles, uses flexbox, and is modular for those who use SASS. I haven't used Tailwind CSS but I heard some pretty good things; definitely look for small css libraries that get you going quickly with less bloat.

Also, thanks for mentioning Alpine. This sounds interesting. There's also Svelte, as I heard that this is the next framework on the rise.

Lastly, any well rounded front end dev should also consider getting familiar with templating engines (Jinja, Thyme, Blade, Twig, Pug, Handlebars) used in monolithic and micro frameworks as you will likely be working with them in teams that use these frameworks.

Collapse
 
skaytech profile image
skaytech

Great Post! I would also recommend the self-taught web developers to use this website -> journeytodev.org/, since it has a nice way to capture and track your progress through various stages.

Collapse
 
syakirurahman profile image
Syakir

Thanks for recommending it. I already checked it. That's a good resource to help us track our learning progress.

Collapse
 
arpanetlover profile image
Arpanet lover

Tysm, it's really worth it.

Collapse
 
ad0791 profile image
Alexandro Disla

Great post. In my opinion, i have to keep it real, Vue is simply more easier than react and angular. I am on the come up. I think i will pickup Vue first. Then i will pickup react.

Collapse
 
syakirurahman profile image
Syakir

Yes. Vue has the lowest learning curve compared to Angular and React. Good luck with your learning!

Collapse
 
ozzythegiant profile image
Oziel Perez

Vue is the easiest to use but react in my opinion is more simplified in terms of syntax, assuming you focus on just functional components and only use class components at the top level.

Collapse
 
nicholaskarimi profile image
Nicholas Karimi

Very insightful. I'm still learning and this is a must reference material. I believe when followed to the letter, a dream to be a software developer can be realised. I have so many newbies who want to start learning web development and my first recommendation has been the freecodecamp.org website. I think you could include it to updated version of this post. Thanks.

Collapse
 
syakirurahman profile image
Syakir • Edited

Thanks for the recommendation. I will update it later along with the other suggestions in the original post first.

Collapse
 
juliabekesh profile image
Julia

When you just start you career in front-end development you should have skills in CSS + HTML (including CSS libraries like Bootstrap), CSS preprocessors (SASS and LESS), JavaScript and JQuery. But if you want to become middle or senior level specialist you should have stronger technical skills, make your knowledge deeper and you should grow ability to deal with complicated tasks independently.

Collapse
 
anibalardid profile image
Anibal

I agree, good post. But ... you could add some tips about SECURITY , this is so much important. Applications has a lot of security problems becasuse developers don't know nothing about the topic

Collapse
 
syakirurahman profile image
Syakir • Edited

Thanks for your comment. Yeah, security is important for application. But, i think front end developer has nothing to do with that because it focus on user interface / experience and client side. Security will be a concern if we are going to be a full stack dev. or backend dev. CMIIW

Collapse
 
anibalardid profile image
Anibal

Hi. I disagree. If frontend doesn’t know how to manage cookies. Or use unsanitized content. Etc etc. It is frontend responsability and a security hole.

Collapse
 
stnels profile image
Nelson Osazuwa

I love your post, very positive and direct, but I am looking for a front-end developer to help complete a project.
Project: Video streaming web application for interactive features and paid event.
DM if interested.

Collapse
 
dennisruso profile image
Terver Ugbe

Love the details!

Collapse
 
lrynek profile image
Łukasz • Edited

Good article, Syakir Rahman!

I think you should add a reference to this top-notch developer's roadmap - it's very worth seeing as well :)

Collapse
 
syakirurahman profile image
Syakir

That's a great resource. Thank you!.

Collapse
 
matarii profile image
Matarii Apeang

That must be one of the best guide I saw so far. Much needed guide. Thanks a lot man !

Collapse
 
syakirurahman profile image
Syakir

You're welcome.

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop • Edited

Nice post! Also have some suggestions and funnily enough a blog post named almost like this one (•‿•)

Collapse
 
zakintaliban profile image
Khasbullah Nukman Zakin

mantul bro

Collapse
 
syakirurahman profile image
Syakir

Haha akhirnya nemu orang Indonesia di dev.to 😂

Collapse
 
zakintaliban profile image
Khasbullah Nukman Zakin

banyak kok. santai aja, haha

Collapse
 
dariak0108 profile image
Daria K.

Excellent article, thank you so much!

Collapse
 
syakirurahman profile image
Syakir

You're welcome

Collapse
 
slkd7700 profile image
Xalman khalid

very informative resourse Thank you i have a question how much time do i need for all of this

Collapse
 
syakirurahman profile image
Syakir

You're welcome.
It depends on your learning frequency. Assuming you don't know coding yet, It may takes at least 6 months if you learn constantly and you're a fast learner.

Collapse
 
arturogascon profile image
Arturo Gascón

I liked your single-page personal website. Its cool.

Thanks for the article!

Would you change or add something to adapt to the "new normality" with pandemic? Specially on getting a job ;)

Collapse
 
banet profile image
Bane Tepavcevic

Nice list with resources! Thanks!

Collapse
 
momentouscodes profile image
Adetoba

Thanks for this article. I'm confident now I'm still on the right track to become a frontend developer.

Collapse
 
sharmakushal profile image
Kushal sharma

No need to lean jQuery , you can jump to any framework after learning JS