December 14, 2021 10 mins read

My Frontend Development Learning Path - With Resources

Personal

It's been about two years since I first wrote my first line of code and about a year since I started coding professionally, it's been a fun filled experience full of hard work, commitment, rejection, doubts, imposter syndrome and every other mix of emotions.

One of the common problems people face when starting out and even after being waist deep in tech is figuring out the right way to go, the right stuff to learn, the right courses to buy, the right people to look up to, the right path to follow. It never ends.

I get a lot of DMs from techies on twitter asking me to recommend courses and materials. I got about four this week and being a lazy person, I couldn't find the strength to send personalised replies for each of them so I have decided to compile a comprehensive list (from first ever till current) of all of the courses/articles/books and other materials that have helped me become a better developer today and add them to this blog post. Enjoy!

#1 Javascript Full Course For Beginners By Beau Carnes x Freecodecamp.

This is where it all started. In January 2020, I decided I must become a programmer. I wasn't sure of what to do or where to start from so I did a few google search and ended up choosing Javascript because I was told it could do everything.

I searched youtube for beginner courses and found this masterpiece by Beau Carnes. This course taught me the basic concepts of programming/javascript, I learnt how to declare variables, use functions, and many other basic concepts. The ending parts of the video was a whole lot of confusion but I watched the full thing anyways.

#2 The Complete Web Development Bootcamp By Angela Yu

I got this Udemy course from Angel Yu because a friend I met at a hackathon recommended it. The course is well structured but lacks the deeper concepts. I learnt basic html, css and bootstrap and proceeded to build the popular Tindog code along website using bootstrap. I also learnt more javascript here and how to do basic DOM manipulations. The pandamic started while I was on this course so after I completed it, I did a personal project with bootstrap, called it Panflow - my first ever personal project lmao.

#3 Javascript For Kids - An Ebook By Nick Morgan

Stumbling on this pdf was very random. I think I was just doing google searches and ended up with this one. I decided to read & study with an aim to learn new stuff.

Halfway through this book, I had to recheck the cover multiple times because if you read the things in here to a kid, that kid will be scarred and depressed for a lifetime. The book should have just been "Javascript", the poor kids don't deserve anything inside it.

I learnt more javascript concepts, jQuery, DOM manipulation, etc. After completing this course, I built a web game, I think treasure hunt or something is the name. I don't remember where the link is but it's basically a game that shows you a treasure map and you have to click till you find the spot where the treasure is.

#4 Modern Javascript From The Beginning

Okay, enough with the javascript already !!??

So something I noticed among newbies is, at this point, most are already jumping into different frameworks. Well, that's not a completely bad idea but for me, I still felt like I know nothing when it comes to programming with javascript so I decided to search further. While searching, a friend recommended this course by Brad Traversy! and honestly, it is one of the best courses I have ever set my eyes on.

I STRONGLY recommend this course to everyone who's finding it hard to grasp all the aspects of javascript because Traversy really went from the very beginning down to advances concepts and he took time to explain every section one after the other. From learning how to use var, let, const to advanced DOM manipulation all the way up to exploring javascript architecture patterns, I realised Traversy on Udemy is like Traversy on Youtube but with adrenaline, monster energy drink, Redbull, PowerHorse and Nitro combined.

After this thriller with Traversy, I knew I was ready without any doubts. I did a number of projects after this course, here's one of them - Github Profile Scanner. Ohh, and I also enrolled for the HNG internship a few days after completing this course.

#5 Responsive Web Design Course - FreeCodeCamp

There isn't much to say here. When I was searching for where to understand CSS, Grids, Flexbox properly, I visited FCC and they didn't disappoint.

Most of the things I know In CSS today is just this course, flexbox froggy, css tricks blog (God bless this team massively) and MDN docs, and reading other people's css codes to discover new rules.

#6 Vue Js Crash Course

So during my internship at HNG, I got added to project where Vue JS was required. I had gone so far in the internship even without knowing any frameworks but at this point, I was forced to learn Vue JS. Even though I knew React was what I had on my learning bucket list, I felt I could give Vue JS a chance to see how it goes.

Here's a tiny todo list project I built to practice Vue JS - kadettodowithvue.netlify.app

#7 React Front To Back - Brad Traversy

Yeah, I finally felt ready enough to join the bandwagon.

I found Traversy's videos so appealing so anytime I'm trying to learn something new, I always append "Traversy" to my searches. I got this course on udemy and finally got started with React JS.

I learnt react to a moderate level on this course and also built a few practice projects. I found react easier to understand than Vue JS, honestly don't know why it had to be the opposite for me cus people always say Vue is easier to understand.

* * * * * * * * *

Hello Friend 👋🏽, Break Time

I'm tired of typing.... so let's talk a little. Soooooo, one thing you should know is, watching so many tutorials doesn't help you get better, what helps you get better is doing stuff/practicing/building with whatever you've learnt in these tutorials.

After completing the react course, I didn't just stop there, there's a lot of articles, short videos, googling, and READING DOCUMENTATION in between.

Frankly speaking, getting to this point (I mean having followed though all the courses I mentioned up there), you're now like an 18 year old American High school graduate because you're now almost certainly OYO - On your own. Nobody will spoon feed you with courses for basic stuff anymore, you'll have to figure out what tools you need to use for your next projects and READ THE DOCS! (or maybe watch a crash course in youtube but you get the point, reading documentation is a high value skill).

Most times, you watch tutorials and the tutors just install a library and start using it like they have some superpowers or they know something you don't. That's not true, most times, it's because they have read the documentation before making the tutorial videos. Nobody stores all the syntax for libraries and tools in their heads, as long as you know the basics and can read and know where to find the docs, you'll be a great.

* * * * * * * * *

#8 Introduction To Next Js - Scott Moss x FrontendMasters

I was introduced to this course by seyi early this year, January I think. Scott Moss did an awesome Job in teaching the basic concepts of how Next Js Works as well as Server side rendering (SSR), Client side rendering, Static Generation (SSG) and he also explained when to use which. So if you're confused about all these buzz words, this is the right course for you.

I must mention, The Next JS docs is one of the most comprehensive I've come across so if you're pretty solid in react, reading the docs alone could make you really good in Next JS.

#9 Complete React Developer By Andrei Neagoie

I got this udemy course earlier this year just because I felt there's still a lot I need to learn about in react and one thing that caught my attention in the course outline was "Redux". I never really had a need to learn redux up until the day I wasn't considered for a job interview just because I have zero experience with redux . So I got this course because It promised to teach me redux alongside every other thing I need to know about react.

At the end of, it was well worth it, I learnt advanced react, PWAs, HOCs, React Architecture patterns, Redux, learnt more about firebase and security rules and configs, learnt how to setup a Gatsby site, learnt how to use redux sagas and redux thunk middle-wares properly, learnt how to optimise for performance in react, how to create custom hooks, and a lot more. In-fact, i would say this course is a better option than Traversy's React Front To Back course which I mentioned above.

Even though this course clearly covers more topic than the React Front To back course, I recommend getting both and watching react front to back first then proceed to this one because this one's a little bit advanced and you'll easily get lost, frustrated and discouraged if you haven't had moderate experience with react before. Wouldn't recommend this for a complete beginner.

* * * * * * * * *

There you have it. I think that's up to 80% of all the major resources that I have engaged with from when I started up till this point. Asides full scheme courses, I should also mention stack-overflow, css-tricks, Github issues and threads, all the numerous technical blog posts/articles and finally, twitter/groups/communities because all of these are really great sources of learning new stuff in tech.

What I'm Currently Learning/Doing?

According to my resume, I now work remotely as a frontend engineer at a DeFi startup. I've had to work with new tools, libraries and the trendy Web3/Decentralised web.

You may expect me to proceed to share resources I've used in learning web3 and co but surprisingly, there's none - YET. I haven't really settled down to get a comprehensive course or scheme to teach myself web3. So far, it's all been reading docs, following GitHub threads like a mad person, refreshing the tab and hoping a miracle happens, asking other web3 devs for help and so on but hey, at the end of the day, I got the job done.

Also, I've been battling with an severe weak point in my craft - Animations. I've never really been very great at animations so after running a way for the whole year, I finally got a course on Awwwards.com to get better at creating immersive websites and write better animations.

I hope to share more articles like this as time goes on because - Learning never stops! WAGMI 🙏🏽.

NEXT POST

Randoms on requestAnimation Frame, Linear Interpolation and CSS Transitions.

Hello, I'm
Collins Enebeli.

avatar

I'm a software engineer focused on solving problems using frontend technology. I am interested in user experience, accessibility, design engineering, gaming, web3, web animations, cloud engineering and golang.

Inspired bySarah Dayan

December 14, 2021 10 mins read

My Frontend Development Learning Path - With Resources

Personal

It's been about two years since I first wrote my first line of code and about a year since I started coding professionally, it's been a fun filled experience full of hard work, commitment, rejection, doubts, imposter syndrome and every other mix of emotions.

One of the common problems people face when starting out and even after being waist deep in tech is figuring out the right way to go, the right stuff to learn, the right courses to buy, the right people to look up to, the right path to follow. It never ends.

I get a lot of DMs from techies on twitter asking me to recommend courses and materials. I got about four this week and being a lazy person, I couldn't find the strength to send personalised replies for each of them so I have decided to compile a comprehensive list (from first ever till current) of all of the courses/articles/books and other materials that have helped me become a better developer today and add them to this blog post. Enjoy!

#1 Javascript Full Course For Beginners By Beau Carnes x Freecodecamp.

This is where it all started. In January 2020, I decided I must become a programmer. I wasn't sure of what to do or where to start from so I did a few google search and ended up choosing Javascript because I was told it could do everything.

I searched youtube for beginner courses and found this masterpiece by Beau Carnes. This course taught me the basic concepts of programming/javascript, I learnt how to declare variables, use functions, and many other basic concepts. The ending parts of the video was a whole lot of confusion but I watched the full thing anyways.

#2 The Complete Web Development Bootcamp By Angela Yu

I got this Udemy course from Angel Yu because a friend I met at a hackathon recommended it. The course is well structured but lacks the deeper concepts. I learnt basic html, css and bootstrap and proceeded to build the popular Tindog code along website using bootstrap. I also learnt more javascript here and how to do basic DOM manipulations. The pandamic started while I was on this course so after I completed it, I did a personal project with bootstrap, called it Panflow - my first ever personal project lmao.

#3 Javascript For Kids - An Ebook By Nick Morgan

Stumbling on this pdf was very random. I think I was just doing google searches and ended up with this one. I decided to read & study with an aim to learn new stuff.

Halfway through this book, I had to recheck the cover multiple times because if you read the things in here to a kid, that kid will be scarred and depressed for a lifetime. The book should have just been "Javascript", the poor kids don't deserve anything inside it.

I learnt more javascript concepts, jQuery, DOM manipulation, etc. After completing this course, I built a web game, I think treasure hunt or something is the name. I don't remember where the link is but it's basically a game that shows you a treasure map and you have to click till you find the spot where the treasure is.

#4 Modern Javascript From The Beginning

Okay, enough with the javascript already !!??

So something I noticed among newbies is, at this point, most are already jumping into different frameworks. Well, that's not a completely bad idea but for me, I still felt like I know nothing when it comes to programming with javascript so I decided to search further. While searching, a friend recommended this course by Brad Traversy! and honestly, it is one of the best courses I have ever set my eyes on.

I STRONGLY recommend this course to everyone who's finding it hard to grasp all the aspects of javascript because Traversy really went from the very beginning down to advances concepts and he took time to explain every section one after the other. From learning how to use var, let, const to advanced DOM manipulation all the way up to exploring javascript architecture patterns, I realised Traversy on Udemy is like Traversy on Youtube but with adrenaline, monster energy drink, Redbull, PowerHorse and Nitro combined.

After this thriller with Traversy, I knew I was ready without any doubts. I did a number of projects after this course, here's one of them - Github Profile Scanner. Ohh, and I also enrolled for the HNG internship a few days after completing this course.

#5 Responsive Web Design Course - FreeCodeCamp

There isn't much to say here. When I was searching for where to understand CSS, Grids, Flexbox properly, I visited FCC and they didn't disappoint.

Most of the things I know In CSS today is just this course, flexbox froggy, css tricks blog (God bless this team massively) and MDN docs, and reading other people's css codes to discover new rules.

#6 Vue Js Crash Course

So during my internship at HNG, I got added to project where Vue JS was required. I had gone so far in the internship even without knowing any frameworks but at this point, I was forced to learn Vue JS. Even though I knew React was what I had on my learning bucket list, I felt I could give Vue JS a chance to see how it goes.

Here's a tiny todo list project I built to practice Vue JS - kadettodowithvue.netlify.app

#7 React Front To Back - Brad Traversy

Yeah, I finally felt ready enough to join the bandwagon.

I found Traversy's videos so appealing so anytime I'm trying to learn something new, I always append "Traversy" to my searches. I got this course on udemy and finally got started with React JS.

I learnt react to a moderate level on this course and also built a few practice projects. I found react easier to understand than Vue JS, honestly don't know why it had to be the opposite for me cus people always say Vue is easier to understand.

* * * * * * * * *

Hello Friend 👋🏽, Break Time

I'm tired of typing.... so let's talk a little. Soooooo, one thing you should know is, watching so many tutorials doesn't help you get better, what helps you get better is doing stuff/practicing/building with whatever you've learnt in these tutorials.

After completing the react course, I didn't just stop there, there's a lot of articles, short videos, googling, and READING DOCUMENTATION in between.

Frankly speaking, getting to this point (I mean having followed though all the courses I mentioned up there), you're now like an 18 year old American High school graduate because you're now almost certainly OYO - On your own. Nobody will spoon feed you with courses for basic stuff anymore, you'll have to figure out what tools you need to use for your next projects and READ THE DOCS! (or maybe watch a crash course in youtube but you get the point, reading documentation is a high value skill).

Most times, you watch tutorials and the tutors just install a library and start using it like they have some superpowers or they know something you don't. That's not true, most times, it's because they have read the documentation before making the tutorial videos. Nobody stores all the syntax for libraries and tools in their heads, as long as you know the basics and can read and know where to find the docs, you'll be a great.

* * * * * * * * *

#8 Introduction To Next Js - Scott Moss x FrontendMasters

I was introduced to this course by seyi early this year, January I think. Scott Moss did an awesome Job in teaching the basic concepts of how Next Js Works as well as Server side rendering (SSR), Client side rendering, Static Generation (SSG) and he also explained when to use which. So if you're confused about all these buzz words, this is the right course for you.

I must mention, The Next JS docs is one of the most comprehensive I've come across so if you're pretty solid in react, reading the docs alone could make you really good in Next JS.

#9 Complete React Developer By Andrei Neagoie

I got this udemy course earlier this year just because I felt there's still a lot I need to learn about in react and one thing that caught my attention in the course outline was "Redux". I never really had a need to learn redux up until the day I wasn't considered for a job interview just because I have zero experience with redux . So I got this course because It promised to teach me redux alongside every other thing I need to know about react.

At the end of, it was well worth it, I learnt advanced react, PWAs, HOCs, React Architecture patterns, Redux, learnt more about firebase and security rules and configs, learnt how to setup a Gatsby site, learnt how to use redux sagas and redux thunk middle-wares properly, learnt how to optimise for performance in react, how to create custom hooks, and a lot more. In-fact, i would say this course is a better option than Traversy's React Front To Back course which I mentioned above.

Even though this course clearly covers more topic than the React Front To back course, I recommend getting both and watching react front to back first then proceed to this one because this one's a little bit advanced and you'll easily get lost, frustrated and discouraged if you haven't had moderate experience with react before. Wouldn't recommend this for a complete beginner.

* * * * * * * * *

There you have it. I think that's up to 80% of all the major resources that I have engaged with from when I started up till this point. Asides full scheme courses, I should also mention stack-overflow, css-tricks, Github issues and threads, all the numerous technical blog posts/articles and finally, twitter/groups/communities because all of these are really great sources of learning new stuff in tech.

What I'm Currently Learning/Doing?

According to my resume, I now work remotely as a frontend engineer at a DeFi startup. I've had to work with new tools, libraries and the trendy Web3/Decentralised web.

You may expect me to proceed to share resources I've used in learning web3 and co but surprisingly, there's none - YET. I haven't really settled down to get a comprehensive course or scheme to teach myself web3. So far, it's all been reading docs, following GitHub threads like a mad person, refreshing the tab and hoping a miracle happens, asking other web3 devs for help and so on but hey, at the end of the day, I got the job done.

Also, I've been battling with an severe weak point in my craft - Animations. I've never really been very great at animations so after running a way for the whole year, I finally got a course on Awwwards.com to get better at creating immersive websites and write better animations.

I hope to share more articles like this as time goes on because - Learning never stops! WAGMI 🙏🏽.

NEXT POST

Randoms on requestAnimation Frame, Linear Interpolation and CSS Transitions.