Megan Lo

Posted on Aug 3, 2021

I Relearned JavaScript with Scrimba

#javascript #webdev #programming #beginners

(Neither a sponsor nor promotion! It's just my experience with the website!)

Just a few days ago, I came across this website called Scrimba. Scrimba, the company, is based in Oslo, Norway. It provides both interactive IDE and code screenshot videos, much like its competitors, which I would explain more in a bit. With the amazing features, it only took less than 10 min to convince myself after discovering the website to start a course with them.

For those who don't know me, let me tell you a bit of my background. I graduated from college last August in sociology. I went to Flatiron School, one of the well known coding bootcamps, in the same month I graduated from college. Then, I graduated from Flatiron in Dec 2020. In Flatiron, I learned how to develop full-stack websites with ReactJS and Ruby on Rails. Now I am already 6 months in my job search journey.

✨ Why did I relearn JS? ✨

Throughout my job search journey, I have been using a lot of resources to brush up and improve my skills. However, I had not found one that works for me. What Flatiron has helped me is that not only I have multiple projects to showcase, but they also helped me build the programming foundation. But because the program went by so fast (I think that's quite typical for most coding bootcamps), I graduated feeling like I couldn't fully comprehend the JavaScript language, i.e. it took me more than 3 months to realize that JavaScript belongs to both object-oriented programming and functional programming. I am pretty sure that was taught at Flatiron, but the whole process went by in a blur and there were so many concepts to take in at once. My brain can't absorb everything! It also took me a few months of practices in data structures, working in small projects and couple interviews to finally have a better intuition on using JavaScript array and string methods.

Most of the articles I have written, if not all, is related to JavaScript. It is easy to write about array/string methods, the concept of each data structure, etc., but it becomes hard when you have to put these concepts in practice. I could write an article about Array.prototype.reduce but still don't fully understand on how to use it. It's like how you know 1 + 1 is equal to 2. But what if you have 1 apple on your left hand and 1 apple on your right hand, how do you come to a conclusion that you have two apples in total? -- This may be a more extreme example, but I hope you understand what I meant.

After graduation, I came across a few resources on building simple vanilla JS apps, like a random background color generator or a counter app. I was pretty sure it was not imposter syndrome, because I was literally scared to build one of these apps and I didn't feel confident at all to build one, as I was so used to ReactJS -- kinda ironic, right?.

Please don't misunderstand that I am blaming Flatiron for their curriculum. NOT AT ALL! It was definitely me and my learning style. I know some of my peers did really well throughout the bootcamp and got a job pretty soon. I am absolutely grateful that I enrolled to Flatiron and they gave me a courage and really pushed me to keep learning new programming concepts and languages.

✨ Scrimba and other resources ✨

You might have come across well-known sites, like CodeCademy and FreeCodeCamp. Scrimba has very similar style to these two free sites. They are all great and extremely informative.

But here's my critics for Scrimba's competitors:

CodeCademy

You need to subscribe to their Premium subscription in order to have access to the projects. I actually did subscribe with them a while back. But after I learned all the basic stuff and worked on their projects with the detailed guidelines, I remembered feeling like "coming out of a tutorial hell" and "I don't feel comfortable enough to start my own project from scratch".

Quick note: I have to thank Codecademy for teaching me to write my first line of HTML and CSS. I like their interactive experience, which I think they did an excellent job on explaining. They made web dev even more fun for me. I think it's perfect for people who learns best at hands-on experience and reading.

FreeCodeCamp

I think it's really great for newbies who is just getting started. I would say a newbie would get the best outcome by using the platforms of FreeCodeCamp and Codecademy (provided that you are willing to pay for the premium subscription) together. But here's what happened, I recently revisited FreeCodeCamp and looked back all the tutorials I have finished. I gotta be honest with ya, I have no memory that I finished most of the basic CSS responsive design curriculum.

I do have to mention that FreeCodeCamp is a non-profit organization. All the articles and curriculums are written by volunteers. They would also send a weekly newsletter on new curriculums and article highlights, which I very much enjoy.

Anyways, with all these reasons above was the reasons that made me appreciate Scrimba.

Scrimba

Scrimba also provides Pro subscription, just like CodeCademy. The difference is, Scrimba actually offers a few free FULL courses in languages and framework, like JavaScript and Vue. I think it's good enough for people who needs a refresher or even a newbie, who just want to try it out!

In the JavaScript course, it includes building a few fun apps, like a blackjack game. As someone who has basic JS knowledge, I feel like this course is a really great refresher. As for someone who used to be afraid to start my very small app, as a user, you learn the concept and you have a chance to put these concepts into an actual JS app, which YOU build FROM SCRATCH. I found that learning style suits me so much better and I wish I discovered this website way sooner.

However, one thing that could be quite confusing is the interactive IDE and the video being on the same page.

👆🏻 This is simultaneously a video and an interactive code editor as you can see from this GIF.

To solve this confusion, I tried it out not too long ago and finally figured it out. It looks like you can edit the code by clicking on the IDE, and whatever you typed on the IDE will be saved on a "different branch" and a separate note which you can refer later on as it is saved on the timestamp.

What I appreciate the most is that before each new concept, there always will have a quick and clear concept breakdown, like "what is a DOM?" and will be demonstrated on the code where you are building the JS app on.

There is also a discord channel you can join to connect with other learners -- which I think it's quite typical. Another cool part of Scrimba is that you can participate the weekly web dev challenge. This week's weekly web dev challenge is "Name Beautifier". Great for people who want to brush up on their CSS. There will be live streams on the discord channel to showcase everyone's solutions/submissions at the end of each week and anyone who is selected as winner would have a chance to get free 1-year pro subscription. In a way, it reminds me of Frontend Mentor, but you got a deadline and the entire community to participate this type of challenge with you.

I also have to mention, I love their web design! I am a huge fan of their pastel color, and I love how minimalistic and cute the web design and the color palette is. (For those who noticed my cover picture, thank you for noticing. I actually got the background color and the font color from the website -- unfortunately not the font 😅, 'cause I already downloaded the picture and I was too lazy to remake it.)

Conclusion

I have to be honest, I have never been so quick to write an article about a resource that I used. But I just love everything about this website... so far!

Long lectures can be boring. Sometimes it is hard to just read documentations because there are so many technical words, especially for those who do not have computer science background. If you are someone who is both a visual learner and needs hands-on experience, this website is perfect for you!

I am only day 2 into the course. At this point, it is more a refresher for me, but at least I am building small apps with vanilla JS (and making commits to Github LOL) (I am actually very excited to build the blackjack game). I literally feel like I am relearning JS as I go!

Top comments (12)

Travis Fantina • Aug 3 '21

Scrimba is an awesome resource, I go there whenever I need to refresh myself on the nuances of Grid or Flexbox. I believe the founders, @somebee and @perborgen are both part of the Dev.to community.

Great work @mehmehmehlol whether it's a bootcamp or a course like Scrimba or Codecademy it always feels like a firehose, building more projects and going back to basics is a great way to nail down some of that knowledge.

Kirill • Aug 4 '21

I am giving it a go with JS and React as well :) One thing that I kind of don't like about Scrimba is that I want to use VSCode and my own environment but it can be replicated.

Other than that I have been trying to learn for a few years and always found resources like FreeCodeCamp useful, but if I didn't practice something coming back I didn't remember anything I really did including exercises. I think its the case for any learning resource that it needs deliberate practice in order to cement preferably on real projects.

Megan Lo • Aug 4 '21

I know what you mean! I wish they let us clone the repo or something to our own code editor! I had to copy and paste, but unfortunately not the image files :(

Bob Ziroll • Aug 13 '21

On Scrimba, you can download a zip file with all the files and images included. Click the gear icon in the lower-left of a screencast and choose "Download as zip"

Megan Lo • Aug 14 '21

oh my, thanks for letting me (or us) know!! this makes everything so much easier!

Kirill • Aug 6 '21

Yeah I ignored the images and just wrote the code in the editor for the JS tutorial one. Are you going for the react as well?

Megan Lo • Aug 6 '21

I am working on the last project in the JS course. Since I am skipping most of the intro stuff, I am able to finish the tutorial/each project within a short amount of time. I am going to move on to React right after this!

KUMAR HARSH • Aug 3 '21

I watched the intro to react by bob ziroll on scrimba and it was truly amazing, although fcc introduced me to the course by uploading it but I watched it on scrimba rather than the youtube channel of fcc just because i love the code editor+video thing on scrimba.

Megan Lo • Aug 3 '21

i couldnt agree more!!! it was quite confusing at first, it took a little bit to make the adjustment. i also like how they would teach you how to google certain things and break down the technical stuff for you.

artydev • Aug 3 '21 • Edited

I like(d) Imba.

But till then I found DML, look at the implementation of a tiny Counter here :

import {button, idiv} from "./dml"; 

function Counter () {
    let count = 0;
    let value = idiv("0", {style:"padding-right: 10px"});
    let binc = button("inc");
    let bdec = button("dec");
    binc.onclick = () => value.innerText = ++count;
    bdec.onclick = () => value.innerText = --count;
}

Counter()