A few months ago, I sat down with my parents to help them secure their home router.
Two hours later, I realized something uncomfortable: I couldn't explain WPA3 without losing them at "encryption handshake." I couldn't recommend a password manager without them asking "but where does it store my passwords?" And when I mentioned two-factor authentication - they thought I meant two separate passwords.
They weren't slow. The existing guides were just bad.
Everything online was either written for sysadmins or dumbed down to the point of being useless. Nothing in between. Nothing in Ukrainian. Nothing interactive.
So I built it myself.
What I Actually Built
Digital Abetka ("Abetka" means "Alphabet" in Ukrainian) is a free, bilingual (Ukrainian/English) cybersecurity guide structured as 12 progressive steps - from browser hardening to AI prompt engineering.
The core idea: every step has an embedded AI assistant that users can query in plain language. Confused about what "DNS over HTTPS" means? Ask the assistant right there, without leaving the page.
Here's the full scope:
- 12 structured steps covering browser setup, backups, deepfake awareness, VPN/DNS, Wi-Fi hardening, password managers, Passkeys, Zero Trust hygiene, system diagnostics, AI prompting, visual AI, and automation
- Embedded AI tools per step: phishing analyzer, password generator, system diagnostics assistant, prompt optimizer
- Glossary of 30+ security terms written for non-technical readers
- Interactive checklist for auditing your own security posture
- Bilingual - full Ukrainian and English content
The Problem With Most Security Guides
Let me be honest about what frustrated me most when researching existing resources.
They assume context you don't have. A guide that says "enable WPA3 on your router" without explaining where to find that setting, what happens if your router doesn't support it, or why WPA2 is still okay in some cases - that guide is useless to 80% of its readers.
They're static. You read a step, you get confused, you open a new tab to search for clarification, you fall down a rabbit hole, you forget what you were doing. The original guide is abandoned.
They're outdated the moment they're published. Threats evolve. The phishing emails of 2020 look nothing like the AI-personalized attacks of 2026, where scammers use voice cloning from 3 seconds of your Instagram Story audio.
How I Structured It Differently
Answer Boxes First
Every step starts with a "Quick Answer" block - a 2-3 sentence direct response to the step's core question. This was inspired by how AI search engines (Perplexity, ChatGPT Search) extract content: they look for dense, direct answers, not preamble.
Example for the Wi-Fi step:
Quick Answer: Your home router is the gateway to every device in your home. Changing the default admin password, enabling WPA3, disabling UPnP, and creating a separate guest network for smart home devices closes the four most common entry points attackers exploit.
Progressive Disclosure via Accordion
Each step lives in an accordion. The headline is scannable. The detail is one click away. Users who already know the basics can skip. Users who need depth can expand.
This wasn't just a UX decision - it's also how Google reads structured content. Each accordion item maps to an HowToStep in the JSON-LD schema.
Embedded AI Per Step
Instead of linking out to ChatGPT and hoping users come back, I embedded AI assistants directly into each step using the Anthropic API.
The phishing analyzer in Step 3 lets you paste suspicious text and get an instant breakdown of red flags. The system diagnostics tool in Step 9 takes your error code and returns a plain-language explanation plus resolution steps.
The key design decision: each assistant has a scoped system prompt. It knows which step it's in, what the user is likely struggling with, and it answers within that context. It doesn't drift into unrelated topics.
The SEO/GEO Rebuild
After launching the first version, I had clean Google Search Console indexing - no errors, no warnings - but zero visibility. Nobody found it. No AI citations. No featured snippets.
I spent two weeks rebuilding the technical layer:
Schema.org markup - @graph structure combining WebSite, Article, BreadcrumbList, FAQPage, and HowTo with all 12 steps. This is what tells Google and AI crawlers "this is a structured guide, not a wall of text."
E-E-A-T signals - added visible author block, publication and modification dates in both <time> tags and JSON-LD, and external links to authoritative sources (NIST, CISA, Have I Been Pwned, Wi-Fi Alliance).
GEO optimization - Generative Engine Optimization is the 2025-2026 term for making your content citation-friendly for AI systems. The format AI prefers: numbered action lists, comparison tables, direct definitions, and stats with sources. I rewrote most prose sections into these formats.
Tone consistency - the original guide mixed formal Ukrainian ("Π²ΠΈ") with informal ("ΡΠΈ") across different sections. AI crawlers assess consistency as a trust signal. I ran a full audit and unified the voice across all 9 auxiliary pages.
What I'd Do Differently
Start with Schema, not content. I wrote 12,000 words before adding a single line of structured data. That was backwards. Schema takes 2 hours and immediately unlocks rich results.
Build the glossary on day one. The glossary became one of the most-linked sections because AI systems love pulling clean definitions. It should have been the foundation, not an afterthought.
Don't underestimate auxiliary pages. I spent 90% of my effort on the main index.html and left pages like for-whom.html and faq.html with broken canonical URLs, missing meta descriptions, and inconsistent tone. Each auxiliary page is its own SEO surface.
The Stack
Since this is Dev.to - here's what's under the hood:
- Pure HTML/CSS/JS - no framework. Bootstrap 5 for layout, Font Awesome for icons.
- Google Gemini API (gemini-3.5-flash) for embedded AI assistants
- JSON-LD for structured data - hand-written, no plugin
- Google Search Console for indexing and performance monitoring
- Static hosting, no backend beyond the AI API calls
The deliberate choice to avoid a framework was about longevity. A vanilla HTML guide will still render correctly in 10 years. A React app with 200 npm dependencies probably won't.
Try It
The guide is live, free, and bilingual:
π digital-abetka.pp.ua
If you have non-technical family members who need a practical security starting point - this is built for them. If you're building something similar and want to discuss the AI integration approach, Schema strategy, or GEO optimization - I'm happy to go deeper in the comments.
Built in Ukraine. All content is free. No ads, no paywall, no newsletter signup.
Top comments (0)