Resources that helped me on my Frontend Development Journey

Ok, so a lot of us have been there and will still be in such a situation of learning something new whether code related or otherwise and how fast we master that skill depends on if we have the right resources and right people around us.

The resources could be books (softcopy or hardcopy), documentations on the subject, tutorial videos, learning platforms, mentors, boot camps, friends, etc. With lots of options out there, it might be overwhelming at first for beginners and newbies to learn or even choose which style of learning they are comfortable with. Some people like to study in groups while some like me like to study alone. And some would prefer reading to watching videos and vice versa. A few would be comfortable doing both.

For me, it wasn't much different. I wanted to learn Frontend Development and I had access to unlimited resources but I still didn't understand what I was doing, I was just going in circles and not making any progress. Consuming data but not being able to turn it into useful information.

Here's the thing, in learning a new skill, even if you have access to all the resources and people in the world, if you don't know how to distinguish between what is needed or of value to you, then you will gain nothing, just learning in circles.

So after a long time wasted, I finally sat myself down and told myself that I need to start learning and creating something. I then tried to figure out what learning style works for me and what materials and YouTube videos I was understanding. In doing so, I was able to reduce my scope of resources. I realized I prefer to read part of the documentations first while I watch a crash course on the language before then watching a full course on it and then create projects from what I learnt and over time I was able to create a list of resources that I still use today and sometimes share with my friends too on Frontend development. And I will also be sharing them here too for those who might find them useful to them.

My Frontend development resources

Like I said earlier, I would first read part of the documentations, while I watch a crash course on it, followed by a full course video that I code along with. Then after that, I make unique projects with what I have learnt so far. I often try to limit my tutorial videos to 2 videos (Crash course and full course). So its really important to find good tutors whose videos you easily understand.

The 3 top websites I shuffle between when I want to read are:

1. MDN Web Docs (formerly known as the Mozilla Developer Network or MDN). It is a free resource for in-depth documentation on web standards such as HTML5, CSS, JavaScript, and much more. If you want to know everything there is to know about a web language, this is the place to be.

2. W3schools. It is a free educational website for learning to code online.
   It is the first place I go to anytime I want to learn something new or want to quickly refresh my memory. You can also practice what you learn on the web pages without leaving your browser.

3. Freecodecamp. In addition to coding while learning in your web browser, you can also interact with their ever-growing online community using forums, chat rooms and learn more from the tons of published articles on their site written by other developers. And if you feel you would rather watch a video instead, they curate full videos on all their courses too on their YouTube channel.

Next up is my list of YouTube videos divided into two;

Crash-courses/Full course videos and Playlists.

Crash course/Full course videos

A Crash course is a course where you learn a lot about a particular subject over a short period. This helps you get an idea of what that subject is all about.

• HTML crash course by Brad Traversy
• CSS crash course by Brad Traversy
• CSS Flexbox by FreeCodeCamp
• CSS Grid by Brad Traversy
• CSS Grid by Dev Ed
• JavaScript full course by FreeCodeCamp
• JavaScript DOM by Brad Traversy
• 15 basic JavaScript projects by John Smilga
• 10 JavaScript projects in 10hrs by Florin Pop
• 40 JavaScript Projects for Beginners by Jessica Wilkins
• Git crash course by Brad Traversy
• Git crash course by FreeCodeCamp
• Google Chrome Developer Tools by Brad Traversy
• Google Chrome Developer Tools by Codedamn
• Figma Tutorial by DesignCourse
• Figma Tutorial by Example 2021 by DesignCourse
• Design a Website with Figma by Dev Ed

Video Playlist

And now we go into the YouTube playlists. A playlist is a collection of videos. These playlists usually contain everything you need to know on a particular subject. They pick each topic and subtopics one by one in sequential learning and explain them with examples in dedicated videos.

• Learning CSS by Steve Griffith
• CSS full tutorial by Dev Dreamer
• CSS Animation series by Dev Tips
• JavaScript for frontend dev beginners by Telusko

Additional Youtube info.

I usually watch Kelvin Powell, Web Dev Simplified and Dev Ed videos for tips and tricks on CSS elements. I learn a lot about elements I haven't had before or ones people rarely use or know about and how to make CSS work easier for me(and you too). And no matter how sad or down you are, watching a Dev Ed video will automatically cheer you up and have you laughing. They also make some of the coolest code-with-me tutorials on web development projects. And I watch DesignCourse videos when I need help with web design fundamentals.

I almost forgot to mention Online Tutorials , he makes tutorials on how to make various animations and effects and projects relating to frontend and web design which are very easy to follow and the most amazing part of it are that he doesn't even talk in the videos but you will always understand what he's doing in them. And if you want to practice your skills and make cool transition and animation with CSS and Javascript then you should check him out.

Code Learning Platforms.

Like I said earlier, I much prefer to self learn, but sometimes you need to interact with people too to share and gain more knowledge and also build upon your people and soft skills too.
I partook in an online tech training hosted by SideHustle Internship where I made my first few tech friends and also got involved with the Twitter tech community. I also joined another after that, a training hosted by the Zuri team which also helped me in learning how to work in teams, meet up deadlines and interact with other people in the workspace also. And right now they are hosting an internship in partnership with HNG which I am also partaking in being in the Frontend development track.

I hope to learn more from it and by the end of the internship, level up my Frontend dev skills most especially in JavaScript, make more new friends and make it to the final level(fingers crossed).

To grow as a developer, you not only need technical skills but you also should know how to interact with people like your co-workers and clients because you will be dealing with people from different locations and cultures, different backgrounds and characters and different areas of life. And with Zuri Team I not only get to work with people from my country but for other places in and out of my continent as well.

There are many other training platforms (boot camps, training, internships) out there both paid and free that you can join too. I could name a handful but I'm limiting this to the ones I have used and partook in. (I could write an article on this if you would like to know them.)

So these are the resources I used and still using that has gotten me here so far. I hope it helps you too on your coding journey.

Whew, you made it up to the end of this article. Thank You. I hope you enjoyed reading this as much as I did writing it. I would like to know, do you prefer to read documentation and articles when learning a new language or do you prefer to watch video tutorials or do you do both like me.
Till next time guys. Byeee!

Connect with me on Twitter @timonwa_.