Submitted 12 days ago

Digitalbank landing page with Vue, Vite, SCSS, and TypeScript

vue, vite, sass/scss, typescript

LVL 3

Yahyaball•328

@Yahyaball

A solution to the Digital bank landing page challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

This is my first Vue project with TypeScript, and I built a fully keyboard-accessible mobile navigation from scratch — focus trap, focus restoration, aria-modal + aria-controls, and scoped inert — all without external libraries. I implemented mobile-first responsive SCSS with fluid typography (clamp()), aspect-ratio for CLS prevention, and a variable-based architecture (spacing, z-index, breakpoints). The component structure separates concerns cleanly: Header owns all nav state and a11y logic, Home owns content semantics, Footer manages external links securely.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was realizing inert on <body> disabled the close button and overlay inside the header itself — I solved it by scoping inert to a dedicated #page-content wrapper (main + footer only) and managing state reactively through Vue's lifecycle hooks. I also hit TypeScript's strict null checks with document.querySelector and switched to template refs (ref<HTMLElement | null>(null) + onMounted). A module-level document.body.classList.toggle ran only once at load; moving it into a reactive updateInert() called from every state change fixed it. Finally, I implemented focus trap (Tab cycling, Escape handling) and focus restoration (nextTick + stored reference) so keyboard users never lose context.

What specific areas of your project would you like help with?

Accessibility — Focus trap implementation (Tab cycling, Escape), aria-modal + aria-controls usage, inert scoping correctness, skip link placement.
Vue/TypeScript patterns — Composables extraction (useMediaQuery, useFocusTrap), lifecycle cleanup, nextTick for DOM-ready focus, prop/emit typing.
SCSS architecture — Variable organization (spacing, z-index, breakpoints), mixin design, fluid typography with clamp(), magic number elimination.
Responsive behavior — Mobile ↔ desktop transitions (nav visibility, inert toggling, hamburger show/hide), media query listener cleanup.
Security & semantics — External links with rel="noopener noreferrer", href="#" removal, social link aria-labels, article image alt quality.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Yahyaball’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord