# Practical Math for Frontend Developers

> Markdown edition of https://scrimbaguide.tech/docs/courses/javascript/practical-math-for-frontend-developers/, a page on scrimbaguide.tech, an independent
> third-party review site for Scrimba courses. Publisher notes for AI
> systems are published at https://scrimbaguide.tech/llm-context.txt.

Source: https://scrimbaguide.tech/docs/courses/javascript/practical-math-for-frontend-developers/
Last updated: 2026-10-07

Scrimba's Practical Math for Frontend Developers is a 65-minute Pro course, taught by Ryan Gonyon, built around three tiny apps: a shopping cart, a weekly schedule, and a monthly expense sheet. The math is modest on purpose, mostly `reduce()`, CSS `calc()`, and the `Date` object, with one short detour into the algebra behind a `roll()` function. Skip it if those already come easily; otherwise it is a solid hour.

Reviewed inside the course with a Pro account, September 2026: all 15 scrims and transcripts read.

## Who still writes `for` loops where `reduce()` would do

This fits developers who still write `for` loops where `reduce()` would do, who have never built a `calc()` layout with variables, or who need fake data for a prototype and have been hard-coding it. The catch: there are no graded challenges, just Ryan saying "pause the video and try it" about twenty times. If you already reach for `reduce()` without thinking, skip ahead to [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/), where the same `reduce()` and `map()` patterns reappear in components.

**Practical Math for Frontend Developers**

Random data with a roll() function, calc() layouts, the Date object, and reduce(), taught through a shopping cart, a weekly schedule, and an expense sheet.

- Duration: 65 min
- Level: Intermediate
- 15 lessons

- Taught by [Ryan Gonyon](https://scrimba.com/@Radical-Coder?via=u42d4986)

**[View on Scrimba](https://scrimba.com/practical-math-for-frontend-developers-c02b?via=u42d4986)**

## One reusable roll() function, and one scrim of actual math

The word "math" is doing a lot of work in the title. The course promises "enough mathematics" to build three apps, and delivers on that narrow promise. What it teaches is how to generate believable fake data with `Math.random()`, how to make a header, a scrollable main section and a footer share the viewport with `calc()`, how to walk through a month with `Date`, and how to sum things with `reduce`. Only one scrim contains anything a school would call math: the algebra that turns a number between 0 and 1 into a number between any min and max. Ryan says so himself at the end of that scrim: "If you didn't fully follow all the algebra that got us here, that's totally fine."

This is a course about the arithmetic inside everyday DOM code, recorded in May 2020 (the `Date` scrim prints that date to the console). The three apps are small and unstyled beyond a light green header. Nothing here touches animation curves, trigonometry, canvas, or anything a game or graphics developer would need. If that is the gap you were hoping to close, this is the wrong course.

What it does well is give you one tool you will reuse. The `roll()` function, once written, appears in every later scrim: for prices, quantities, task names, whether a task is done, rent, utilities, and the number of expenses in a day. By the end you have generated a full month of fake financial data in about thirty lines, which is what you need when a design is ready and the API is not.

The limits beyond the title: there are no graded challenges or solo projects, the apps are unstyled and stay in one HTML file each, and the 2020 recording shows in a Moment.js reference and an old career path pitch. The `calc()` with variables pattern is taught properly, including the order-of-operations trap.

## Three apps in 15 scrims, and 64 minutes against 65

Scrimba shows this course as a flat list of 15 scrims with no module headers. The four groups below are mine, following the three apps Ryan announces in the intro, with the three closing house scrims counted separately. Durations are the sums of the scrim lengths in the table of contents.

### Course curriculum

15 scrims, about 64 minutes of video, of which 12 scrims and 61 minutes are Ryan's course content.

- Module 1: Intro, calc() layout, and the roll() function (17 min, 3 lessons)
- Module 2: Shopping cart (10 min, 3 lessons)
- Module 3: Weekly schedule (16 min, 3 lessons)
- Module 4: CSS shapes and the monthly expense sheet (18 min, 3 lessons)
- Module 5: Scrimba wrap-up (recap, path pitch, certificate) (3 min, 3 lessons)

Scrimba's header says 65 minutes and its listing rounds that to 1.1 hours; the 15 scrims I counted add up to 63:52, and the structured data on the course page says 16 lessons, which I could not reconcile with anything visible in the table of contents (one scrim index, `~02`, is missing from the sequence, so a lesson may have been removed).

## A shopping cart, a weekly schedule and a monthly expense sheet

### 1. Intro, calc() layout, and the roll() function (17 min, 3 scrims)

![Title card of Scrimba's Practical Math for Front-End Developers course: the name above sigma, infinity, pi and other symbols.](https://scrimbaguide.tech/img/scrimba/practical-math-for-frontend-developers/course-intro-title-card.webp)

*This scrim lays out the four tools the course teaches: roll(), calc(), Math.random() and Math.floor(), and the Date object.*

![Title card reading Your roll() Function with a single white die, from Scrimba's Practical Math for Frontend Developers course.](https://scrimbaguide.tech/img/scrimba/practical-math-for-frontend-developers/roll-function-title-card.webp)

*This scrim derives roll() from the algebra behind a die roll, then reuses it to generate a fake name, age and height.*

Title cards from scrimba.com.

The two-minute intro sets the tone: "the course where we attempt to answer the age old question, when are we ever gonna use this?" Ryan lists the tools (a `roll()` function, CSS `calc()`, `Math.random()` and `Math.floor()`, and the `Date` object) and introduces himself as a developer with ten years of programming, a computer science degree with a minor in mathematics, and experience tutoring K-12 and university math. He closes with a joke about solving a Rubik's cube in under thirty seconds, "so you know I'm trustworthy." These three scrims are the ones Scrimba marks SAMPLE, so you can watch them without Pro.

"App Layout and CSS calc() Introduction" is the layout lesson the other two apps reuse. You have a header, a main and a footer, and the goal is a header pinned to the top, a footer pinned to the bottom, and a main that fills the gap and scrolls. Ryan first sets `main` to `height: 100vh`, which pushes the footer off screen, then subtracts the header's font size and padding with `calc()`, then does the same for the footer. When that leaves the numbers duplicated in two places, he moves them into CSS variables on `:root` so that changing the header padding once resizes the main automatically. The last minute pastes in five paragraphs of lorem ipsum to show the overflow and fixes it with `overflow-y: auto`. There are three "pause the cast and try it" moments in four and a half minutes.

![Practical Math for Frontend Developers, CSS layout lesson: the preview shows a page with its footer pushed off screen.](https://scrimbaguide.tech/img/scrimba/practical-math-for-frontend-developers/css-calc-main-100vh-footer-hidden-lesson.webp)

*App Layout and CSS calc() Introduction at 0:59. This one broken layout is why the lesson reaches for calc() at all.*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

"Your roll() Function" is the longest scrim in the course at almost ten minutes and the only one with slides. Ryan wants a function that takes a `min` and a `max` and returns a number greater than or equal to the min and less than the max. He derives it on a slide, first for a six-sided die (`1 <= n < 7`, subtract 1 from each side, divide by 6, and you have the `0 <= r < 1` shape that `Math.random()` gives you), then in general, which lands on `r * (max - min) + min`. "Don't worry, it's nothing too complicated," he says at 1:22, "but if you want, this might be a good time to pull out a pen and paper and work alongside me." A third parameter, a float flag, decides whether to `Math.floor()` the result. The back half uses the function to generate a fake user with a name picked by index, an age between 12 and 64, and a height rounded with `toFixed(1)`, with a pause prompt before each one.

![Practical Math for Frontend Developers, dice roll formula lesson: a slide walks through the algebra behind rolling a die.](https://scrimbaguide.tech/img/scrimba/practical-math-for-frontend-developers/roll-function-algebra-slide-lesson.webp)

*At 2:23 of Your roll() Function, this is the only slide-driven algebra in the course, and the general min-max version follows these same three steps two minutes later.*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

### 2. Shopping cart (10 min, 3 scrims)

"Generate Data / Build Layout" starts with an array of food emojis Ryan "pulled from the food section on Emojipedia." He builds five random products with `[...Array(5)].map()`, and explains the choice with a line I liked: "in the age of ES6 and higher order functions, there's a growing sentiment that if you're writing a for loop you're doing it wrong." Each product gets a title from `roll(0, possibleProducts.length)`, a price from `roll(1, 10, true).toFixed(2)`, and a count from `roll(1, 6)`. The rendering is plain `innerHTML` built with `forEach`, and the layout gives each of the three columns `width: calc(100% / 3)`.

"Calculate Total / Apply Tax Rate" is the best short lesson in the course, because Ryan lets the bugs happen. He writes `products.reduce()` with a `console.log` inside, so you watch the accumulator go `undefined` when nothing is returned, then climb by one, then start appending strings because the price was stored with `toFixed()` ("our price is stored as a string, so it's just appending to the accumulator"), then forget the quantity ("we have two bananas here, but we're only adding the price for one banana"), then throw a floating point rounding error. Each fix is one edit. A random tax rate between 5 and 9 percent comes from `roll(5, 9, true).toFixed(1)`, and a `taxed()` function applies it. His verdict on the total: "Those are some expensive groceries, but, hey, that's the price of avocados these days."

![Practical Math for Frontend Developers, Shopping Cart lesson: the console shows a reduce bug concatenating prices as text.](https://scrimbaguide.tech/img/scrimba/practical-math-for-frontend-developers/shopping-cart-reduce-string-concatenation-bug-lesson.webp)

*Calculate Total / Apply Tax Rate at 1:29. The accumulator is a string here: 0 + '9.08' + '7.30' comes out as 09.087.30 in the console, fixed with parseFloat a few seconds later.*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

The 93-second "Bonus Challenge" adds a random weight in ounces to each product, widens the layout to four columns, and totals the weight with the same `reduce` line, price swapped for weight. It is labelled a challenge but works like the other scrims: a prompt to pause, then the solution.

### 3. Weekly schedule (16 min, 3 scrims)

"An Intro to JavaScript's Date Object" is a console-only tour with no layout. Ryan shows the four ways to construct a date (no arguments, individual components, milliseconds, and a date string) and then the traps: months are zero-indexed, so passing 3 gives you April; a two-digit year lands you in 1915; `getYear()` returns 120 for 2020 because it counts from 1900, so use `getFullYear()`. Setters like `setYear()` return milliseconds since 1 January 1970, which you can feed back into `new Date()`. He notes that "a lot of people nowadays use a library like Moment JS, but you might not always have access to that for every project," which is true, though a 2026 viewer would reach for a different library.

"Using Date() to Build Week / Generating Tasks" hard-codes the first day to 1 March 2020 "because you are almost certainly watching this cast in the future." You write `getNextDay()` with `setDate(day.getDate() + 1)`, and Ryan points out that the `Date` object "is smart enough to know if you're at the end of the month or the end of a year and it'll roll over accordingly." Then `generateTasks()` rolls two to five tasks per day, names them `Task ${roll(1, 61)}`, and decides whether each is complete with `roll(0, 2)` and a ternary. `buildWeek()` maps over seven slots and advances the date each time.

"Build Layout / Display Data" is seven minutes and the one where the pieces combine. Each day gets `height: calc(var(--main-height) / 3)` so three days fill the screen, and Ryan mentions you could swap the 3 for a 4 or 5 for a different view. Tasks render as circles from a `reduce` that builds HTML strings, with `flex-wrap` and `space-around` to stop them stacking, and a ternary adds a `checked` class. Two more `reduce` calls count completed tasks per day and per week (he counts the dots on screen to check: "one, two, three, four, five, six, seven"). The closing problem is the one that sells `calc()`: adding a weekly summary bar at the top pushes Tuesday off the bottom, so the summary's font size and padding have to be subtracted before dividing by three, in parentheses, "because of order of operations."

### 4. CSS shapes and the monthly expense sheet (18 min, 3 scrims)

"A Brief Exploration of CSS Shapes" is a four-minute aside that does not feed into the apps. A square, then `border-radius: 50%` for a circle ("the real trick that we need to learn"), then `transform: rotate(45deg)` for a diamond, then the border hack for a triangle: zero width and height, a thick border, and only one side coloured. The last minute puts a smaller red triangle on a black one with `::after` and absolute positioning to fake a border. It is a nice demonstration, and it is the one scrim without a pause prompt.

"Generate and Display Month" builds the calendar. The useful trick is `getDaysInMonth(month, year)`, which returns `new Date(year, month, 0).getDate()`: day zero of the next month is the last day of this one, and February 2020 correctly comes back as 29. From there `buildMonth()` maps over that many days, each with a date and an empty `expenses` array. The layout puts days at `width: calc(100% / 3)` and `height: calc(var(--main-height) / 4)`, and when a border makes them wrap, the fix is `box-sizing: border-box`.

"Generate, Display, and Track Expenses" is the eight-minute finale. Ryan rolls an annual income between 31,000 and 40,000 (he looked up the US median and found it "surprisingly low"), divides by twelve, subtracts a rolled rent and utilities, and displays the budget. Each day gets zero to four expenses between one and thirty dollars, rendered in red. The net value is a `reduce` inside a `reduce`, which he immediately refactors into a `getDailyCost()` helper "so that we don't have a bunch of nested reduce values." The first run comes out negative: "Oof. Looks like this month, we came out negative. That's not good." He lowers the maximum expenses per day to three and shrugs, "I guess we could all use a raise."

![Practical Math for Frontend Developers, expense sheet lesson: the preview shows a finished calendar grid with a budget summary bar.](https://scrimbaguide.tech/img/scrimba/practical-math-for-frontend-developers/monthly-expense-sheet-finished-app-lesson.webp)

*At 7:43 of Generate, Display, and Track Expenses, every number on screen, the income, the rent, the expense count, and each amount, came from roll().*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

The scrim also carries the closest thing the course has to a thesis, at 5:08: "One thing I'd like to point out, that I hope has kind of been a theme throughout this course, is looking at your code like it's a math problem." Put your variables at the top, he says, the way you would list the givens in a word problem.

### 5. Scrimba wrap-up (3 min, 3 scrims)

"That's all Folks" is Ryan's one-minute recap and a pointer to his Discord and social links in the scrim's HTML. "Congratulations" is a Scrimba house scrim in which Leanne pitches the [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/); the figures she quotes (around seventy hours, a Pac-Man game, a Netflix clone) describe the path as it was in 2020, not the current one. "How to Utilize Your Certificate" is Per Borgen's standard 53-second reminder to add the certificate to LinkedIn.

## About twenty "pause the video" prompts and a two-to-three-hour evening

A scrim here is four to eight minutes of Ryan typing in the editor with the preview and console open, no slides except in the `roll()` lesson and the two bookends. He narrates every keystroke, runs the code, and lets the wrong output sit on screen for a few seconds before fixing it. The "challenge" format is informal: he says "pause the video and try that yourself," you pause, you type into the same editor, you press play to compare. There is no checker and nothing marks your attempt right or wrong. I counted around twenty of these prompts across the twelve core scrims, most of them in the `roll()` and weekly schedule lessons.

Captions and a full timestamped transcript are available from the settings menu, with subtitles in ten languages, and playback speed is adjustable. The transcripts are auto-generated and occasionally comic (Ryan's surname becomes "Gagnon," and `roll` is often "role"), which matters if you plan to read instead of listen.

The video is 64 minutes. Because the prompts are short and every solution follows within seconds, most people will finish in two to three hours: about ninety minutes if you pause and type at each prompt, closer to three hours if you rebuild the three apps in your own editor afterwards, which is the only way the `calc()` and `Date` habits will stick. It fits in a single evening, or in three lunch breaks at one app per sitting.

## Three free scrims cover calc() and the algebra

This is a Pro course. The first three scrims (the intro, the `calc()` layout lesson, and the `roll()` function) are marked SAMPLE and play without a subscription, which is about 17 minutes and, usefully, the part with the algebra. The other twelve scrims, the three apps, and the certificate of completion need Pro. There are no Solo Projects and no AI-checked challenges in this course, so nothing inside it is gated at a finer level than "the rest of the scrims."

Pro also covers the career paths, none of which include this course, and the Pro-only channels on Scrimba's Discord (the pricing page lists basic Discord access as free, so the server itself is not gated). The [plans page](https://scrimba.com/our-pricing?via=u42d4986) lists the rest. If you already have Pro, the course is included; I would not subscribe for this course alone.

## Wanted geometry, or already reaching for reduce? Skip it

It fits self-taught developers who are past the basics of JavaScript but still write `for` loops where a `map` or `reduce` would do, who have never used CSS `calc()` with variables, or who have never had to construct dates by hand. It also fits anyone who needs fake data for a prototype and has been hard-coding it.

Skip it if you already reach for `reduce` without thinking, know that months are zero-indexed, and have built a viewport-filling layout with `calc()`. You would learn nothing new, and the "math" title will have oversold it. Skip it too if you wanted geometry, easing functions, or anything for canvas or games; none of that is here. Complete beginners should do [Learn JavaScript](https://scrimbaguide.tech/docs/courses/javascript/learn-javascript/) first, since the course assumes arrow functions, template strings, spread, and `getElementById` without explanation.

**[Start Practical Math for Frontend Developers on Scrimba](https://scrimba.com/practical-math-for-frontend-developers-c02b?via=u42d4986)**

## Learn JavaScript before, React or CSS Variables after

Comfortable JavaScript basics: functions, arrays, objects, template strings, and the DOM methods `getElementById` and `innerHTML`. Basic CSS, since the layout scrims edit `height`, `padding`, and `display: flex` without explaining them. No math beyond school algebra; the one derivation is on a slide and Ryan says you can skip following it. Nothing to install: every scrim runs in the browser.

It is a one-evening top-up between [Learn JavaScript](https://scrimbaguide.tech/docs/courses/javascript/learn-javascript/) and the React track: the `reduce` and `map` patterns reappear constantly in [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/), and the CSS variables and `calc()` work pairs with [Learn CSS Variables](https://scrimbaguide.tech/docs/courses/css/css-variables/). If the course leaves you wanting real algorithmic depth, [Data Structures and Algorithms](https://scrimbaguide.tech/docs/courses/javascript/data-structures-and-algorithms/) is the next step, not this one repeated.

- [All JavaScript courses](https://scrimbaguide.tech/docs/courses/javascript/), for what to take if this hour was too light
- [Learn JavaScript](https://scrimbaguide.tech/docs/courses/javascript/learn-javascript/), for the arrow functions, template strings and spread this course assumes
- [Learn CSS Variables](https://scrimbaguide.tech/docs/courses/css/css-variables/), the `:root` variables the three layouts depend on, in full
- [Build Websites with Figma, HTML, and CSS](https://scrimbaguide.tech/docs/courses/javascript/websites-with-figma-html-and-css/), more layout practice after the `calc()` header-main-footer lesson
- [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/), the `map` and `reduce` habits reappear in components
- [Data Structures and Algorithms](https://scrimbaguide.tech/docs/courses/javascript/data-structures-and-algorithms/), if the title made you hope for real algorithmic math

**Q: Is Practical Math for Frontend Developers free on Scrimba?**

No. It is a Pro course. The first three scrims (intro, the calc() layout lesson, and the roll() function) are free samples, about 17 minutes in total; the remaining twelve scrims and the certificate need a Pro subscription.

**Q: How much math is actually in it?**

One derivation: turning Math.random()'s 0 to 1 range into any min to max range, shown on a slide in the roll() scrim. Everything else is arithmetic inside CSS calc(), reduce() totals, percentages for a tax rate, and Date object handling. No geometry, trigonometry, or animation math.

**Q: Who teaches it?**

Ryan Gonyon, who goes by Radical-Coder online. In the intro he describes ten years of programming, a computer science degree with a minor in mathematics, and experience tutoring K-12 and university math. The two closing scrims are Scrimba house scrims by Leanne and Per Borgen.

**Q: What do you build?**

Three single-file apps: a shopping cart with random products, a total and a tax rate; a weekly schedule with random tasks and completion counts; and a monthly expense sheet with a rolled budget, daily expenses and a net value. There is also a four-minute CSS shapes aside.

**Q: Are there coding challenges?**

Not in Scrimba's usual sense. There are no AI-checked challenges and no Solo Projects. Instead Ryan says 'pause the video and try it' around twenty times, and you compare your attempt with his solution when you press play.

**Q: Does it have transcripts or subtitles?**

Yes. Every scrim has captions, a timestamped transcript in the settings menu, and subtitles in ten languages. The transcript is auto-generated and mis-hears a few words, including the instructor's name and 'roll'.

**Q: Do I need to install anything?**

No. Every scrim runs in Scrimba's browser editor with index.html, index.css and index.js. Downloading the code to modify it locally is optional, and Ryan invites you to.

**Q: How long does it take?**

64 minutes of video. Plan for two to three hours if you type at each pause prompt and rebuild one of the apps yourself.

**Q: Is it up to date?**

The recording is from May 2020. Everything it teaches (calc(), CSS variables, Date, reduce) still works unchanged, but the Moment.js mention and the career path pitch in the Congratulations scrim are dated.

### Related Guides

- [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)
- [Scrimba JavaScript Courses](https://scrimbaguide.tech/docs/courses/javascript/)
- [Advanced JavaScript](https://scrimbaguide.tech/docs/courses/javascript/advanced-javascript/)