The challenge
Expand without losing cohesion.
The work needed to fit an established Cyfrin website while supporting two sub-brands with their own audiences and visual character. The scope grew across several months, from targeted page improvements to new navigation, content discovery, educational, and conversion experiences.
Webflow remained the content and publishing foundation. The challenge was to preserve that editor-friendly workflow while adding interactions and logic that went beyond the platform’s standard components.
The approach
Native where practical. Custom where valuable.
Reusable Webflow structures kept content manageable, while carefully chosen tools and custom code filled capability gaps. Each feature was shaped around the brand and the job a visitor was trying to complete.
- Custom mega menus created richer pathways across the three brands.
- Webflow CMS collections powered FAQs, competitions, blog content, glossary entries, and quiz results.
- The blog combined Jetboost with custom code for filtering and pagination.
- The more complex glossary combined Jetboost, custom code, and Finsweet Attributes v1.
- Custom layouts and interactions gave Updraft’s education experience its own rhythm.
Under the hood
The custom work behind the interface.
These features went beyond assembling pages. Each one joined Webflow’s visual editing and CMS tools with an additional layer of behaviour built for Cyfrin’s content and users.
Filtering two large CMS libraries
The blog used Jetboost and custom code to give visitors responsive category filtering and custom pagination while Webflow CMS remained the source of its content.
The glossary was the more challenging build. It combined Jetboost, custom code, and Finsweet Attributes v1 to coordinate search, alphabetical navigation, clear controls, and a large CMS-driven collection in one purpose-built reference experience.
- Blog: Jetboost and custom code
- Glossary: Jetboost, custom code, and Finsweet Attributes v1
- Both remained manageable through Webflow CMS
Turning a Webflow form into a quiz
The Updraft assessment began as a Webflow form, then gained the behaviour of a multi-step application. Custom code managed progress, navigation, answer values, and a running score without exposing that complexity to the learner.
After submission, the score was mapped to course recommendations stored in the CMS. That separated the assessment logic from the course content, allowing the recommendation cards to remain part of Updraft’s normal content workflow.
- Answers contributed weighted point values
- Progress and question states were handled in the interface
- CMS entries supplied the final course recommendations
Reusable content, distinct brands
Cyfrin, CodeHawks, and Updraft shared a platform but needed to feel purposeful in their own contexts. Reusable Webflow patterns provided a maintainable base, while brand-specific layouts, navigation, and styling kept the experience from feeling templated.
CMS-powered FAQs and competitions let the team update recurring content without rebuilding layouts. Custom mega menus then connected deeper destinations with richer previews than a standard dropdown could provide.
- Shared implementation principles across three brands
- Brand-specific heroes, bentos, navigation, and footers
- Editor-friendly recurring content through the CMS
01 — Cyfrin
Making a deep content library easier to explore.
Custom filtering and pagination helped visitors move through the CMS-powered blog. The glossary combined search, alphabetical navigation, Jetboost, custom code, and Finsweet Attributes v1 into a purpose-built reference tool.
CMS entries appear in alphabetical groups and can be narrowed using visitor-entered search text, letter selections, categories, or a combination of filters.
Visitors can filter posts by category, entered search text, or both. Categories are also CMS-powered: editors control them alongside their content, and the filtering interface automatically incorporates new categories.
Pagination displays up to six page numbers and dynamically updates as visitors move through the results. An ellipsis appears only when needed, while custom Previous and Next controls automatically disable when no earlier or later page is available.
Right-clicking the Cyfrin logo opens a purpose-built menu with shortcuts to copy the logo or wordmark as SVG, view the brand guidelines, or return home. The contextual interaction and menu behaviour were created entirely with custom code.
02 — CodeHawks
A dedicated home for competitive audits.
New CodeHawks sections brought its bold identity into a flexible Webflow build. A custom mega menu, CMS-powered competitions and FAQ content, and a tailored footer formed a complete branded journey.
Powered by a combination of CMS-managed content and static links, giving editors flexibility without sacrificing deliberate navigation paths.
Editors can add, remove, or revise questions and answers in the CMS. Published changes automatically appear in the FAQ without requiring layout changes or developer involvement.
03 — Updraft
Turning a course catalogue into a guided journey.
Custom bento layouts made learning paths and marketing content easier to scan. The most involved feature transformed a Webflow form into a multi-step assessment: answers accumulated points behind the scenes, then matched each learner with CMS-managed course recommendations.
Built from a highly modified Webflow form, this quiz guides visitors through a series of questions to determine which course is right for them.
As visitors answer questions, a progress bar shows how far they have come and custom selection states make their chosen answers immediately clear.
After submission, the quiz calculates a score behind the scenes and translates it into one or more recommended starting courses. Because the course results are CMS-powered, editors can change the recommendations without developer involvement.
The outcome
A more capable Webflow ecosystem.
Cyfrin gained a set of tailored, maintainable experiences across its core website and sub-brands—combining CMS ownership for the content team with custom functionality for visitors.