Cursimax.Courses,in Spanish.
Full frontend for a Spanish-language e-learning marketplace serving Latin America. Built as a reusable templating system from a Figma design and a mock API, in HTML, SCSS, and vanilla JavaScript.
What it is.
Cursimax is a Spanish-language online course marketplace serving Latin America: 100+ courses, 500+ instructors, and a buy-then-access flow that keeps the account barrier light.
The brief wasn't "ship a homepage." It was a scalable, reusable templating system: frontend the client could keep building on, not throw away after launch.
What I did.
Sole frontend developer. The client handed over a Figma file and a mock API. Everything else (markup, styling, structure, and the reusable system underneath it) is mine.
- Designing the component model so anything appearing more than once was reusable from day one
- Translating Figma comps into production HTML, SCSS, and vanilla JavaScript
- Building a mobile-first responsive layout that holds together from 320px up
- Wiring up interactive surfaces against the mock API: navigation, carousels, course cards, newsletter form
- Cross-browser QA before handover
What they wanted.
The client didn't want a static page handover. They wanted a templating system they could keep building on (new course types, new sections, new layouts) without paying for a frontend rebuild every time scope shifted.
So the work wasn't really "build the homepage." It was build the system this homepage is the first instance of.

The approach.
The rule I gave myself: anything that appears twice gets extracted. Card, section header, breadcrumb, testimonial, course tile: if the second copy was about to be a copy-paste, it became a partial first.
- SCSS 7-1 architecture (
abstracts,base,components,layout,pages,themes,vendors), structured without leaning into the dogma where it didn't earn it - Reusable components: anything appearing 2+ times in the Figma got promoted to a partial, so future surfaces compose instead of re-building
- Mobile-first SCSS with a small token system for colour, spacing, and type
- Vanilla JS for interactive surfaces: light, dependency-free, easy for the client team to extend
- Semantic HTML so the catalogue stays crawlable and accessible by default
Tools used.
Picked for longevity and zero ops cost. A static frontend the client can host anywhere and extend without onboarding a build pipeline.
- HTML
- SCSS (Dart Sass · 7-1 architecture)
- Vanilla JavaScript
- Figma (handoff)
- Mock API (handoff)
- Git
Live, and a second engagement.
The site is live at cursimax.com, serving 100+ courses across academic, creative, and professional tracks.
The client liked the result enough to bring me back for work on their internal systems after the public site went live. The templating choices held up well enough that adding new surfaces didn't require a rewrite.

