Learning web development should be fun! Here’s why and how I built ‘Fix-a-function!’

Inspired by FreeCodeCamp.org, The Witness, and countless mentees who felt lost after completing a coding bootcamp or Udemy course.

The web game I created to help junior frontend developers practice and improve: Fix-a-function!

Want to play it first?

Free coding exercises for beginners - Learn HTML, CSS, JS

In this article

1. Why I made Fix-a-function
2. How I made Fix-a-function
3. How you can help yourself, friends and co-workers

Why I made Fix-a-function

What’s the goal?

My goal in creating Fix-a-function is to offer frontend developers the most fun way to self-teach frontend, five exercises at a time, once per day.

A bit of context

I continue to see the same lack of competence, confidence and basic skills from junior-level, beginner front-end developers who claim to have recently completed an intense coding bootcamp, internship, or Udemy course:

• They don’t know how to critically think without help
• They don’t know how to adapt code found in a Stack Overflow forum post for their project’s purpose
• They don’t understand the breadth of HTML elements available, long-standing and newer CSS layout techniques, or JavaScript fundamental concepts like functions, scope, prototypes, conditions, DOM, APIs and much more

Many are clamoring for some way to practice:

• For those that cannot also design, they want a ready-made mock-up of screens to build with code
• For those who believe they have the skills, they want a difficult challenge handed to them to solve: often involving the use of a JavaScript framework or some complex API
• For each of them, they want some real-time feedback that the code they write is code they should be proud to write, not ashamed of.

None of them realize it, but they also want to have fun while learning.

• Most textbooks and video courses are dry, long-winded, and boring to watch
• When you’re not coding, you’re not fully absorbing, and you’re not effectively learning or practicing
• Web development can feel like one giant puzzle. But more often than not, one that isn’t all that fun to solve…until we think we solved it.

How I made Fix-a-function

I designed and built the game between mid-May and mid-June while my son slept.

It started as my next code challenge and project, and quickly broadened in scope to become a full-fledged game.

The single-page application (or SPA) consists of:

• Semantic HTML
• No-framework CSS
• VueJS

First iteration (a.k.a. minimum viable product or MVP)

• Heading, and an editable <pre><code></code></pre>, and two buttons: submit answer and get next exercise
• A single JavaScript function: function sum(a,b) { return a + b; }
• Fewer than five variations where one thing is changed to ‘break’ the expected behavior of the function e.g. remove the + symbol
• A series of three hints, progressively leading the player to the correct answer
• A simple comparison to check for a correct or incorrect answer e.g. does the player’s answer include a + symbol?

From there, I added:

• More exercises
• More metadata for each exercise: correct answer, programming language, difficulty, unit test
• More visibility of system status: correct answer if challenge wasn’t solved naturally, number of hints left and associated points possible, lives remaining, total score, current round and total rounds, selected language and difficulty, unit test that must pass, stopwatch counting how much time has elapsed this session
• More controls: get hint, give up, reset current exercise attempt
• More customization: difficulty, timer, time limit, programming language
• More state management: is the problem solved, was it the right or wrong answer, was another guess attempted, have all hints been used, etc.
• More data capture: connected to AirTable database and used local storage to routinely check and update session state

From there, I tested, re-evaluated, re-positioned, re-styled, and re-considered:

• People didn’t understand the primary constraint: change one thing
• People didn’t notice the brightly-color expected behavior
• People were too stubborn to voluntarily get a hint
• Hints offered reflected the initial challenge, but by the time they were shown, the challenge had been changed by the player
• People weren’t paying much attention to the customization options
• People were changing controls mid-guess and ‘breaking’ the app

How the current iteration encourages developers:

• The instructions are placed in a large font between the game name and the challenge, with a color-relationship between a few words and the unit test
• Default mode is JavaScript as the language, Easy as the difficulty
• After initially interacting with a challenge, game settings are locked to avoid ‘breaking’ the app. They are unlocked as soon as the next challenge is displayed.
• If after pressing ‘Did I fix it?’, and the guess is incorrect, the first/next hint is immediately displayed and Lives Remaining is reduced by 1.
• There is no ‘Give up’ button anymore, as that should never have been an option
• There is no ‘Reset’ button anymore. After incorrectly answering a challenge or getting a hint, the code is reset for the player.
• The third hint tells the player how to solve the challenge
• If, after three failed attempts, the player didn’t solve the challenge, the correct answer is displayed
• When all five exercises are finished, the player is encouraged to tweet their score and to sign up to receive daily reminders to return. From then on, they will see their total score (including past days’ scores) and will tweet their total score and the number of days played.

How you can help yourself, friends and co-workers

Start by playing your first round:

Free coding exercises for beginners - Learn HTML, CSS, JS

When you finish, share your score on Twitter using the blue birdie.

Encourage others to play with you!

• Agree on a language and difficulty, and track your scores each week.
• Create your own leaderboards
• Turn the timer on and adjust to where it feels comfortable but challenging. Consider starting on Easy and working your way up.

Good luck, and enjoy learning the fun way!