crossinguard.dev

My year with Scrimba

Projects created while bouncing around Scrimba learning paths

posted updated


I recently came across Scrimba while looking into Python learning resources for an IT degree program I am working on. It wasn’t something I could use at work but it seemed interesting so I made an account and started taking their “Learn JavaScript” course. I have no association or any sort of promo code, I just found this resource and decided to try it out.

When I was a high school math teacher I loved seeing how other teachers in my department would interpret and teach the same lesson I had. Now, as someone who makes IT courses and assessments professionally, I sometimes just like to see how people teach tehnical things. Even if I know the foundations of a learning path I still like to take the entry-level courses.

From what I can tell a free account can do a majority of the content. Some courses are marked as “pro” and require a paid account. There also seem to be limits on a free account for how many activities you can submit to their auto grader for feedback/answer validation. I hit my free activity limit but really liked what was happening so decided to pay for a year’s pro subscription for around $170 (in 2025 pre-Apocalypse bucks). This may have been a huge waste of money but I liked what I had seen of their platform, saw quite a few courses I wanted to take in their catalog, and appreciated how much free content was provided.

Scrimba teaches coding languages and concepts using a combination of videos, an actual code editor, and quick grade activities. I have seen each of these pieces offered together by various other IT education platforms, including boot.dev, freeCodeCamp, and datacamp. I find each of these, including Scrimba, to be great “get your feet wet” resource. They help teach foundations and give exposure to lots of tools packaged up in a nice, modern, interactive interface. You won’t really get good at anything until you start working on projects with what you learn, though.

What Scrimba does differently is having the “video” and code editor combined into one. In all previous cases, you start a course, watch an occasional video, read some good coding instruction matching up with what you saw in the video, and then code up a quick demonstration of the focus skill. These happen sequentially like turning pages in a book. Watch video. Read text. Do activity.

In Scrimba, the “video” is some sort of git-based screen recording piece of magic. You hit play and someone is talking at you, slideshow notes pop up, you see a code editor and text changing to what is being said. Then you realize you can also change the text.

Imagine watching a coder work on a project and the video is a recording of their screen. Now take your mouse and select the text they are working on. Or switch files to one they aren’t working on in the video. Or even scroll back up to the top of the page while the coder is working at the bottom of the page. In a traditional video you can’t do any of these things, you are watching a recording through a specific static lens. Scrimba feels like watching a video but it is a fully interactive code window. Honestly, it’s hard to explain. Just go check it out if you are curious.

Certifications

Like most others that give out certifications, these are nearly worthless on their own. However, the activities completed to earn the certification are how you build up muscle memory. And while I won’t put any of these certs on my professional resume, I still like earning them enjoy having a partification ribbon to mark my achievement. It’s easy for them to make and easy for me to enjoy, things don’t need to carry meaning beyond that.

Certificate of Completion

Course: Intro to Astro, Nov 6, 2025

I learned some good things in Intro to Astro, and since this website is built using Astro that is incredibly relevant to me. However, I experienced jank with the platform that I have not seen in the JavaScript content. Sometimes I had to ignore the output preview because it wouldn’t update, no matter how much I fiddled with the console. Additionally, I would get odd error’s popping up with regularity during the video portion after I submitted an exercise. The exercise would pass, I would hit play, and the recording would continue with a flash of error message every few seconds. Additionally, it would then sometimes think I had made edits and it would pause the video and fork my code. If I hit cancel it would do it again almost instantly. I found if I refreshed the page it “fixed"" both the error and pausing issues. I appreciate them making this course and I did find it worth my time, but this one was frustrating to deal with the tech issues (experienced on my laptop and desktop).

Projects

Learn JavaScript

Here are the projects I created while on the Learn JavaScript learning path.

Passenger Counter App

This app can be used to count attenance at an event. For example, I am hosting a Bingo event at my local community center next week. The room we booked has a max capacity of 85 so we need to know how many people are in the room in case we need to cap attendance. If somebody were near the door, they could log each group of 1+ coming and going.

The app displays the current change in people count. Hitting save updates the total to know how many people are still at the event. Additionally, there is a quick log of saved changes.

See the Pen Counter App | Learn JavaScript by crossinguard (@crossinguard) on CodePen.

Basketball Scoreboard

This was the “solo project” at the end of a practice section. In a typical learning project, like the counter up above, you slowly make each piece of functionality under the guiding hand of the lesson instructor. You still put your own spin and go beyond the basic requirements as much as you want, but the guard rails are up. This project is different because it starts from scratch based on a design file and project specifications. For better or worse, the code you see is my own implementation.

See the Pen Basketball Scoreboard | Learn JavaScript by crossinguard (@crossinguard) on CodePen.

Blackjack Game

I really enjoyed this one. The previous projects all felt like individual concepts, while this blackjack game required a lot of connected pieces. The base project completed in the course was pretty minimal. I had only intended to tidy things up a bit, but across serveral days I rewrote almost all of it. The HTML, CSS, and JS are heavily modified from the co-created project in the course, but the skills I used and approaches I tried to expand on are still centered on those concepts.

My version goes further into the “push your luck” element, with a running score using progressive rewards/punishments depending on how far under or over you were. Additionally, I made the buttons dynamically appear and disappear depending on context. This is just a simple demo to practice core JS skills, but I keep playing the game. I might revisit this down the road and see if I can turn it into a simple phone app. I have no idea how to do that, but have always wanted to learn how.

See the Pen Blackjack Game | Learn JavaScript by crossinguard (@crossinguard) on CodePen.

Password Generator

Solo project for the second set of practice problems. The starting point was another Figma file, which I tried to faithfully reproduce without chasing pixel perfection. The “required” functionality was to generate two random 15-character passwords. I set up my JS functions to be flexible for any length of password, but did not work that into the larger logic as I didn’t want to get too bogged down here. To help focus on JS’s interaction with CSS, I focused on button and cursor states depending on if passwords have been generated. Additionally, I went on a stretch goal journey to make the passwords copy to the user’s clipboard upon clicking on either of the passwords. Looking over how my password manager of choice BitWarden handles their generator, I am pretty confident I could fully recreate the same functionality. Good stuff.

See the Pen Password Generator | Learn JavaScript by crossinguard (@crossinguard) on CodePen.

Chrome Extension

This time the focus was on turning a simple web app into a Chrome extension. I made very little changes to the meaningful parts of this, but made sure to do my standard upgrades for logical CSS properties, variables, and prioritizing rem over px units. Note, this uses the Google Chrome API and requires a manifest file, so this doesn’t really work as a functional Codepen demo.The idea is the extension can store a list of URLs, with the option to either manually enter URLs or to pull automatically from the current active tab. This was my first foray into local storage and I am excited to keep building on these skills.

See the Pen Chrome Extension | Learn JavaScript by crossinguard (@crossinguard) on CodePen.

Unit Converter

Solo project for the third set of practice problems. The starter Figma file had a light and dark mode, but I chose to only build the light version. I am feeling pretty confident in my HTML and CSS abilities for these basic layouts so want to keep my focus on the JS. Like with the password app, I tried to be faithful to the design while not counting pixels. There are a ton of upgrades I would love to make to this app, but am hungry for more so am moving on.

See the Pen Unit Converter | Learn JavaScript by crossinguard (@crossinguard) on CodePen.