If you've been wanting to get into JavaScript development, it's normal to feel like you don't know where to begin. There are so many tools out there, so many concepts to learn!

It can be really useful to just watch someone who knows what they're doing to code something. You can see how they approach problems, and learn how they look up things they don't know.

This is exactly the approach I took when I wanted to learn 3D modeling with Blender. It worked wonders!

So today, I built a Github profile widget that dynamically pulls information from their API and displays it on the page. All in JavaScript with no external libraries. And it's an uncut & unedited version, so you can witness me make a mistake or forget an API, but then debug through the problem or look up the right information.

Here are some topics discussed in this video:

What chunks you can break this problem into so it can be solved cleanly

How to write maintainable CSS, and a website link

Why you shouldn't use 100% grey colors

How to debug JavaScript and CSS issues

What are good online reference resources

How to query the Github API without any JS frameworks

Enjoy, and let me know what you thought of it!

Here's the source code that I came up with by the end of the session. You can run it yourself, or use it as a basis for some other project.