diff --git a/frontend/app/api/questions/[category]/route.ts b/frontend/app/api/questions/[category]/route.ts
index db59c3e7..3cac95ba 100644
--- a/frontend/app/api/questions/[category]/route.ts
+++ b/frontend/app/api/questions/[category]/route.ts
@@ -1,72 +1,78 @@
 import { NextResponse } from 'next/server';
 import { db } from '@/db';
-import { questions, categories } from '@/db/schema';
+import { questions } from '@/db/schema';
 import { eq, sql, and, ilike } from 'drizzle-orm';
 
 const DEFAULT_PAGE = 1;
-const DEFAULT_LIMIT = 10;
+const DEFAULT_LIMIT = 20;
+const DEFAULT_LOCALE = 'uk';
 
 export async function GET(
   req: Request,
   ctx: { params: Promise<{ category: string }> }
 ) {
-  const { category } = await ctx.params;
-  const { searchParams } = new URL(req.url);
+  try {
+    const { category } = await ctx.params;
+    const { searchParams } = new URL(req.url);
 
-  const page = Math.max(
-    1,
-    parseInt(searchParams.get('page') || String(DEFAULT_PAGE), 10)
-  );
-  const limit = Math.max(
-    1,
-    Math.min(
+    const page = Math.max(1, Number(searchParams.get('page') ?? DEFAULT_PAGE));
+    const limit = Math.min(
       50,
-      parseInt(searchParams.get('limit') || String(DEFAULT_LIMIT), 10)
-    )
-  );
-  const search = searchParams.get('search')?.trim() || '';
-  const offset = (page - 1) * limit;
+      Math.max(1, Number(searchParams.get('limit') ?? DEFAULT_LIMIT))
+    );
+    const offset = (page - 1) * limit;
 
-  const cat = await db
-    .select()
-    .from(categories)
-    .where(eq(categories.name, category))
-    .limit(1);
+    const locale =
+      searchParams.get('locale') ||
+      req.headers.get('x-locale') ||
+      DEFAULT_LOCALE;
 
-  if (!cat.length) {
-    return NextResponse.json({
-      items: [],
-      total: 0,
-      page,
-      totalPages: 0,
-    });
-  }
+    const search = searchParams.get('search')?.trim();
+
+    const baseCondition = and(
+      eq(questions.categorySlug, category.toLowerCase()),
+      eq(questions.locale, locale)
+    );
 
-  const baseCondition = eq(questions.categoryId, cat[0].id);
-  const whereCondition = search
-    ? and(baseCondition, ilike(questions.question, `%${search}%`))
-    : baseCondition;
+    const whereCondition = search
+      ? and(baseCondition, ilike(questions.question, `%${search}%`))
+      : baseCondition;
 
-  const [countResult] = await db
-    .select({ count: sql<number>`count(*)` })
-    .from(questions)
-    .where(whereCondition);
+    const [{ count }] = await db
+      .select({ count: sql<number>`count(*)` })
+      .from(questions)
+      .where(whereCondition);
 
-  const total = Number(countResult.count);
-  const totalPages = Math.ceil(total / limit);
+    const total = Number(count);
+    const totalPages = Math.ceil(total / limit);
 
-  const items = await db
-    .select()
-    .from(questions)
-    .where(whereCondition)
-    .orderBy(questions.id)
-    .limit(limit)
-    .offset(offset);
+    const items = await db
+      .select()
+      .from(questions)
+      .where(whereCondition)
+      .orderBy(questions.sortOrder)
+      .limit(limit)
+      .offset(offset);
 
-  return NextResponse.json({
-    items,
-    total,
-    page,
-    totalPages,
-  });
+    return NextResponse.json({
+      items,
+      total,
+      page,
+      totalPages,
+      locale,
+    });
+  } catch (error) {
+    console.error('[GET /api/questions/:category]', error);
+
+    return NextResponse.json(
+      {
+        items: [],
+        total: 0,
+        page: 1,
+        totalPages: 0,
+        locale: DEFAULT_LOCALE,
+      },
+      { status: 500 }
+    );
+  }
 }
diff --git a/frontend/components/q&a/TabsSection.tsx b/frontend/components/q&a/TabsSection.tsx
index bd5a251a..7d1fc716 100644
--- a/frontend/components/q&a/TabsSection.tsx
+++ b/frontend/components/q&a/TabsSection.tsx
@@ -1,10 +1,11 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, useParams } from 'next/navigation';
 import { useRouter } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
 import { Search, X } from 'lucide-react';
+
 import AccordionList from '@/components/q&a/AccordionList';
 import { Pagination } from '@/components/q&a/Pagination';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
@@ -24,8 +25,11 @@ export default function TabsSection() {
   const t = useTranslations('qa');
   const router = useRouter();
   const searchParams = useSearchParams();
+  const params = useParams();
+
+  const locale = params.locale as string;
 
-  const pageFromUrl = parseInt(searchParams.get('page') || '1', 10);
+  const pageFromUrl = Number(searchParams.get('page') || 1);
   const categoryFromUrl = searchParams.get('category') || DEFAULT_CATEGORY;
   const searchFromUrl = searchParams.get('search') || '';
 
@@ -40,21 +44,19 @@ export default function TabsSection() {
   const [isLoading, setIsLoading] = useState(true);
 
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
+  const mountedRef = useRef(false);
 
   const updateUrl = useCallback(
     (category: string, page: number, search: string) => {
       const params = new URLSearchParams();
-      if (category !== DEFAULT_CATEGORY) {
-        params.set('category', category);
-      }
-      if (page > 1) {
-        params.set('page', String(page));
-      }
-      if (search) {
-        params.set('search', search);
-      }
+
+      if (category !== DEFAULT_CATEGORY) params.set('category', category);
+      if (page > 1) params.set('page', String(page));
+      if (search) params.set('search', search);
+
       const queryString = params.toString();
-      router.push(`/q&a${queryString ? `?${queryString}` : ''}`, {
+
+      router.replace(`/q&a${queryString ? `?${queryString}` : ''}`, {
         scroll: false,
       });
     },
@@ -62,10 +64,13 @@ export default function TabsSection() {
   );
 
   useEffect(() => {
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
     }
 
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+
     debounceRef.current = setTimeout(() => {
       setDebouncedSearch(searchQuery);
       setCurrentPage(1);
@@ -73,23 +78,25 @@ export default function TabsSection() {
     }, DEBOUNCE_MS);
 
     return () => {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
+      if (debounceRef.current) clearTimeout(debounceRef.current);
     };
-  }, [searchQuery]);
+  }, [searchQuery, active, updateUrl]);
 
   useEffect(() => {
     async function load() {
       setIsLoading(true);
+
       try {
         const searchParam = debouncedSearch
           ? `&search=${encodeURIComponent(debouncedSearch)}`
           : '';
+
         const res = await fetch(
-          `/api/questions/${active}?page=${currentPage}&limit=10${searchParam}`
+          `/api/questions/${active}?page=${currentPage}&limit=10&locale=${locale}${searchParam}`
         );
+
         const data: PaginatedResponse = await res.json();
+
         setItems(data.items);
         setTotalPages(data.totalPages);
       } catch (error) {
@@ -100,8 +107,9 @@ export default function TabsSection() {
         setIsLoading(false);
       }
     }
+
     load();
-  }, [active, currentPage, debouncedSearch]);
+  }, [active, currentPage, debouncedSearch, locale]);
 
   const handleCategoryChange = (category: string) => {
     setActive(category);
@@ -117,46 +125,35 @@ export default function TabsSection() {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-  };
-
-  const handleClearSearch = () => {
-    setSearchQuery('');
-    setDebouncedSearch('');
-    setCurrentPage(1);
-    updateUrl(active, 1, '');
-  };
-
   return (
     <div className="w-full">
       <div className="relative mb-6">
-        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-          <Search className="h-5 w-5 text-gray-400" />
-        </div>
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+
         <input
           type="text"
           value={searchQuery}
-          onChange={handleSearchChange}
+          onChange={e => setSearchQuery(e.target.value)}
           placeholder={t('searchPlaceholder')}
-          className="block w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+          className="w-full pl-10 pr-10 py-3 border rounded-lg"
         />
+
         {searchQuery && (
           <button
-            onClick={handleClearSearch}
-            className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-            aria-label={t('clearSearch')}
+            onClick={() => {
+              setSearchQuery('');
+              setDebouncedSearch('');
+              setCurrentPage(1);
+              updateUrl(active, 1, '');
+            }}
+            className="absolute right-3 top-1/2 -translate-y-1/2"
           >
             <X className="h-5 w-5" />
           </button>
         )}
       </div>
 
-      <Tabs
-        value={active}
-        onValueChange={handleCategoryChange}
-        className="w-full"
-      >
+      <Tabs value={active} onValueChange={handleCategoryChange}>
         <TabsList className="grid grid-cols-7 mb-6">
           {categoryNames.map(c => (
             <TabsTrigger key={c} value={c}>
@@ -169,12 +166,12 @@ export default function TabsSection() {
           <TabsContent key={c} value={c}>
             {isLoading ? (
               <div className="flex justify-center py-12">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+                <div className="animate-spin h-8 w-8 border-b-2" />
               </div>
-            ) : items.length > 0 ? (
+            ) : items.length ? (
               <AccordionList items={items} />
             ) : (
-              <p className="text-center py-12 text-gray-500 dark:text-gray-400">
+              <p className="text-center py-12">
                 {debouncedSearch
                   ? t('noResults', { query: debouncedSearch })
                   : t('noQuestions')}
diff --git a/frontend/db/schema/categories.ts b/frontend/db/schema/categories.ts
index b2390ac0..47f977c6 100644
--- a/frontend/db/schema/categories.ts
+++ b/frontend/db/schema/categories.ts
@@ -1,27 +1,14 @@
-import { pgTable, uuid, text, jsonb } from 'drizzle-orm/pg-core';
-import { relations } from 'drizzle-orm';
-
-export const categories = pgTable('categories', {
-  id: uuid('id').defaultRandom().primaryKey(),
-  name: text('name').notNull().unique(),
-});
-
-export const questions = pgTable('questions', {
-  id: uuid('id').defaultRandom().primaryKey(),
-  question: text('question').notNull(),
-  answerBlocks: jsonb('answer_blocks').notNull(),
-  categoryId: uuid('category_id')
-    .notNull()
-    .references(() => categories.id, { onDelete: 'cascade' }),
-});
-
-export const categoriesRelations = relations(categories, ({ many }) => ({
-  questions: many(questions),
-}));
-
-export const questionsRelations = relations(questions, ({ one }) => ({
-  category: one(categories, {
-    fields: [questions.categoryId],
-    references: [categories.id],
-  }),
-}));
+import { pgTable, uuid, varchar, text, unique } from 'drizzle-orm/pg-core';
+
+export const categories = pgTable(
+  'categories',
+  {
+    id: uuid('id').defaultRandom().primaryKey(),
+    slug: varchar('slug', { length: 50 }).notNull(),
+    locale: varchar('locale', { length: 5 }).notNull(),
+    title: text('title').notNull(),
+  },
+  table => [
+    unique('categories_slug_locale_unique').on(table.slug, table.locale),
+  ]
+);
diff --git a/frontend/db/schema/index.ts b/frontend/db/schema/index.ts
index 17abe767..18f6cdb8 100644
--- a/frontend/db/schema/index.ts
+++ b/frontend/db/schema/index.ts
@@ -1,5 +1,6 @@
 export * from './categories';
+export * from './questions';
 export * from './quiz';
 export * from './users';
 export * from './points';
-export * from "./shop";
\ No newline at end of file
+export * from './shop';
diff --git a/frontend/db/schema/questions.ts b/frontend/db/schema/questions.ts
new file mode 100644
index 00000000..fe3609de
--- /dev/null
+++ b/frontend/db/schema/questions.ts
@@ -0,0 +1,28 @@
+import {
+  pgTable,
+  uuid,
+  varchar,
+  text,
+  jsonb,
+  integer,
+  unique,
+} from 'drizzle-orm/pg-core';
+
+export const questions = pgTable(
+  'questions',
+  {
+    id: uuid('id').defaultRandom().primaryKey(),
+    categorySlug: varchar('category_slug', { length: 50 }).notNull(),
+    locale: varchar('locale', { length: 5 }).notNull(),
+    question: text('question').notNull(),
+    answerBlocks: jsonb('answer_blocks').notNull(),
+    sortOrder: integer('sort_order').default(0),
+  },
+  table => [
+    unique('questions_category_locale_order_unique').on(
+      table.categorySlug,
+      table.locale,
+      table.sortOrder
+    ),
+  ]
+);
diff --git a/frontend/db/seed-categories.ts b/frontend/db/seed-categories.ts
index 566ec395..4779fba6 100644
--- a/frontend/db/seed-categories.ts
+++ b/frontend/db/seed-categories.ts
@@ -1,15 +1,28 @@
 import 'dotenv/config';
-
 import { db } from './index';
 import { categories } from './schema';
 import { categoryNames } from '../data/category';
+import { slugify } from '../utils/slugify';
+
+const LOCALES = ['en', 'pl', 'uk'] as const;
+
+async function seedCategories() {
+  const rows = categoryNames.flatMap(name => {
+    const slug = slugify(name);
+
+    return LOCALES.map(locale => ({
+      slug,
+      locale,
+      title: name,
+    }));
+  });
 
-async function categoriesList() {
-  for (const name of categoryNames) {
-    await db.insert(categories).values({ name });
-  }
+  await db.insert(categories).values(rows).onConflictDoNothing();
 
-  console.log('Categories seeded!');
+  console.log('✅ Categories seeded!');
 }
 
-categoriesList();
+seedCategories().catch(err => {
+  console.error('❌ Seed failed...', err);
+  process.exit(1);
+});
diff --git a/frontend/db/seed-questions.ts b/frontend/db/seed-questions.ts
new file mode 100644
index 00000000..a0aeb030
--- /dev/null
+++ b/frontend/db/seed-questions.ts
@@ -0,0 +1,44 @@
+import 'dotenv/config';
+import { db } from './index';
+import { questions } from './schema';
+import rawData from '../parse/questions.json';
+
+type RawQuestion = {
+  category: string;
+  order?: number;
+  translations: Record<
+    string,
+    {
+      question: string;
+      answerBlocks: unknown;
+    }
+  >;
+};
+
+const data = Array.isArray(rawData) ? (rawData as RawQuestion[]) : [];
+
+async function seedQuestions() {
+  if (!data.length) {
+    console.log('No questions to seed — skipping.');
+    return;
+  }
+
+  const rows = data.flatMap(q =>
+    Object.entries(q.translations).map(([locale, content]) => ({
+      categorySlug: q.category,
+      locale,
+      sortOrder: q.order ?? 0,
+      question: content.question,
+      answerBlocks: content.answerBlocks,
+    }))
+  );
+
+  await db.insert(questions).values(rows).onConflictDoNothing();
+
+  console.log('✅ Questions seeded!');
+}
+
+seedQuestions().catch(err => {
+  console.error('❌ Seed failed...', err);
+  process.exit(1);
+});
diff --git a/frontend/db/seed.ts b/frontend/db/seed.ts
deleted file mode 100644
index fcf80804..00000000
--- a/frontend/db/seed.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import 'dotenv/config';
-
-import { db } from './index';
-import { categories, questions } from './schema';
-import { eq } from 'drizzle-orm';
-// ! Reset sequense to 1
-// import { sql } from 'drizzle-orm';
-
-import rawData from '../parse/questions.json';
-
-type QuestionSeed = {
-  category: string;
-  question: string;
-  answerBlocks: unknown;
-};
-
-const data = (Array.isArray(rawData) ? rawData : []) as QuestionSeed[];
-
-async function main() {
-  // ! Reset sequense to 1
-  // await db.delete(questions);
-  // await db.execute(sql`ALTER SEQUENCE questions_id_seq RESTART WITH 1`);
-  // console.log('Table cleared, sequence reset to 1');
-
-  if (!data.length) {
-    console.log('No questions to seed — skipping.');
-    return;
-  }
-
-  for (const q of data) {
-    const category = await db
-      .select()
-      .from(categories)
-      .where(eq(categories.name, q.category))
-      .limit(1);
-
-    if (!category.length) {
-      console.log('Category not found:', q.category);
-      continue;
-    }
-
-    await db.insert(questions).values({
-      question: q.question,
-      answerBlocks: q.answerBlocks,
-      categoryId: category[0].id,
-    });
-  }
-
-  console.log('Questions seeded!');
-}
-
-main();
diff --git a/frontend/drizzle/schema.ts b/frontend/drizzle/schema.ts
index 49fa45a2..a9d29eba 100644
--- a/frontend/drizzle/schema.ts
+++ b/frontend/drizzle/schema.ts
@@ -1,187 +1,295 @@
-import { pgTable, unique, serial, text, foreignKey, jsonb, integer, index, uuid, boolean, varchar, timestamp, numeric, primaryKey } from "drizzle-orm/pg-core"
-import { sql } from "drizzle-orm"
+import {
+  pgTable,
+  unique,
+  serial,
+  text,
+  foreignKey,
+  jsonb,
+  integer,
+  index,
+  uuid,
+  boolean,
+  varchar,
+  timestamp,
+  numeric,
+  primaryKey,
+} from 'drizzle-orm/pg-core';
+import { sql } from 'drizzle-orm';
 
+export const categories = pgTable(
+  'categories',
+  {
+    id: uuid('id').defaultRandom().primaryKey(),
+    slug: varchar('slug', { length: 50 }).notNull(),
+    locale: varchar('locale', { length: 5 }).notNull(),
+    title: text('title').notNull(),
+  },
+  table => [
+    unique('categories_slug_locale_unique').on(table.slug, table.locale),
+  ]
+);
 
+export const questions = pgTable(
+  'questions',
+  {
+    id: uuid('id').defaultRandom().primaryKey().notNull(),
+    question: text('question').notNull(),
+    answerBlocks: jsonb('answer_blocks').notNull(),
+    categoryId: uuid('category_id').notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.categoryId],
+      foreignColumns: [categories.id],
+      name: 'questions_category_id_categories_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const categories = pgTable("categories", {
-	id: serial().primaryKey().notNull(),
-	name: text().notNull(),
-}, (table) => [
-	unique("categories_name_unique").on(table.name),
-]);
+export const quizAnswers = pgTable(
+  'quiz_answers',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    quizQuestionId: uuid('quiz_question_id').notNull(),
+    displayOrder: integer('display_order').notNull(),
+    isCorrect: boolean('is_correct').default(false).notNull(),
+  },
+  table => [
+    index('quiz_answers_question_display_order_idx').using(
+      'btree',
+      table.quizQuestionId.asc().nullsLast().op('int4_ops'),
+      table.displayOrder.asc().nullsLast().op('int4_ops')
+    ),
+    foreignKey({
+      columns: [table.quizQuestionId],
+      foreignColumns: [quizQuestions.id],
+      name: 'quiz_answers_quiz_question_id_quiz_questions_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const questions = pgTable("questions", {
-	id: serial().primaryKey().notNull(),
-	question: text().notNull(),
-	answerBlocks: jsonb("answer_blocks").notNull(),
-	categoryId: integer("category_id").notNull(),
-}, (table) => [
-	foreignKey({
-			columns: [table.categoryId],
-			foreignColumns: [categories.id],
-			name: "questions_category_id_categories_id_fk"
-		}).onDelete("cascade"),
-]);
+export const quizQuestions = pgTable(
+  'quiz_questions',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    quizId: uuid('quiz_id').notNull(),
+    displayOrder: integer('display_order').notNull(),
+    sourceQuestionId: uuid('source_question_id'),
+    difficulty: varchar({ length: 20 }).default('medium'),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    index('quiz_questions_quiz_display_order_idx').using(
+      'btree',
+      table.quizId.asc().nullsLast().op('int4_ops'),
+      table.displayOrder.asc().nullsLast().op('int4_ops')
+    ),
+    foreignKey({
+      columns: [table.quizId],
+      foreignColumns: [quizzes.id],
+      name: 'quiz_questions_quiz_id_quizzes_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const quizAnswers = pgTable("quiz_answers", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	quizQuestionId: uuid("quiz_question_id").notNull(),
-	displayOrder: integer("display_order").notNull(),
-	isCorrect: boolean("is_correct").default(false).notNull(),
-}, (table) => [
-	index("quiz_answers_question_display_order_idx").using("btree", table.quizQuestionId.asc().nullsLast().op("int4_ops"), table.displayOrder.asc().nullsLast().op("int4_ops")),
-	foreignKey({
-			columns: [table.quizQuestionId],
-			foreignColumns: [quizQuestions.id],
-			name: "quiz_answers_quiz_question_id_quiz_questions_id_fk"
-		}).onDelete("cascade"),
-]);
+export const quizAttemptAnswers = pgTable(
+  'quiz_attempt_answers',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    attemptId: uuid('attempt_id').notNull(),
+    quizQuestionId: uuid('quiz_question_id').notNull(),
+    selectedAnswerId: uuid('selected_answer_id'),
+    isCorrect: boolean('is_correct').notNull(),
+    answeredAt: timestamp('answered_at', { withTimezone: true, mode: 'string' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    index('quiz_attempt_answers_attempt_idx').using(
+      'btree',
+      table.attemptId.asc().nullsLast().op('uuid_ops')
+    ),
+    foreignKey({
+      columns: [table.attemptId],
+      foreignColumns: [quizAttempts.id],
+      name: 'quiz_attempt_answers_attempt_id_quiz_attempts_id_fk',
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.quizQuestionId],
+      foreignColumns: [quizQuestions.id],
+      name: 'quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk',
+    }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.selectedAnswerId],
+      foreignColumns: [quizAnswers.id],
+      name: 'quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk',
+    }).onDelete('set null'),
+  ]
+);
 
-export const quizQuestions = pgTable("quiz_questions", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	quizId: uuid("quiz_id").notNull(),
-	displayOrder: integer("display_order").notNull(),
-	sourceQuestionId: uuid("source_question_id"),
-	difficulty: varchar({ length: 20 }).default('medium'),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-}, (table) => [
-	index("quiz_questions_quiz_display_order_idx").using("btree", table.quizId.asc().nullsLast().op("int4_ops"), table.displayOrder.asc().nullsLast().op("int4_ops")),
-	foreignKey({
-			columns: [table.quizId],
-			foreignColumns: [quizzes.id],
-			name: "quiz_questions_quiz_id_quizzes_id_fk"
-		}).onDelete("cascade"),
-]);
+export const quizzes = pgTable(
+  'quizzes',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    topicId: uuid('topic_id').notNull(),
+    slug: varchar({ length: 100 }).notNull(),
+    displayOrder: integer('display_order').default(0).notNull(),
+    questionsCount: integer('questions_count').default(10).notNull(),
+    timeLimitSeconds: integer('time_limit_seconds'),
+    isActive: boolean('is_active').default(true).notNull(),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' })
+      .defaultNow()
+      .notNull(),
+    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    unique('quizzes_topic_id_slug_unique').on(table.topicId, table.slug),
+  ]
+);
 
-export const quizAttemptAnswers = pgTable("quiz_attempt_answers", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	attemptId: uuid("attempt_id").notNull(),
-	quizQuestionId: uuid("quiz_question_id").notNull(),
-	selectedAnswerId: uuid("selected_answer_id"),
-	isCorrect: boolean("is_correct").notNull(),
-	answeredAt: timestamp("answered_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-}, (table) => [
-	index("quiz_attempt_answers_attempt_idx").using("btree", table.attemptId.asc().nullsLast().op("uuid_ops")),
-	foreignKey({
-			columns: [table.attemptId],
-			foreignColumns: [quizAttempts.id],
-			name: "quiz_attempt_answers_attempt_id_quiz_attempts_id_fk"
-		}).onDelete("cascade"),
-	foreignKey({
-			columns: [table.quizQuestionId],
-			foreignColumns: [quizQuestions.id],
-			name: "quiz_attempt_answers_quiz_question_id_quiz_questions_id_fk"
-		}).onDelete("cascade"),
-	foreignKey({
-			columns: [table.selectedAnswerId],
-			foreignColumns: [quizAnswers.id],
-			name: "quiz_attempt_answers_selected_answer_id_quiz_answers_id_fk"
-		}).onDelete("set null"),
-]);
+export const quizAttempts = pgTable(
+  'quiz_attempts',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    userId: text('user_id').notNull(),
+    quizId: uuid('quiz_id').notNull(),
+    score: integer().notNull(),
+    totalQuestions: integer('total_questions').notNull(),
+    percentage: numeric({ precision: 5, scale: 2 }).notNull(),
+    timeSpentSeconds: integer('time_spent_seconds'),
+    integrityScore: integer('integrity_score').default(100),
+    metadata: jsonb().default({}),
+    startedAt: timestamp('started_at', { withTimezone: true, mode: 'string' })
+      .defaultNow()
+      .notNull(),
+    completedAt: timestamp('completed_at', {
+      withTimezone: true,
+      mode: 'string',
+    })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    index('quiz_attempts_quiz_integrity_score_idx').using(
+      'btree',
+      table.quizId.asc().nullsLast().op('uuid_ops'),
+      table.integrityScore.asc().nullsLast().op('int4_ops')
+    ),
+    index('quiz_attempts_quiz_percentage_completed_at_idx').using(
+      'btree',
+      table.quizId.asc().nullsLast().op('numeric_ops'),
+      table.percentage.asc().nullsLast().op('numeric_ops'),
+      table.completedAt.asc().nullsLast().op('uuid_ops')
+    ),
+    index('quiz_attempts_user_completed_at_idx').using(
+      'btree',
+      table.userId.asc().nullsLast().op('text_ops'),
+      table.completedAt.asc().nullsLast().op('text_ops')
+    ),
+    foreignKey({
+      columns: [table.quizId],
+      foreignColumns: [quizzes.id],
+      name: 'quiz_attempts_quiz_id_quizzes_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const quizzes = pgTable("quizzes", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	topicId: uuid("topic_id").notNull(),
-	slug: varchar({ length: 100 }).notNull(),
-	displayOrder: integer("display_order").default(0).notNull(),
-	questionsCount: integer("questions_count").default(10).notNull(),
-	timeLimitSeconds: integer("time_limit_seconds"),
-	isActive: boolean("is_active").default(true).notNull(),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-}, (table) => [
-	unique("quizzes_topic_id_slug_unique").on(table.topicId, table.slug),
-]);
+export const user = pgTable('user', {
+  id: text('id').primaryKey().notNull(),
+  name: text(),
+  email: text().notNull(),
+  emailVerified: timestamp('email_verified', { mode: 'string' }),
+  image: text(),
+  role: text().default('user'),
+  points: integer().default(0),
+  preferredLocale: varchar('preferred_locale', { length: 5 }).default('en'),
+  createdAt: timestamp('created_at', { mode: 'string' }).defaultNow().notNull(),
+});
 
-export const quizAttempts = pgTable("quiz_attempts", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	userId: text("user_id").notNull(),
-	quizId: uuid("quiz_id").notNull(),
-	score: integer().notNull(),
-	totalQuestions: integer("total_questions").notNull(),
-	percentage: numeric({ precision: 5, scale:  2 }).notNull(),
-	timeSpentSeconds: integer("time_spent_seconds"),
-	integrityScore: integer("integrity_score").default(100),
-	metadata: jsonb().default({}),
-	startedAt: timestamp("started_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-	completedAt: timestamp("completed_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-}, (table) => [
-	index("quiz_attempts_quiz_integrity_score_idx").using("btree", table.quizId.asc().nullsLast().op("uuid_ops"), table.integrityScore.asc().nullsLast().op("int4_ops")),
-	index("quiz_attempts_quiz_percentage_completed_at_idx").using("btree", table.quizId.asc().nullsLast().op("numeric_ops"), table.percentage.asc().nullsLast().op("numeric_ops"), table.completedAt.asc().nullsLast().op("uuid_ops")),
-	index("quiz_attempts_user_completed_at_idx").using("btree", table.userId.asc().nullsLast().op("text_ops"), table.completedAt.asc().nullsLast().op("text_ops")),
-	foreignKey({
-			columns: [table.quizId],
-			foreignColumns: [quizzes.id],
-			name: "quiz_attempts_quiz_id_quizzes_id_fk"
-		}).onDelete("cascade"),
-]);
+export const pointTransactions = pgTable(
+  'point_transactions',
+  {
+    id: uuid().defaultRandom().primaryKey().notNull(),
+    userId: text('user_id').notNull(),
+    points: integer().default(0).notNull(),
+    source: varchar({ length: 50 }).default('quiz').notNull(),
+    sourceId: uuid('source_id'),
+    metadata: jsonb().default({}),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' })
+      .defaultNow()
+      .notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.userId],
+      foreignColumns: [user.id],
+      name: 'point_transactions_user_id_user_id_fk',
+    }).onDelete('cascade'),
+  ]
+);
 
-export const user = pgTable("user", {
-	id: text().primaryKey().notNull(),
-	name: text(),
-	email: text().notNull(),
-	emailVerified: timestamp({ mode: 'string' }),
-	image: text(),
-	role: text().default('user'),
-	points: integer().default(0),
-	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-}, (table) => [
-	unique("user_email_unique").on(table.email),
-]);
+export const quizAnswerTranslations = pgTable(
+  'quiz_answer_translations',
+  {
+    quizAnswerId: uuid('quiz_answer_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    answerText: text('answer_text').notNull(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.quizAnswerId],
+      foreignColumns: [quizAnswers.id],
+      name: 'quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.quizAnswerId, table.locale],
+      name: 'quiz_answer_translations_quiz_answer_id_locale_pk',
+    }),
+  ]
+);
 
-export const pointTransactions = pgTable("point_transactions", {
-	id: uuid().defaultRandom().primaryKey().notNull(),
-	userId: text("user_id").notNull(),
-	points: integer().default(0).notNull(),
-	source: varchar({ length: 50 }).default('quiz').notNull(),
-	sourceId: uuid("source_id"),
-	metadata: jsonb().default({}),
-	createdAt: timestamp("created_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
-}, (table) => [
-	foreignKey({
-			columns: [table.userId],
-			foreignColumns: [user.id],
-			name: "point_transactions_user_id_user_id_fk"
-		}).onDelete("cascade"),
-]);
+export const quizQuestionContent = pgTable(
+  'quiz_question_content',
+  {
+    quizQuestionId: uuid('quiz_question_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    questionText: text('question_text').notNull(),
+    explanation: jsonb(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.quizQuestionId],
+      foreignColumns: [quizQuestions.id],
+      name: 'quiz_question_content_quiz_question_id_quiz_questions_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.quizQuestionId, table.locale],
+      name: 'quiz_question_content_quiz_question_id_locale_pk',
+    }),
+  ]
+);
 
-export const quizAnswerTranslations = pgTable("quiz_answer_translations", {
-	quizAnswerId: uuid("quiz_answer_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	answerText: text("answer_text").notNull(),
-}, (table) => [
-	foreignKey({
-			columns: [table.quizAnswerId],
-			foreignColumns: [quizAnswers.id],
-			name: "quiz_answer_translations_quiz_answer_id_quiz_answers_id_fk"
-		}).onDelete("cascade"),
-	primaryKey({ columns: [table.quizAnswerId, table.locale], name: "quiz_answer_translations_quiz_answer_id_locale_pk"}),
-]);
-
-export const quizQuestionContent = pgTable("quiz_question_content", {
-	quizQuestionId: uuid("quiz_question_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	questionText: text("question_text").notNull(),
-	explanation: jsonb(),
-}, (table) => [
-	foreignKey({
-			columns: [table.quizQuestionId],
-			foreignColumns: [quizQuestions.id],
-			name: "quiz_question_content_quiz_question_id_quiz_questions_id_fk"
-		}).onDelete("cascade"),
-	primaryKey({ columns: [table.quizQuestionId, table.locale], name: "quiz_question_content_quiz_question_id_locale_pk"}),
-]);
-
-export const quizTranslations = pgTable("quiz_translations", {
-	quizId: uuid("quiz_id").notNull(),
-	locale: varchar({ length: 5 }).notNull(),
-	title: varchar({ length: 200 }).notNull(),
-	description: text(),
-}, (table) => [
-	foreignKey({
-			columns: [table.quizId],
-			foreignColumns: [quizzes.id],
-			name: "quiz_translations_quiz_id_quizzes_id_fk"
-		}).onDelete("cascade"),
-	primaryKey({ columns: [table.quizId, table.locale], name: "quiz_translations_quiz_id_locale_pk"}),
-]);
+export const quizTranslations = pgTable(
+  'quiz_translations',
+  {
+    quizId: uuid('quiz_id').notNull(),
+    locale: varchar({ length: 5 }).notNull(),
+    title: varchar({ length: 200 }).notNull(),
+    description: text(),
+  },
+  table => [
+    foreignKey({
+      columns: [table.quizId],
+      foreignColumns: [quizzes.id],
+      name: 'quiz_translations_quiz_id_quizzes_id_fk',
+    }).onDelete('cascade'),
+    primaryKey({
+      columns: [table.quizId, table.locale],
+      name: 'quiz_translations_quiz_id_locale_pk',
+    }),
+  ]
+);
diff --git a/frontend/package.json b/frontend/package.json
index 75b3a97c..ac5c03ea 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "eslint",
     "seed:categories": "tsx db/seed-categories.ts",
-    "seed": "tsx db/seed.ts",
+    "seed:questions": "tsx db/seed-questions.ts",
     "seed:users": "tsx db/seed-users.ts",
     "parse": "tsx parse/parse.ts",
     "db:generate": "drizzle-kit generate --config drizzle.config.ts",
diff --git a/frontend/parse/questions.json b/frontend/parse/questions.json
index 2d4f8f30..aff06f66 100644
--- a/frontend/parse/questions.json
+++ b/frontend/parse/questions.json
@@ -1,17933 +1,311 @@
 [
   {
-    "question": "1. Що означає абревіатура HTML і яке її призначення?",
     "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
+    "order": 1,
+    "translations": {
+      "uk": {
+        "question": "1. Що означає абревіатура HTML і яке її призначення?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "HTML — HyperText Markup Language, мова розмітки для структурування вмісту вебсторінок (текст, зображення, посилання тощо)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "HTML — HyperText Markup Language, мова розмітки для структурування вмісту вебсторінок (текст, зображення, посилання тощо)."
+                  }
+                ]
+              },
               {
-                "text": "Призначення — описувати структуру та семантику контенту, який браузер відображає користувачу."
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "Призначення — описувати структуру та семантику контенту, який браузер відображає користувачу."
+                  }
+                ]
               }
             ]
           }
         ]
-      }
-    ]
-  },
-  {
-    "question": "2. Чим HTML відрізняється від CSS та JavaScript?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML",
-                "bold": true
-              },
-              {
-                "text": " — описує структуру веб-сторінки (що є: заголовки, абзаци, зображення, посилання)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS",
-                "bold": true
-              },
-              {
-                "text": " — відповідає за оформлення і стиль (як виглядає: кольори, шрифти, розташування)."
-              }
-            ]
-          },
+      },
+      "en": {
+        "question": "1. What does the HTML abbreviation stand for and what is its purpose?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "JavaScript",
-                "bold": true
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "HTML — HyperText Markup Language, a markup language used to structure web page content (text, images, links, etc.)."
+                  }
+                ]
               },
               {
-                "text": " — додає динаміку та інтерактивність (що робить: обробка подій, зміна DOM, анімації, логіка)."
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "Its purpose is to describe the structure and semantics of content that browsers display to users."
+                  }
+                ]
               }
             ]
           }
         ]
       },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Разом вони формують основу фронтенд-розробки: HTML — кістяк, CSS — одяг, JavaScript — поведінка."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "3. Що таке HTML теги?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML теги — це інструкції (команди), які визначають структуру та зміст веб-сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Теги пишуться у кутових дужках "
-              },
-              {
-                "text": "< >",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Більшість тегів мають відкриваючу та закриваючу частини:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <p>Текст абзацу</p>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Деякі теги самозакриваючі:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <br />\r\n  <img src=\"image.jpg\" alt=\"Зображення\" />\r"
-              }
-            ]
-          },
+      "pl": {
+        "question": "1. Co oznacza skrót HTML i jakie jest jego przeznaczenie?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "Теги можуть мати атрибути для додаткової інформації:"
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "HTML — HyperText Markup Language, język znaczników służący do strukturyzowania zawartości stron internetowych (tekst, obrazy, linki itp.)."
+                  }
+                ]
               },
               {
-                "type": "code",
-                "language": "html",
-                "content": "  <a href=\"https://example.com\">Посилання</a>\r"
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "Jego celem jest opis struktury i semantyki treści wyświetlanej użytkownikowi przez przeglądarkę."
+                  }
+                ]
               }
             ]
           }
         ]
       }
-    ]
+    }
   },
   {
-    "question": "4. Що таке HTML елементи?",
     "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML елемент — це повна конструкція, що складається з відкриваючого тега, контенту та закриваючого тега."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Структура елемента:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<tagname attribute=\"value\">контент</tagname>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
+    "order": 2,
+    "translations": {
+      "uk": {
+        "question": "2. Чим HTML відрізняється від CSS та JavaScript?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "<h1>Заголовок</h1>",
-                "code": true
+                "type": "listItem",
+                "children": [
+                  { "text": "HTML", "bold": true },
+                  {
+                    "text": " — описує структуру веб-сторінки (що є: заголовки, абзаци, зображення, посилання)."
+                  }
+                ]
               },
               {
-                "text": " — елемент заголовка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<p>Абзац тексту</p>",
-                "code": true
+                "type": "listItem",
+                "children": [
+                  { "text": "CSS", "bold": true },
+                  {
+                    "text": " — відповідає за оформлення і стиль (як виглядає: кольори, шрифти, розташування)."
+                  }
+                ]
               },
               {
-                "text": " — елемент абзацу"
+                "type": "listItem",
+                "children": [
+                  { "text": "JavaScript", "bold": true },
+                  {
+                    "text": " — додає динаміку та інтерактивність (події, DOM, логіка)."
+                  }
+                ]
               }
             ]
           },
           {
-            "type": "listItem",
+            "type": "paragraph",
             "children": [
               {
-                "text": "<img src=\"photo.jpg\" alt=\"Фото\">",
-                "code": true
-              },
-              {
-                "text": " — елемент зображення (самозакриваючий)"
+                "text": "Разом вони формують основу фронтенд-розробки: HTML — кістяк, CSS — одяг, JavaScript — поведінка."
               }
             ]
           }
         ]
       },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елементи можуть містити інші елементи (вкладеність) і мати атрибути для додаткових налаштувань."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "5. Опишіть базову структуру HTML-сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основна структура HTML-документа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<!-- Оголошення типу документа -->\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <title>Назва сторінки</title>\r\n  </head>\r\n  <body>\r\n    <!-- Вміст сторінки -->\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Складові:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<!DOCTYPE html>",
-                "code": true
-              },
-              {
-                "text": " — вказує, що документ у HTML5."
-              }
-            ]
-          },
+      "en": {
+        "question": "2. How does HTML differ from CSS and JavaScript?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "<html>",
-                "code": true
+                "type": "listItem",
+                "children": [
+                  { "text": "HTML", "bold": true },
+                  {
+                    "text": " — defines the structure of a web page (headings, paragraphs, images, links)."
+                  }
+                ]
               },
               {
-                "text": " — кореневий елемент."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<head>",
-                "code": true
+                "type": "listItem",
+                "children": [
+                  { "text": "CSS", "bold": true },
+                  {
+                    "text": " — controls presentation and styling (colors, fonts, layout)."
+                  }
+                ]
               },
               {
-                "text": " — метадані (кодова сторінка, заголовок, стилі, скрипти)."
+                "type": "listItem",
+                "children": [
+                  { "text": "JavaScript", "bold": true },
+                  {
+                    "text": " — adds interactivity and dynamic behavior (events, DOM manipulation, logic)."
+                  }
+                ]
               }
             ]
           },
           {
-            "type": "listItem",
+            "type": "paragraph",
             "children": [
               {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " — видимий вміст сторінки."
+                "text": "Together they form the foundation of frontend development: HTML is the structure, CSS is the appearance, JavaScript is the behavior."
               }
             ]
           }
         ]
-      }
-    ]
-  },
-  {
-    "question": "6. Що таке DOCTYPE і навіщо його використовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "DOCTYPE",
-            "code": true
-          },
-          {
-            "text": " (Document Type Declaration) — це декларація типу документа, яка повідомляє браузеру, яку версію HTML використовує сторінка."
-          }
-        ]
       },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
+      "pl": {
+        "question": "2. Czym różni się HTML od CSS i JavaScript?",
+        "answerBlocks": [
           {
-            "text": "Синтаксис для HTML5:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "Запобігає режиму сумісності (quirks mode) браузера"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
+                "type": "listItem",
+                "children": [
+                  { "text": "HTML", "bold": true },
+                  {
+                    "text": " — opisuje strukturę strony internetowej (nagłówki, akapity, obrazy, linki)."
+                  }
+                ]
+              },
               {
-                "text": "Забезпечує коректне відображення сторінки згідно зі стандартами"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
+                "type": "listItem",
+                "children": [
+                  { "text": "CSS", "bold": true },
+                  {
+                    "text": " — odpowiada za wygląd i styl (kolory, czcionki, układ)."
+                  }
+                ]
+              },
               {
-                "text": "Допомагає валідаторам перевіряти правильність коду"
+                "type": "listItem",
+                "children": [
+                  { "text": "JavaScript", "bold": true },
+                  {
+                    "text": " — dodaje dynamikę i interaktywność (zdarzenia, manipulacja DOM, logika)."
+                  }
+                ]
               }
             ]
           },
           {
-            "type": "listItem",
+            "type": "paragraph",
             "children": [
               {
-                "text": "Має стояти першим рядком HTML-документа"
+                "text": "Razem tworzą podstawę frontendu: HTML to struktura, CSS to wygląd, JavaScript to zachowanie."
               }
             ]
           }
         ]
       }
-    ]
+    }
   },
   {
-    "question": "7. Яка поточна версія HTML?",
     "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
+    "order": 3,
+    "translations": {
+      "uk": {
+        "question": "3. Що таке HTML теги?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "Поточна версія — "
-              },
-              {
-                "text": "HTML5",
-                "bold": true
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "HTML теги — це інструкції, які визначають структуру та зміст веб-сторінки."
+                  }
+                ]
               },
               {
-                "text": "."
+                "type": "listItem",
+                "children": [
+                  { "text": "Теги пишуться у кутових дужках " },
+                  { "text": "< >", "code": true },
+                  { "text": "." }
+                ]
               }
             ]
-          },
+          }
+        ]
+      },
+      "en": {
+        "question": "3. What are HTML tags?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "HTML5 є "
-              },
-              {
-                "text": "Living Standard",
-                "code": true
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "HTML tags are instructions that define the structure and content of a web page."
+                  }
+                ]
               },
               {
-                "text": " (живий стандарт), що означає постійне оновлення без формальних нових версій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримується всіма сучасними браузерами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Включає нові семантичні елементи, API, покращену підтримку мультимедіа та багато інших функцій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розробляється консорціумом WHATWG (Web Hypertext Application Technology Working Group)."
+                "type": "listItem",
+                "children": [
+                  { "text": "Tags are written inside angle brackets " },
+                  { "text": "< >", "code": true },
+                  { "text": "." }
+                ]
               }
             ]
           }
         ]
-      }
-    ]
-  },
-  {
-    "question": "8. Що роблять атрибути DOCTYPE та html lang?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
+      },
+      "pl": {
+        "question": "3. Czym są tagi HTML?",
+        "answerBlocks": [
           {
-            "type": "listItem",
+            "type": "bulletList",
             "children": [
               {
-                "text": "<!DOCTYPE html>",
-                "code": true
+                "type": "listItem",
+                "children": [
+                  {
+                    "text": "Tagi HTML to instrukcje określające strukturę i zawartość strony internetowej."
+                  }
+                ]
               },
               {
-                "text": " — повідомляє браузеру, що документ написаний у стандарті HTML5, щоб уникнути режиму сумісності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "lang",
-                "code": true
-              },
-              {
-                "text": " у "
-              },
-              {
-                "text": "<html>",
-                "code": true
-              },
-              {
-                "text": " — вказує мову вмісту сторінки для пошукових систем, читачів екрану та інших сервісів (наприклад, lang=\"uk\")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html lang=\"uk\">\r\n  <!-- Решта документа -->\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ці атрибути покращують доступність, SEO та коректність відображення сторінки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "9. Що описується в тегі head?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Тег "
-          },
-          {
-            "text": "<head>",
-            "code": true
-          },
-          {
-            "text": " містить метаінформацію про документ:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Назва сторінки",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<title>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-теги",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<meta>",
-                "code": true
-              },
-              {
-                "text": " (характеристики документа, ключові слова, опис)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підключення стилів",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": " (CSS-файли)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Скрипти",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<script>",
-                "code": true
-              },
-              {
-                "text": " (підключення JavaScript)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фавікон",
-                "bold": true
-              },
-              {
-                "text": " — "
-              },
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": " для іконки сайту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інші налаштування",
-                "bold": true
-              },
-              {
-                "text": " — наприклад, "
-              },
-              {
-                "text": "<base>",
-                "code": true
-              },
-              {
-                "text": " для базового URL."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<head>\r\n  <meta charset=\"UTF-8\" />\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n  <title>Назва сторінки</title>\r\n  <link rel=\"stylesheet\" href=\"styles.css\" />\r\n  <script src=\"script.js\"></script>\r\n</head>\r"
-      }
-    ]
-  },
-  {
-    "question": "10. Яка різниця між тегами head та body?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " — містить метадані про документ (назва, кодування, стилі, скрипти, SEO-теги), не відображається безпосередньо на сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " — містить видимий контент для користувача (текст, зображення, кнопки, відео тощо)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключові відмінності:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`<head>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Невидимий для користувача"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Містить службову інформацію"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Налаштування сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-дані"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`<body>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видимий контент"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Те, що бачить користувач"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивні елементи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Основний вміст сторінки"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "11. Що таке пробільний простір в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Пробільний простір в HTML — це пробіли, табуляції та переноси рядків між елементами."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Поведінка браузера:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузер автоматично "
-              },
-              {
-                "text": "згортає",
-                "bold": true
-              },
-              {
-                "text": " (схлопує) декілька пробілів в один"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кілька переносів рядків замінюються одним пробілом"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Провідні та кінцеві пробіли ігноруються"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Цей текст має багато пробілів</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відображається як: "
-          },
-          {
-            "text": "Цей текст має багато пробілів",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для збереження пробілів використовуйте CSS "
-          },
-          {
-            "text": "white-space: pre",
-            "code": true
-          },
-          {
-            "text": " або тег "
-          },
-          {
-            "text": "<pre>",
-            "code": true
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "12. Що таке порожні елементи в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Порожні елементи (void elements) — це HTML теги, які не мають контенту і закриваючого тега."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні порожні елементи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<br>",
-                "code": true
-              },
-              {
-                "text": " — розрив рядка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<hr>",
-                "code": true
-              },
-              {
-                "text": " — горизонтальна лінія"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<img>",
-                "code": true
-              },
-              {
-                "text": " — зображення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": " — поле вводу"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta>",
-                "code": true
-              },
-              {
-                "text": " — метадані"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<link>",
-                "code": true
-              },
-              {
-                "text": " — посилання на ресурс"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Правильно -->\r\n<img src=\"photo.jpg\" alt=\"Фото\" />\r\n<br />\r\n<input type=\"text\" name=\"name\" />\r\n\r\n<!-- В XHTML/XML стилі (необов'язково в HTML5) -->\r\n<img src=\"photo.jpg\" alt=\"Фото\" />\r\n<br />\r"
-      }
-    ]
-  },
-  {
-    "question": "13. У чому різниця між елементами div і span?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<div>",
-            "code": true
-          },
-          {
-            "text": " (блоковий елемент):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Займає всю доступну ширину"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Починається з нового рядка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Має верхні та нижні відступи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для великих блоків контенту"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<span>",
-            "code": true
-          },
-          {
-            "text": " (вбудований елемент):"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Займає тільки необхідну ширину"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не переносить на новий рядок"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не має вертикальних відступів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для маленьких фрагментів тексту"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div>Це блоковий елемент</div>\r\n<div>Він займає всю ширину</div>\r\n\r\n<p>Це <span>вбудований елемент</span> всередині абзацу.</p>\r"
-      }
-    ]
-  },
-  {
-    "question": "14. Яка різниця між тегами b та strong?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<b>",
-                "code": true
-              },
-              {
-                "text": " — просто робить текст візуально жирним, без додаткового смислового значення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<strong>",
-                "code": true
-              },
-              {
-                "text": " — робить текст жирним і додає семантичний акцент (важливість), що враховується пошуковими системами та скрінрідерами."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Цей текст <b>жирний</b> тільки візуально.</p>\r\n<p>Цей текст <strong>важливий</strong> за змістом.</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Рекомендація:",
-            "bold": true
-          },
-          {
-            "text": " Використовуйте "
-          },
-          {
-            "text": "<strong>",
-            "code": true
-          },
-          {
-            "text": " для смислово важливого тексту, "
-          },
-          {
-            "text": "<b>",
-            "code": true
-          },
-          {
-            "text": " — тільки для стилізації без семантичного значення."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "15. Коли слід використовувати em замість i, і навпаки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<em>",
-                "code": true
-              },
-              {
-                "text": " — виділяє текст курсивом з семантичним наголосом (інтонаційне чи логічне підкреслення важливості)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<i>",
-                "code": true
-              },
-              {
-                "text": " — відображає текст курсивом без зміни смислу (наприклад, іноземні слова, технічні терміни, назви)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Семантичний наголос -->\r\n<p>Я <em>дуже</em> хочу це зробити!</p>\r\n\r\n<!-- Стилістичне виділення -->\r\n<p>Фільм <i>Титанік</i> вийшов в 1997 році.</p>\r\n<p>Слово <i>bonjour</i> означає \"привіт\" французькою.</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Якщо потрібно передати смисловий акцент — використовуємо "
-          },
-          {
-            "text": "<em>",
-            "code": true
-          },
-          {
-            "text": ". Якщо тільки стиль відображення — "
-          },
-          {
-            "text": "<i>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "16. Яке призначення тегів small, s та mark?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<small>",
-                "code": true
-              },
-              {
-                "text": " — робить текст меншим і семантично позначає додаткову або другорядну інформацію (примітки, дисклеймери)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<s>",
-                "code": true
-              },
-              {
-                "text": " — відображає текст закресленим, коли він втратив актуальність, але його варто залишити для перегляду."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<mark>",
-                "code": true
-              },
-              {
-                "text": " — виділяє текст жовтим фоном для підсвічування важливого або знайденого фрагмента."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Ціна: <s>100 грн</s> 80 грн</p>\r\n<p><mark>Важливо:</mark> Термін дії до 31 грудня.</p>\r\n<p>Основний текст. <small>© 2023 Всі права захищені.</small></p>\r"
-      }
-    ]
-  },
-  {
-    "question": "17. Як створити абзац або розрив рядка в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Абзац:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Текст абзацу</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "створює блок з відступами зверху і знизу."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Розрив рядка:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "Текст першого рядка<br />Текст другого рядка\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "переносить текст без створення нового абзацу."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<p>",
-                "code": true
-              },
-              {
-                "text": " — для окремих абзаців тексту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<br>",
-                "code": true
-              },
-              {
-                "text": " — для примусового переносу в межах одного блоку (адреси, вірші)"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "18. Для чого використовуються теги sub та sup?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<sub>",
-                "code": true
-              },
-              {
-                "text": " — підрядковий текст (нижче базової лінії)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<sup>",
-                "code": true
-              },
-              {
-                "text": " — надрядковий текст (вище базової лінії)"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Математичні формули:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>H<sub>2</sub>O - формула води</p>\r\n<p>E = mc<sup>2</sup> - формула Ейнштейна</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Хімічні формули:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>CO<sub>2</sub> - вуглекислий газ</p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Сноски:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Цей факт<sup>1</sup> потребує підтвердження.</p>\r"
-      }
-    ]
-  },
-  {
-    "question": "19. Розкажіть про тег samp?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Тег "
-          },
-          {
-            "text": "<samp>",
-            "code": true
-          },
-          {
-            "text": " використовується для позначення тексту, який є результатом виконання комп'ютерної програми, наприклад, повідомлень про помилки або вихідних даних. Він відображається звичайним шрифтом, але зазвичай використовується для стилістичних цілей."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад використання тегу "
-          },
-          {
-            "text": "<samp>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p>Результат виконання програми: <samp>Помилка: Невірний ввід</samp></p>\r\n<p>Командний рядок повернув: <samp>Hello World!</samp></p>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Пов'язані теги:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<code>",
-                "code": true
-              },
-              {
-                "text": " — для фрагментів коду"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<kbd>",
-                "code": true
-              },
-              {
-                "text": " — для клавіш клавіатури"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<var>",
-                "code": true
-              },
-              {
-                "text": " — для змінних"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "20. Які глобальні атрибути є в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Глобальні атрибути можна використовувати з будь-яким HTML елементом:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні глобальні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "id",
-                "code": true
-              },
-              {
-                "text": " — унікальний ідентифікатор елемента"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "class",
-                "code": true
-              },
-              {
-                "text": " — CSS класи для стилізації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "style",
-                "code": true
-              },
-              {
-                "text": " — вбудовані стилі CSS"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": " — підказка при наведенні"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "lang",
-                "code": true
-              },
-              {
-                "text": " — мова контенту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dir",
-                "code": true
-              },
-              {
-                "text": " — напрям тексту (ltr/rtl)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex",
-                "code": true
-              },
-              {
-                "text": " — порядок фокусування"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "hidden",
-                "code": true
-              },
-              {
-                "text": " — приховує елемент"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "data-*",
-                "code": true
-              },
-              {
-                "text": " — користувацькі атрибути"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути подій:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "onclick",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "onmouseover",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "onload",
-                "code": true
-              },
-              {
-                "text": " тощо"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div\r\n  id=\"main-content\"\r\n  class=\"container highlight\"\r\n  title=\"Основний контент сторінки\"\r\n  lang=\"uk\"\r\n  data-section=\"hero\"\r\n>\r\n  Контент...\r\n</div>\r"
-      }
-    ]
-  },
-  {
-    "question": "21. Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибут "
-          },
-          {
-            "text": "id",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Унікальний ідентифікатор елемента на сторінці"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Може бути тільки один елемент з конкретним id"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для JavaScript, якірних посилань, CSS стилізації"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибут "
-          },
-          {
-            "text": "class",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Групує елементи за спільними характеристиками"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один клас можна застосувати до багатьох елементів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один елемент може мати кілька класів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- ID - унікальний -->\r\n<div id=\"header\">Заголовок сайту</div>\r\n<div id=\"navigation\">Навігація</div>\r\n\r\n<!-- Class - може повторюватися -->\r\n<p class=\"highlight\">Важливий текст</p>\r\n<p class=\"highlight large\">Великий важливий текст</p>\r\n<span class=\"highlight\">Ще важливий текст</span>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "CSS селектори:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "#header {\r\n  color: blue;\r\n} /* ID селектор */\r\n.highlight {\r\n  color: red;\r\n} /* Class селектор */\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Рекомендація:",
-            "bold": true
-          },
-          {
-            "text": " Використовуйте "
-          },
-          {
-            "text": "id",
-            "code": true
-          },
-          {
-            "text": " для унікальних елементів і якірних посилань, "
-          },
-          {
-            "text": "class",
-            "code": true
-          },
-          {
-            "text": " — для стилізації та групування."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "22. Яке призначення атрибута alt в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " — альтернативний текст для зображення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показується, якщо зображення не завантажилось."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Допомагає скрінрідерам робити сайт доступним."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для SEO."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Інформативне зображення -->\r\n<img src=\"chart.png\" alt=\"Графік продажів за 2023 рік\" />\r\n\r\n<!-- Декоративне зображення -->\r\n<img src=\"decoration.png\" alt=\"\" />\r\n\r\n<!-- Зображення-посилання -->\r\n<a href=\"/home\">\r\n  <img src=\"logo.png\" alt=\"Повернутися на головну сторінку\" />\r\n</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " Для декоративних зображень використовуйте порожній "
-          },
-          {
-            "text": "alt=\"\"",
-            "code": true
-          },
-          {
-            "text": ", щоб скрін-рідери їх ігнорували."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "23. Навіщо використовується тег label?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<label>",
-            "code": true
-          },
-          {
-            "text": " пов'язує текстову підказку з елементом форми, щоб користувачу було зрозуміло, що вводити."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує доступність (скрінрідери читають підказку разом із полем)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Клік по <label> автоматично фокусує пов'язане поле."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зовнішній label (через атрибути for та id):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"email\">Email:</label> <input type=\"email\" id=\"email\" name=\"email\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Внутрішній label (обгортає елемент):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label>\r\n  <input type=\"checkbox\" name=\"agree\" />\r\n  Погоджуюсь з умовами\r\n</label>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для групи radio buttons:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"size-small\">\r\n  <input type=\"radio\" id=\"size-small\" name=\"size\" value=\"small\" />\r\n  Малий\r\n</label>\r\n<label for=\"size-large\">\r\n  <input type=\"radio\" id=\"size-large\" name=\"size\" value=\"large\" />\r\n  Великий\r\n</label>\r"
-      }
-    ]
-  },
-  {
-    "question": "24. Що таке атрибути data-* і коли їх слід використовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "data-*",
-                "code": true
-              },
-              {
-                "text": " — це користувацькі атрибути для зберігання будь-яких додаткових даних у елементі HTML."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div data-user-id=\"123\" data-role=\"admin\" data-last-login=\"2023-12-01\"></div>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зберігати інформацію для JavaScript без впливу на відображення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко отримувати через element.dataset.userId або element.dataset.role."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Наприклад, для інтерактивних елементів, налаштувань чи передачі даних у JS."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання з JavaScript:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button data-action=\"delete\" data-id=\"42\">Видалити</button>\r\n\r\n<script>\r\n  const button = document.querySelector('button');\r\n  console.log(button.dataset.action); // \"delete\"\r\n  console.log(button.dataset.id); // \"42\"\r\n</script>\r"
-      }
-    ]
-  },
-  {
-    "question": "25. Що таке data-атрибути, в яких випадках їх використовуєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "data-*",
-            "code": true
-          },
-          {
-            "text": " атрибути дозволяють зберігати користувацькі дані прямо в HTML елементах."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Випадки використання:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Конфігурація компонентів:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<div class=\"slider\" data-speed=\"500\" data-autoplay=\"true\">\r\n  <!-- Контент слайдера -->\r\n</div>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ідентифікація для JavaScript:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<tr data-user-id=\"123\" data-status=\"active\">\r\n  <td>John Doe</td>\r\n  <td><button data-action=\"edit\">Редагувати</button></td>\r\n</tr>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стан елементів:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<div class=\"modal\" data-visible=\"false\">\r\n  <!-- Модальне вікно -->\r\n</div>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS стилізація за станом:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "[data-status='active'] {\r\n  color: green;\r\n}\r\n[data-status='inactive'] {\r\n  color: gray;\r\n}\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Переваги:",
-            "bold": true
-          },
-          {
-            "text": " Валідний HTML, легкий доступ через JavaScript, не впливає на стилізацію."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "26. Як створити гіперпосилання в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуємо тег "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"https://example.com\">Текст посилання</a>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — адреса, куди веде посилання."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна додати "
-              },
-              {
-                "text": "target=\"_blank\"",
-                "code": true
-              },
-              {
-                "text": " для відкриття в новій вкладці."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Різні типи посилань:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Зовнішнє посилання -->\r\n<a href=\"https://google.com\">Google</a>\r\n\r\n<!-- Внутрішнє посилання -->\r\n<a href=\"/about\">Про нас</a>\r\n\r\n<!-- Email посилання -->\r\n<a href=\"mailto:contact@example.com\">Написати листа</a>\r\n\r\n<!-- Телефонне посилання -->\r\n<a href=\"tel:+380123456789\">Зателефонувати</a>\r\n\r\n<!-- Посилання на файл -->\r\n<a href=\"document.pdf\">Завантажити PDF</a>\r"
-      }
-    ]
-  },
-  {
-    "question": "27. Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Зовнішні посилання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ведуть на інші веб-сайти"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Починаються з "
-              },
-              {
-                "text": "http://",
-                "code": true
-              },
-              {
-                "text": " або "
-              },
-              {
-                "text": "https://",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Внутрішні посилання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ведуть на сторінки того самого сайту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовують відносні або абсолютні шляхи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Зовнішнє посилання -->\r\n<a\r\n  href=\"https://example.com\"\r\n  target=\"_blank\"\r\n  rel=\"noopener noreferrer\"\r\n  title=\"Перейти на example.com\"\r\n>\r\n  Зовнішній сайт\r\n</a>\r\n\r\n<!-- Внутрішнє посилання -->\r\n<a href=\"/contact\" title=\"Сторінка контактів\"> Контакти </a>\r\n\r\n<!-- Якірне посилання -->\r\n<a href=\"#section1\" title=\"Перейти до розділу 1\"> Розділ 1 </a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибути:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — URL адреса"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "target",
-                "code": true
-              },
-              {
-                "text": " — де відкрити (\\_blank, \\_self, \\_parent, \\_top)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel",
-                "code": true
-              },
-              {
-                "text": " — відношення до цільової сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": " — підказка при наведенні"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "28. Яка різниця між відносними та абсолютними URL-адресами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Абсолютний URL",
-            "bold": true
-          },
-          {
-            "text": " — містить повний шлях із протоколом і доменом."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"https://example.com/page.html\">Посилання</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується для переходів на зовнішні ресурси або між доменами."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відносний URL",
-            "bold": true
-          },
-          {
-            "text": " — вказує шлях відносно поточного документа."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"/page.html\">Посилання</a>\r\n<a href=\"page.html\">Посилання</a>\r\n<a href=\"../page.html\">Посилання</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Типи відносних URL:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Відносно кореня сайту -->\r\n<a href=\"/about/team.html\">Команда</a>\r\n\r\n<!-- Відносно поточної папки -->\r\n<a href=\"contact.html\">Контакти</a>\r\n\r\n<!-- На рівень вище -->\r\n<a href=\"../index.html\">Головна</a>\r\n\r\n<!-- На кілька рівнів вище -->\r\n<a href=\"../../docs/manual.pdf\">Інструкція</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зручно для внутрішніх сторінок сайту, особливо при розробці й тестуванні."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "29. Як відкрити посилання в новій вкладці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додати атрибут "
-              },
-              {
-                "text": "target=\"_blank\"",
-                "code": true
-              },
-              {
-                "text": " до тега "
-              },
-              {
-                "text": "<a>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<a href=\"https://example.com\" target=\"_blank\">Відкрити в новій вкладці</a>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Рекомендовано також додати "
-              },
-              {
-                "text": "rel=\"noopener noreferrer\"",
-                "code": true
-              },
-              {
-                "text": " для безпеки:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n  Відкрити в новій вкладці\r\n</a>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Інші значення target:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Поточна вкладка (за замовчуванням) -->\r\n<a href=\"page.html\" target=\"_self\">Поточна вкладка</a>\r\n\r\n<!-- Батьківський фрейм -->\r\n<a href=\"page.html\" target=\"_parent\">Батьківський фрейм</a>\r\n\r\n<!-- Верхній рівень вікна -->\r\n<a href=\"page.html\" target=\"_top\">Верхній рівень</a>\r\n\r\n<!-- Конкретне вікно/фрейм -->\r\n<a href=\"page.html\" target=\"myWindow\">Конкретне вікно</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Безпека:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "rel=\"noopener noreferrer\"",
-            "code": true
-          },
-          {
-            "text": " запобігає доступу нової сторінки до поточної через "
-          },
-          {
-            "text": "window.opener",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "30. Як створити якір для переходу до певної частини сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додаємо ідентифікатор елементу:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<h2 id=\"contacts\">Контакти</h2>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюємо посилання на цей id:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<a href=\"#contacts\">Перейти до контактів</a>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "При кліку сторінка прокрутиться до елемента з таким id."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Повний приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Якірні посилання</title>\r\n  </head>\r\n  <body>\r\n    <!-- Навігація -->\r\n    <nav>\r\n      <a href=\"#about\">Про нас</a>\r\n      <a href=\"#services\">Послуги</a>\r\n      <a href=\"#contacts\">Контакти</a>\r\n    </nav>\r\n\r\n    <!-- Контент -->\r\n    <section id=\"about\">\r\n      <h2>Про нас</h2>\r\n      <p>Інформація про компанію...</p>\r\n    </section>\r\n\r\n    <section id=\"services\">\r\n      <h2>Послуги</h2>\r\n      <p>Опис наших послуг...</p>\r\n    </section>\r\n\r\n    <section id=\"contacts\">\r\n      <h2>Контакти</h2>\r\n      <p>Контактна інформація...</p>\r\n    </section>\r\n\r\n    <!-- Повернутися на верх -->\r\n    <a href=\"#top\">↑ На верх</a>\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS для плавної прокрутки:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "html {\r\n  scroll-behavior: smooth;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "31. Як створити посилання на різні розділи на одній веб-сторінці HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відповідь: Для створення гіперпосилання використовується тег "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": ". Атрибут href вказує URL або шлях."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Повний приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Якірні посилання</title>\r\n  </head>\r\n  <body>\r\n    <!-- Навігація -->\r\n    <nav>\r\n      <a href=\"#about\">Про нас</a>\r\n      <a href=\"#services\">Послуги</a>\r\n      <a href=\"#contacts\">Контакти</a>\r\n    </nav>\r\n\r\n    <!-- Контент -->\r\n    <section id=\"about\">\r\n      <h2>Про нас</h2>\r\n      <p>Інформація про компанію...</p>\r\n    </section>\r\n\r\n    <section id=\"services\">\r\n      <h2>Послуги</h2>\r\n      <p>Опис наших послуг...</p>\r\n    </section>\r\n\r\n    <section id=\"contacts\">\r\n      <h2>Контакти</h2>\r\n      <p>Контактна інформація...</p>\r\n    </section>\r\n\r\n    <!-- Повернутися на верх -->\r\n    <a href=\"#top\">↑ На верх</a>\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "CSS для плавної прокрутки:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "html {\r\n  scroll-behavior: smooth;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "32. Як створити посилання на файл для завантаження в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використати "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": " з атрибутом "
-          },
-          {
-            "text": "download",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"files/manual.pdf\" download>Завантажити інструкцію</a>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href — шлях до файлу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "download — каже браузеру зберегти файл замість відкриття."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна вказати ім'я:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"files/manual.pdf\" download=\"Instrukciya.pdf\">Завантажити</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Завантажити з оригінальним ім'ям -->\r\n<a href=\"document.pdf\" download>Завантажити PDF</a>\r\n\r\n<!-- Завантажити з новим ім'ям -->\r\n<a href=\"report.xlsx\" download=\"financial-report-2023.xlsx\">\r\n  Завантажити звіт\r\n</a>\r\n\r\n<!-- Завантажити зображення -->\r\n<a href=\"photo.jpg\" download=\"my-photo.jpg\"> Зберегти фото </a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Примітка:",
-            "bold": true
-          },
-          {
-            "text": " Атрибут "
-          },
-          {
-            "text": "download",
-            "code": true
-          },
-          {
-            "text": " працює тільки для файлів з того самого домену (same-origin)."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "33. Яке призначення атрибута target у тегу a в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут target визначає, де відкриється посилання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_self",
-                "code": true
-              },
-              {
-                "text": " (за замовчуванням) — відкриває в тій самій вкладці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_blank",
-                "code": true
-              },
-              {
-                "text": " — відкриває у новій вкладці/вікні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_parent",
-                "code": true
-              },
-              {
-                "text": " — відкриває в батьківському фреймі (якщо є фрейми)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "_top",
-                "code": true
-              },
-              {
-                "text": " — відкриває у всьому вікні, виходячи з фреймів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "customName",
-                "code": true
-              },
-              {
-                "text": " — відкриває в конкретному вікні/фреймі з цим ім'ям."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- За замовчуванням - поточна вкладка -->\r\n<a href=\"page.html\">Внутрішня сторінка</a>\r\n\r\n<!-- Нова вкладка -->\r\n<a href=\"https://example.com\" target=\"_blank\">Зовнішній сайт</a>\r\n\r\n<!-- Нова вкладка з безпекою -->\r\n<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n  Безпечне зовнішнє посилання\r\n</a>\r\n\r\n<!-- Конкретне вікно -->\r\n<a href=\"help.html\" target=\"helpWindow\">Довідка</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Безпека:",
-            "bold": true
-          },
-          {
-            "text": " Для "
-          },
-          {
-            "text": "target=\"_blank\"",
-            "code": true
-          },
-          {
-            "text": " рекомендується додавати "
-          },
-          {
-            "text": "rel=\"noopener noreferrer\"",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "34. Як вставляти зображення на HTML-сторінку?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуємо тег "
-          },
-          {
-            "text": "<img>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img src=\"image.jpg\" alt=\"Опис зображення\" />\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "src",
-                "code": true
-              },
-              {
-                "text": " — шлях до зображення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " — текстовий опис для доступності та коли зображення не завантажилось."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Опційно: "
-          },
-          {
-            "text": "width",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "height",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "title",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Детальніші приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Основне використання -->\r\n<img src=\"photo.jpg\" alt=\"Фотографія заходу сонця\" />\r\n\r\n<!-- З розмірами -->\r\n<img src=\"logo.png\" alt=\"Логотип компанії\" width=\"200\" height=\"100\" />\r\n\r\n<!-- З підказкою -->\r\n<img src=\"chart.png\" alt=\"Графік продажів\" title=\"Натисніть для збільшення\" />\r\n\r\n<!-- Відносний шлях -->\r\n<img src=\"../images/banner.jpg\" alt=\"Банер акції\" />\r\n\r\n<!-- Абсолютний URL -->\r\n<img src=\"https://example.com/image.jpg\" alt=\"Зовнішнє зображення\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " Завжди включайте атрибут "
-          },
-          {
-            "text": "alt",
-            "code": true
-          },
-          {
-            "text": " для доступності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "35. Яке значення має атрибут alt для зображень?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "alt",
-            "code": true
-          },
-          {
-            "text": " — альтернативний текст для зображення."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показується, якщо зображення не завантажилось."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Допомагає скрінрідерам робити сайт доступним."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для SEO."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади правильного використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Інформативне зображення -->\r\n<img\r\n  src=\"chart.png\"\r\n  alt=\"Графік продажів за 2023 рік показує зростання на 25%\"\r\n/>\r\n\r\n<!-- Декоративне зображення -->\r\n<img src=\"decoration.png\" alt=\"\" />\r\n\r\n<!-- Зображення-посилання -->\r\n<a href=\"/home\">\r\n  <img src=\"logo.png\" alt=\"Повернутися на головну сторінку\" />\r\n</a>\r\n\r\n<!-- Складне зображення -->\r\n<img src=\"infographic.jpg\" alt=\"Інфографіка: кроки створення веб-сайту\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правила:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для декоративних зображень використовуйте "
-              },
-              {
-                "text": "alt=\"\"",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для інформативних - описуйте зміст"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для посилань - описуйте призначення посилання"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "36. Які формати зображень підтримуються веббраузерами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні формати, які підтримують сучасні браузери:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JPEG",
-                "code": true
-              },
-              {
-                "text": " / "
-              },
-              {
-                "text": "JPG",
-                "code": true
-              },
-              {
-                "text": " — фотографії з високою деталізацією, стиснення з втратою якості."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "PNG",
-                "code": true
-              },
-              {
-                "text": " — графіка з прозорістю, без втрати якості."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "GIF",
-                "code": true
-              },
-              {
-                "text": " — анімація та прості картинки з обмеженою палітрою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "WebP",
-                "code": true
-              },
-              {
-                "text": " — сучасний формат з високим стисненням і прозорістю."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SVG",
-                "code": true
-              },
-              {
-                "text": " — векторна графіка, масштабована без втрати якості."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Менш поширені: BMP, ICO (для іконок)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- JPEG для фотографій -->\r\n<img src=\"photo.jpg\" alt=\"Пейзаж\" />\r\n\r\n<!-- PNG для графіки з прозорістю -->\r\n<img src=\"logo.png\" alt=\"Логотип\" />\r\n\r\n<!-- GIF для анімації -->\r\n<img src=\"loading.gif\" alt=\"Завантаження\" />\r\n\r\n<!-- WebP для оптимізації -->\r\n<img src=\"optimized.webp\" alt=\"Оптимізоване зображення\" />\r\n\r\n<!-- SVG для векторної графіки -->\r\n<img src=\"icon.svg\" alt=\"Іконка\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Сучасні тенденції:",
-            "bold": true
-          },
-          {
-            "text": " WebP та AVIF для кращого стиснення, SVG для іконок та простої графіки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "37. Які різні типи списків доступні в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "В HTML є три основні типи списків:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нумерований список (`<ol>`)",
-                "bold": true
-              },
-              {
-                "text": " — елементи пронумеровані:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Маркований список (`<ul>`)",
-                "bold": true
-              },
-              {
-                "text": " — елементи з маркерами (кульки, квадрати):"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Список визначень (`<dl>`)",
-                "bold": true
-              },
-              {
-                "text": " — термін + опис:"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Нумерований список -->\r\n<ol>\r\n  <li>Перший крок</li>\r\n  <li>Другий крок</li>\r\n  <li>Третій крок</li>\r\n</ol>\r\n\r\n<!-- Маркований список -->\r\n<ul>\r\n  <li>Молоко</li>\r\n  <li>Хліб</li>\r\n  <li>Яйця</li>\r\n</ul>\r\n\r\n<!-- Список визначень -->\r\n<dl>\r\n  <dt>HTML</dt>\r\n  <dd>HyperText Markup Language</dd>\r\n  <dt>CSS</dt>\r\n  <dd>Cascading Style Sheets</dd>\r\n</dl>\r"
-      }
-    ]
-  },
-  {
-    "question": "38. Як створювати впорядковані, невпорядковані списки та списки з описом у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Впорядкований список (`<ol>`):",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<ol>\r\n  <li>Перший</li>\r\n  <li>Другий</li>\r\n</ol>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Невпорядкований список (`<ul>`):",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<ul>\r\n  <li>Пункт 1</li>\r\n  <li>Пункт 2</li>\r\n</ul>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Список з описом (`<dl>`):",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<dl>\r\n  <dt>HTML</dt>\r\n  <dd>Мова розмітки</dd>\r\n  <dt>JavaScript</dt>\r\n  <dd>Мова програмування</dd>\r\n</dl>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширені приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Нумерований список з атрибутами -->\r\n<ol type=\"A\" start=\"3\">\r\n  <li>Третій пункт (C)</li>\r\n  <li>Четвертий пункт (D)</li>\r\n</ol>\r\n\r\n<!-- Список з різними маркерами (CSS) -->\r\n<ul style=\"list-style-type: square;\">\r\n  <li>Квадратний маркер</li>\r\n  <li>Ще один квадратний маркер</li>\r\n</ul>\r"
-      }
-    ]
-  },
-  {
-    "question": "39. Чи можна вкладати списки в HTML? Якщо так, то як?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Так, можна. Вкладені списки створюють всередині "
-          },
-          {
-            "text": "<li>",
-            "code": true
-          },
-          {
-            "text": " елемента:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<ul>\r\n  <li>\r\n    Пункт 1\r\n    <ul>\r\n      <li>Вкладений пункт 1</li>\r\n      <li>Вкладений пункт 2</li>\r\n    </ul>\r\n  </li>\r\n  <li>Пункт 2</li>\r\n</ul>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна вкладати будь-які типи списків ("
-          },
-          {
-            "text": "<ul>",
-            "code": true
-          },
-          {
-            "text": " всередині "
-          },
-          {
-            "text": "<ol>",
-            "code": true
-          },
-          {
-            "text": " і навпаки)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Більш складний приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<ol>\r\n  <li>\r\n    Веб-технології\r\n    <ul>\r\n      <li>\r\n        Frontend\r\n        <ul>\r\n          <li>HTML</li>\r\n          <li>CSS</li>\r\n          <li>JavaScript</li>\r\n        </ul>\r\n      </li>\r\n      <li>\r\n        Backend\r\n        <ul>\r\n          <li>Node.js</li>\r\n          <li>Python</li>\r\n          <li>PHP</li>\r\n        </ul>\r\n      </li>\r\n    </ul>\r\n  </li>\r\n  <li>Мобільна розробка</li>\r\n</ol>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правило:",
-            "bold": true
-          },
-          {
-            "text": " Вкладений список завжди має бути всередині "
-          },
-          {
-            "text": "<li>",
-            "code": true
-          },
-          {
-            "text": ", а не між "
-          },
-          {
-            "text": "<li>",
-            "code": true
-          },
-          {
-            "text": " елементами."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "40. Як можна згрупувати опції всередині тегу select?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для групування опцій у випадаючому списку використовуйте тег "
-          },
-          {
-            "text": "<optgroup>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<select name=\"course\">\r\n  <optgroup label=\"Фронтенд\">\r\n    <option value=\"html\">HTML</option>\r\n    <option value=\"css\">CSS</option>\r\n    <option value=\"js\">JavaScript</option>\r\n  </optgroup>\r\n\r\n  <optgroup label=\"Бекенд\">\r\n    <option value=\"php\">PHP</option>\r\n    <option value=\"python\">Python</option>\r\n    <option value=\"nodejs\">Node.js</option>\r\n  </optgroup>\r\n\r\n  <optgroup label=\"Дизайн\">\r\n    <option value=\"photoshop\">Photoshop</option>\r\n    <option value=\"figma\">Figma</option>\r\n  </optgroup>\r\n</select>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги "
-          },
-          {
-            "text": "<optgroup>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Візуально групує пов'язані опції"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує юзабіліті для довгих списків"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримує атрибут "
-              },
-              {
-                "text": "label",
-                "code": true
-              },
-              {
-                "text": " для назви групи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна вимкнути групу через "
-              },
-              {
-                "text": "disabled",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з вимкненою групою:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<select name=\"country\">\r\n  <optgroup label=\"Європа\">\r\n    <option value=\"ua\">Україна</option>\r\n    <option value=\"pl\">Польща</option>\r\n  </optgroup>\r\n\r\n  <optgroup label=\"Азія\" disabled>\r\n    <option value=\"jp\">Японія</option>\r\n    <option value=\"cn\">Китай</option>\r\n  </optgroup>\r\n</select>\r"
-      }
-    ]
-  },
-  {
-    "question": "41. Що таке HTML-форми та як їх створити?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на сервер або обробляє на клієнті."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад створення:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\">\r\n  <label for=\"name\">Ім'я:</label>\r\n  <input type=\"text\" id=\"name\" name=\"name\" />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<form>",
-                "code": true
-              },
-              {
-                "text": " — контейнер форми."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "action",
-                "code": true
-              },
-              {
-                "text": " — URL, куди відправляються дані."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "method",
-                "code": true
-              },
-              {
-                "text": " — спосіб відправки (get або post)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Поля вводу",
-            "bold": true
-          },
-          {
-            "text": " ("
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<textarea>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<select>",
-            "code": true
-          },
-          {
-            "text": ") + кнопки ("
-          },
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "<input type=\"submit\">",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширений приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/register\" method=\"post\" enctype=\"multipart/form-data\">\r\n  <fieldset>\r\n    <legend>Реєстрація користувача</legend>\r\n\r\n    <label for=\"username\">Логін:</label>\r\n    <input type=\"text\" id=\"username\" name=\"username\" required />\r\n\r\n    <label for=\"password\">Пароль:</label>\r\n    <input type=\"password\" id=\"password\" name=\"password\" required />\r\n\r\n    <label for=\"avatar\">Аватар:</label>\r\n    <input type=\"file\" id=\"avatar\" name=\"avatar\" accept=\"image/*\" />\r\n\r\n    <button type=\"submit\">Зареєструватися</button>\r\n    <button type=\"reset\">Очистити</button>\r\n  </fieldset>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "42. Опишіть різні типи вхідних даних форм у HTML5.",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "В HTML5 у "
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": " з'явилося багато типів для збору різних даних:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Текстові типи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "text",
-                "code": true
-              },
-              {
-                "text": " — звичайне текстове поле."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "password",
-                "code": true
-              },
-              {
-                "text": " — поле з прихованим введенням."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "email",
-                "code": true
-              },
-              {
-                "text": " — перевірка формату email."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "url",
-                "code": true
-              },
-              {
-                "text": " — перевірка формату URL."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tel",
-                "code": true
-              },
-              {
-                "text": " — для телефонів (без валідації формату в HTML)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "search",
-                "code": true
-              },
-              {
-                "text": " — поле пошуку."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Числові типи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "number",
-                "code": true
-              },
-              {
-                "text": " — числове поле зі стрілками."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "range",
-                "code": true
-              },
-              {
-                "text": " — повзунок для вибору значення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Дата і час:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "date",
-                "code": true
-              },
-              {
-                "text": " — вибір дати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "month",
-                "code": true
-              },
-              {
-                "text": " — вибір місяця та року."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "week",
-                "code": true
-              },
-              {
-                "text": " — вибір тижня."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "time",
-                "code": true
-              },
-              {
-                "text": " — вибір часу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "datetime-local",
-                "code": true
-              },
-              {
-                "text": " — дата і час без часової зони."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Інші типи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "color",
-                "code": true
-              },
-              {
-                "text": " — вибір кольору."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "checkbox",
-                "code": true
-              },
-              {
-                "text": " — прапорець."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "radio",
-                "code": true
-              },
-              {
-                "text": " — перемикач (один із групи)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "file",
-                "code": true
-              },
-              {
-                "text": " — вибір файлу для завантаження."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "hidden",
-                "code": true
-              },
-              {
-                "text": " — приховане поле для передачі даних."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Кнопки:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "submit",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "reset",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "button",
-                "code": true
-              },
-              {
-                "text": " — кнопки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"email\" placeholder=\"user@example.com\" />\r\n<input type=\"number\" min=\"1\" max=\"100\" step=\"1\" />\r\n<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" />\r\n<input type=\"date\" value=\"2023-12-31\" />\r\n<input type=\"color\" value=\"#ff0000\" />\r"
-      }
-    ]
-  },
-  {
-    "question": "43. Як зробити вхідні дані форм обов'язковими?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Щоб зробити поле форми обов'язковим, додаємо атрибут "
-          },
-          {
-            "text": "required",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"email\" name=\"userEmail\" required />\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузер не дасть відправити форму, поки поле не заповнене."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для спеціалізованих типів (email, number, url) додатково перевіряється формат введення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширені приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Обов'язкове текстове поле -->\r\n<input type=\"text\" name=\"name\" required placeholder=\"Введіть ваше ім'я\" />\r\n\r\n<!-- Обов'язковий вибір з випадаючого списку -->\r\n<select name=\"country\" required>\r\n  <option value=\"\">Оберіть країну</option>\r\n  <option value=\"ua\">Україна</option>\r\n  <option value=\"pl\">Польща</option>\r\n</select>\r\n\r\n<!-- Обов'язкове прийняття умов -->\r\n<input type=\"checkbox\" name=\"terms\" required />\r\n<label for=\"terms\">Я погоджуюсь з умовами використання</label>\r\n\r\n<!-- Обов'язкове заповнення textarea -->\r\n<textarea name=\"message\" required placeholder=\"Ваше повідомлення\"></textarea>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Стилізація через CSS:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "input:required {\r\n  border-left: 3px solid red;\r\n}\r\n\r\ninput:valid {\r\n  border-left: 3px solid green;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "44. Яке призначення елемента label у формах?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<label>",
-            "code": true
-          },
-          {
-            "text": " пов'язує текстову підказку з елементом форми, щоб користувачу було зрозуміло, що вводити."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує доступність (скрінрідери читають підказку разом із полем)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Клік по <label> автоматично фокусує пов'язане поле."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Зовнішній label (через for та id):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"email\">Email:</label> <input type=\"email\" id=\"email\" name=\"email\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Внутрішній label (обгортає елемент):",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label>\r\n  <input type=\"checkbox\" name=\"agree\" />\r\n  Погоджуюсь з умовами\r\n</label>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для radio buttons:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<fieldset>\r\n  <legend>Оберіть розмір:</legend>\r\n  <label>\r\n    <input type=\"radio\" name=\"size\" value=\"small\" />\r\n    Малий\r\n  </label>\r\n  <label>\r\n    <input type=\"radio\" name=\"size\" value=\"large\" />\r\n    Великий\r\n  </label>\r\n</fieldset>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Складніший приклад:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"form-group\">\r\n  <label for=\"password\"> Пароль <span class=\"required\">*</span> </label>\r\n  <input type=\"password\" id=\"password\" name=\"password\" required />\r\n  <small>Мінімум 8 символів</small>\r\n</div>\r"
-      }
-    ]
-  },
-  {
-    "question": "45. Як групувати вхідні дані форм і чому це потрібно робити?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для групування даних у формах використовують "
-              },
-              {
-                "text": "<fieldset>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<legend>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<fieldset>\r\n  <legend>Особисті дані</legend>\r\n  <label for=\"name\">Ім'я:</label>\r\n  <input type=\"text\" id=\"name\" name=\"name\" />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" />\r\n</fieldset>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Навіщо:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Візуально та логічно об'єднує пов'язані поля."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує доступність (скрінрідери читають легенду)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Допомагає структурувати великі форми і робить їх зручнішими для користувача."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширений приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <fieldset>\r\n    <legend>Контактна інформація</legend>\r\n    <label for=\"phone\">Телефон:</label>\r\n    <input type=\"tel\" id=\"phone\" name=\"phone\" />\r\n\r\n    <label for=\"address\">Адреса:</label>\r\n    <textarea id=\"address\" name=\"address\"></textarea>\r\n  </fieldset>\r\n\r\n  <fieldset>\r\n    <legend>Налаштування акаунту</legend>\r\n    <label for=\"notifications\">\r\n      <input type=\"checkbox\" id=\"notifications\" name=\"notifications\" />\r\n      Отримувати сповіщення\r\n    </label>\r\n\r\n    <label for=\"privacy\">\r\n      <input type=\"radio\" id=\"privacy\" name=\"privacy\" value=\"public\" />\r\n      Публічний профіль\r\n    </label>\r\n  </fieldset>\r\n\r\n  <fieldset disabled>\r\n    <legend>Преміум функції</legend>\r\n    <input type=\"checkbox\" name=\"premium\" disabled />\r\n    <label>Доступно тільки для преміум користувачів</label>\r\n  </fieldset>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "46. Як створити форму в HTML і забезпечити її валідацію?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Створення форми з валідацією включає використання HTML5 атрибутів та JavaScript для розширеної перевірки."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "HTML5 валідація:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\" novalidate>\r\n  <label for=\"username\">Логін:</label>\r\n  <input\r\n    type=\"text\"\r\n    id=\"username\"\r\n    name=\"username\"\r\n    required\r\n    minlength=\"3\"\r\n    maxlength=\"20\"\r\n    pattern=\"[a-zA-Z0-9_]+\"\r\n    title=\"Тільки літери, цифри та підкреслення\"\r\n  />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" required />\r\n\r\n  <label for=\"age\">Вік:</label>\r\n  <input type=\"number\" id=\"age\" name=\"age\" min=\"18\" max=\"120\" required />\r\n\r\n  <label for=\"website\">Веб-сайт:</label>\r\n  <input type=\"url\" id=\"website\" name=\"website\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути валідації:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "required",
-                "code": true
-              },
-              {
-                "text": " — обов'язкове поле"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "minlength/maxlength",
-                "code": true
-              },
-              {
-                "text": " — мінімальна/максимальна довжина"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "min/max",
-                "code": true
-              },
-              {
-                "text": " — мінімальне/максимальне значення для чисел"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "pattern",
-                "code": true
-              },
-              {
-                "text": " — регулярний вираз"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "step",
-                "code": true
-              },
-              {
-                "text": " — крок для числових полів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "CSS для стилізації:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "input:valid {\r\n  border: 2px solid green;\r\n}\r\n\r\ninput:invalid {\r\n  border: 2px solid red;\r\n}\r\n\r\ninput:required {\r\n  background-color: #fff8dc;\r\n}\r"
-      }
-    ]
-  },
-  {
-    "question": "47. Які методи відправки даних форми ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні методи HTTP для відправки форм:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "GET метод:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/search\" method=\"get\">\r\n  <input type=\"text\" name=\"query\" placeholder=\"Пошук...\" />\r\n  <button type=\"submit\">Шукати</button>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Характеристики GET:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дані додаються до URL як параметри запиту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Видимі в адресному рядку"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна додати в закладки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обмеження по розміру даних"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для пошуку, фільтрів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "POST метод:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\">\r\n  <input type=\"text\" name=\"username\" required />\r\n  <input type=\"password\" name=\"password\" required />\r\n  <button type=\"submit\">Увійти</button>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Характеристики POST:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дані відправляються в тілі запиту"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не видимі в URL"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Немає обмежень по розміру"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для створення, оновлення даних"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Для завантаження файлів -->\r\n<form action=\"/upload\" method=\"post\" enctype=\"multipart/form-data\">\r\n  <input type=\"file\" name=\"document\" required />\r\n  <button type=\"submit\">Завантажити</button>\r\n</form>\r\n\r\n<!-- Перевизначення методу -->\r\n<form action=\"/update\" method=\"post\">\r\n  <input type=\"hidden\" name=\"_method\" value=\"PUT\" />\r\n  <button type=\"submit\">Оновити</button>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "48. Основні атрибути HTML-форм? Як вони впливають на надсилання даних з веб-сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути елемента "
-          },
-          {
-            "text": "<form>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "action",
-            "bold": true
-          },
-          {
-            "text": " — URL для відправки даних:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/process-form\" method=\"post\"></form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "method",
-            "bold": true
-          },
-          {
-            "text": " — HTTP метод (GET, POST):"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form method=\"post\">\r\n  <!-- Безпечно для конфіденційних даних -->\r\n  <form method=\"get\"><!-- Для пошуку та фільтрів --></form>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "enctype",
-            "bold": true
-          },
-          {
-            "text": " — кодування даних:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- За замовчуванням -->\r\n<form enctype=\"application/x-www-form-urlencoded\">\r\n  <!-- Для файлів -->\r\n  <form enctype=\"multipart/form-data\">\r\n    <!-- Простий текст -->\r\n    <form enctype=\"text/plain\"></form>\r\n  </form>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "target",
-            "bold": true
-          },
-          {
-            "text": " — де відкрити результат:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form target=\"_blank\">\r\n  <!-- В новому вікні -->\r\n  <form target=\"_self\">\r\n    <!-- В поточному вікні -->\r\n    <form target=\"frame1\"><!-- В конкретному фреймі --></form>\r\n  </form>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "novalidate",
-            "bold": true
-          },
-          {
-            "text": " — вимкнути HTML5 валідацію:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form novalidate>\r\n  <!-- Валідація тільки через JavaScript -->\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "autocomplete",
-            "bold": true
-          },
-          {
-            "text": " — автозаповнення:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form autocomplete=\"on\">\r\n  <!-- Увімкнути -->\r\n  <form autocomplete=\"off\"><!-- Вимкнути --></form>\r\n</form>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад повної форми:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form\r\n  action=\"/contact\"\r\n  method=\"post\"\r\n  enctype=\"multipart/form-data\"\r\n  autocomplete=\"on\"\r\n  target=\"_self\"\r\n>\r\n  <input type=\"text\" name=\"name\" autocomplete=\"name\" />\r\n  <input type=\"email\" name=\"email\" autocomplete=\"email\" />\r\n  <input type=\"file\" name=\"attachment\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      }
-    ]
-  },
-  {
-    "question": "49. Для чого використовується елемент datalist?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<datalist>",
-            "code": true
-          },
-          {
-            "text": " надає список готових варіантів для поля вводу, створюючи автодоповнення (autocomplete dropdown)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основне використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<label for=\"browser\">Оберіть браузер:</label>\r\n<input list=\"browsers\" id=\"browser\" name=\"browser\" />\r\n\r\n<datalist id=\"browsers\">\r\n  <option value=\"Chrome\"></option>\r\n  <option value=\"Firefox\"></option>\r\n  <option value=\"Safari\"></option>\r\n  <option value=\"Edge\"></option>\r\n  <option value=\"Opera\"></option>\r\n</datalist>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Користувач може обрати зі списку або ввести власний варіант"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує UX через швидкий вибір"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працює з різними типами input"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширені приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- З описом опцій -->\r\n<input list=\"languages\" name=\"language\" placeholder=\"Мова програмування\" />\r\n<datalist id=\"languages\">\r\n  <option value=\"JavaScript\" label=\"JS - Веб-розробка\"></option>\r\n  <option value=\"Python\" label=\"Python - Дані та ШІ\"></option>\r\n  <option value=\"Java\" label=\"Java - Корпоративна розробка\"></option>\r\n</datalist>\r\n\r\n<!-- Для емейлів -->\r\n<input type=\"email\" list=\"email-domains\" name=\"email\" />\r\n<datalist id=\"email-domains\">\r\n  <option value=\"@gmail.com\"></option>\r\n  <option value=\"@yahoo.com\"></option>\r\n  <option value=\"@outlook.com\"></option>\r\n</datalist>\r\n\r\n<!-- Для URL -->\r\n<input type=\"url\" list=\"sites\" name=\"website\" />\r\n<datalist id=\"sites\">\r\n  <option value=\"https://github.com/\"></option>\r\n  <option value=\"https://stackoverflow.com/\"></option>\r\n  <option value=\"https://developer.mozilla.org/\"></option>\r\n</datalist>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Підтримка браузерів:",
-            "bold": true
-          },
-          {
-            "text": " Всі сучасні браузери. У старих браузерах працює як звичайний input."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "50. Що таке елемент output у HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<output>",
-            "code": true
-          },
-          {
-            "text": " представляє результат обчислення або дії користувача. Зазвичай використовується для відображення результатів форм або динамічних розрахунків."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "for",
-                "code": true
-              },
-              {
-                "text": " — вказує на елементи, які впливають на результат"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "form",
-                "code": true
-              },
-              {
-                "text": " — пов'язує з конкретною формою"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "name",
-                "code": true
-              },
-              {
-                "text": " — ім'я для надсилання з формою"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з обчисленням:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <label for=\"quantity\">Кількість:</label>\r\n  <input type=\"number\" id=\"quantity\" name=\"quantity\" value=\"1\" min=\"1\" />\r\n\r\n  <label for=\"price\">Ціна:</label>\r\n  <input type=\"number\" id=\"price\" name=\"price\" value=\"100\" step=\"0.01\" />\r\n\r\n  <label for=\"total\">Загальна сума:</label>\r\n  <output id=\"total\" name=\"total\" for=\"quantity price\">100</output>\r\n</form>\r\n\r\n<script>\r\n  function updateTotal() {\r\n    const quantity = document.getElementById('quantity').value;\r\n    const price = document.getElementById('price').value;\r\n    const total = quantity * price;\r\n    document.getElementById('total').textContent = total.toFixed(2);\r\n  }\r\n\r\n  document.getElementById('quantity').addEventListener('input', updateTotal);\r\n  document.getElementById('price').addEventListener('input', updateTotal);\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з прогрес-баром:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <label for=\"progress-slider\">Прогрес:</label>\r\n  <input type=\"range\" id=\"progress-slider\" min=\"0\" max=\"100\" value=\"50\" />\r\n\r\n  <output id=\"progress-value\" for=\"progress-slider\">50%</output>\r\n</form>\r\n\r\n<script>\r\n  document\r\n    .getElementById('progress-slider')\r\n    .addEventListener('input', function () {\r\n      document.getElementById('progress-value').textContent = this.value + '%';\r\n    });\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантика:",
-            "bold": true
-          },
-          {
-            "text": " "
-          },
-          {
-            "text": "<output>",
-            "code": true
-          },
-          {
-            "text": " є семантично правильним способом показати результати, на відміну від "
-          },
-          {
-            "text": "<span>",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "<div>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "51. Що таке семантичний HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML — це використання тегів за їхнім змістовим призначенням ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ", а не "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " всюди)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і "
-              },
-              {
-                "text": "assistive",
-                "code": true
-              },
-              {
-                "text": "-технологій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для "
-              },
-              {
-                "text": "SEO",
-                "code": true
-              },
-              {
-                "text": " це критично: пошуковики краще розпізнають ієрархію контенту, визначають головні частини сторінки та підвищують релевантність у видачі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "52. Що таке семантичні теги HTML і чому вони важливі?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантичні теги HTML — це теги, які описують зміст і роль свого вмісту (наприклад, "
-          },
-          {
-            "text": "<header>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<main>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<article>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<footer>",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Чому важливі:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поліпшують SEO — пошукові системи краще розуміють структуру."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність — скрінрідери можуть правильно інтерпретувати вміст."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легше підтримувати та читати код."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стандартизують структуру сторінки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "53. Чим відрізняється article від section?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": " — самостійний контент, який може існувати окремо (новини, блог-пости, коментарі). Має зміст, зрозумілий поза контекстом сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": " — тематичний розділ контенту, частина більшої структури. Зазвичай має заголовок і логічно пов'язаний із рештою сторінки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<article>\r\n  <h2>Стаття про HTML5</h2>\r\n  <section>\r\n    <h3>Семантичні теги</h3>\r\n    <p>Опис семантичних тегів...</p>\r\n  </section>\r\n  <section>\r\n    <h3>Доступність</h3>\r\n    <p>Як семантика покращує доступність...</p>\r\n  </section>\r\n</article>\r"
-      }
-    ]
-  },
-  {
-    "question": "54. Що нового в HTML5 порівняно з попередніми версіями?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні нововведення HTML5:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичні теги: "
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розширені форми: нові типи "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": " (email, url, number, date, color тощо) та атрибути (required, placeholder, pattern)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мультимедіа: "
-              },
-              {
-                "text": "<audio>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<video>",
-                "code": true
-              },
-              {
-                "text": " без сторонніх плагінів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Графіка: "
-              },
-              {
-                "text": "<canvas>",
-                "code": true
-              },
-              {
-                "text": " для растрової графіки, "
-              },
-              {
-                "text": "<svg>",
-                "code": true
-              },
-              {
-                "text": " для векторної."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "API для JS: локальне сховище (localStorage, sessionStorage), геолокація, drag-and-drop, Web Workers."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Подкастинг та інтеграція: "
-              },
-              {
-                "text": "<figure>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<figcaption>",
-                "code": true
-              },
-              {
-                "text": " для зображень і підписів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращена підтримка мобільних: "
-              },
-              {
-                "text": "<meta name=\"viewport\">",
-                "code": true
-              },
-              {
-                "text": " та адаптивність."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "55. Як створити розділ на веб-сторінці за допомогою семантичних елементів HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "У HTML5 для створення розділів використовують семантичні теги:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<section>\r\n  <h2>Про нас</h2>\r\n  <p>Текст про компанію...</p>\r\n</section>\r\n\r\n<article>\r\n  <h2>Новина дня</h2>\r\n  <p>Текст новини...</p>\r\n</article>\r\n\r\n<aside>\r\n  <h3>Підказка</h3>\r\n  <p>Додаткова інформація</p>\r\n</aside>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": " — логічний розділ сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": " — самостійний блок контенту, який може існувати окремо."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<aside>",
-                "code": true
-              },
-              {
-                "text": " — побічна інформація, наприклад, сайдбар."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": " — заголовки та підвал розділів або сторінки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "56. Яка роль елемента article у HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<article>",
-            "code": true
-          },
-          {
-            "text": " — семантичний елемент для самостійного контенту, який може існувати окремо від сторінки і бути зрозумілий поза контекстом."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Новини, блоги, публікації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коментарі користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форумні повідомлення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує SEO і доступність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко стилізується та структуровано організовує контент."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "57. Чи можете ви пояснити використання елементів nav та aside у HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": " — семантичний контейнер для основної навігації по сайту: меню, посилання на розділи чи сторінки."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<nav>\r\n  <a href=\"/\">Головна</a>\r\n  <a href=\"/about\">Про нас</a>\r\n</nav>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<aside>",
-                "code": true
-              },
-              {
-                "text": " — для додаткового або побічного контенту, який не є головним, наприклад, сайдбари, підказки, реклами:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<aside>\r\n  <h3>Поради</h3>\r\n  <p>Корисна інформація для користувача</p>\r\n</aside>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Коротко: <nav> = навігація, <aside> = допоміжний або боковий контент."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "58. Як використовувати елементи figure та figcaption?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<figure>",
-                "code": true
-              },
-              {
-                "text": " — контейнер для медіа (зображення, графіка, відео) із підписом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<figcaption>",
-                "code": true
-              },
-              {
-                "text": " — підпис до медіа всередині "
-              },
-              {
-                "text": "<figure>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<figure>\r\n  <img src=\"image.jpg\" alt=\"Опис зображення\" />\r\n  <figcaption>Підпис до зображення</figcaption>\r\n</figure>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує семантику та доступність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко стилізується CSS."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "59. Як створити таблицю в HTML і які основні теги для цього використовуються?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "В HTML таблиця створюється тегом "
-          },
-          {
-            "text": "<table>",
-            "code": true
-          },
-          {
-            "text": ". Рядки — "
-          },
-          {
-            "text": "<tr>",
-            "code": true
-          },
-          {
-            "text": ", заголовки стовпців — "
-          },
-          {
-            "text": "<th>",
-            "code": true
-          },
-          {
-            "text": ", комірки — "
-          },
-          {
-            "text": "<td>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table>\r\n  <tr>\r\n    <th>Ім'я</th>\r\n    <th>Вік</th>\r\n  </tr>\r\n  <tr>\r\n    <td>Іван</td>\r\n    <td>25</td>\r\n  </tr>\r\n</table>\r"
-      }
-    ]
-  },
-  {
-    "question": "60. Що таке thead, tbody та tfoot у HTML-таблиці і для чого вони потрібні?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<thead>",
-                "code": true
-              },
-              {
-                "text": " — групує рядки заголовків таблиці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<tbody>",
-                "code": true
-              },
-              {
-                "text": " — основна частина таблиці з даними."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<tfoot>",
-                "code": true
-              },
-              {
-                "text": " — групує рядки підсумків (footer таблиці), відображається після tbody, але може рендеритися браузером перед ним для оптимізації."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table>\r\n  <thead>\r\n    <tr>\r\n      <th>Назва</th>\r\n      <th>Ціна</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>Товар 1</td>\r\n      <td>100 грн</td>\r\n    </tr>\r\n    <tr>\r\n      <td>Товар 2</td>\r\n      <td>200 грн</td>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <tr>\r\n      <td>Загалом</td>\r\n      <td>300 грн</td>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує семантику та доступність"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дозволяє стилізувати різні частини таблиці окремо"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузери можуть фіксувати заголовки при прокрутці"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "61. Що таке атрибути colspan і rowspan у HTML-таблицях?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "colspan",
-                "code": true
-              },
-              {
-                "text": " — об'єднує комірку по кількох стовпцях."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rowspan",
-                "code": true
-              },
-              {
-                "text": " — об'єднує комірку по кількох рядках."
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<td colspan=\"2\">Об'єднано 2 стовпці</td>\r\n<td rowspan=\"3\">Об'єднано 3 рядки</td>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table border=\"1\">\r\n  <tr>\r\n    <th colspan=\"2\">Заголовок на 2 колонки</th>\r\n    <th rowspan=\"2\">Вертикальний заголовок</th>\r\n  </tr>\r\n  <tr>\r\n    <td>Комірка 1</td>\r\n    <td>Комірка 2</td>\r\n  </tr>\r\n  <tr>\r\n    <td>Комірка 3</td>\r\n    <td>Комірка 4</td>\r\n    <td>Комірка 5</td>\r\n  </tr>\r\n</table>\r"
-      }
-    ]
-  },
-  {
-    "question": "62. Як зробити HTML-таблицю доступною для користувачів з екранними рідерами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати семантичні теги: "
-              },
-              {
-                "text": "<table>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<thead>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<tbody>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<tfoot>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<th>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавати атрибут scope у "
-              },
-              {
-                "text": "<th>",
-                "code": true
-              },
-              {
-                "text": " (scope=\"col\" або scope=\"row\") для зв'язку заголовків і комірок."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавати "
-              },
-              {
-                "text": "<caption>",
-                "code": true
-              },
-              {
-                "text": " для опису таблиці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникати зайвого "
-              },
-              {
-                "text": "rowspan/colspan",
-                "code": true
-              },
-              {
-                "text": ", якщо вони ускладнюють навігацію."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечити достатній контраст та видимі фокуси при навігації з клавіатури."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад доступної таблиці:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<table>\r\n  <caption>\r\n    Продажі за 2024 рік\r\n  </caption>\r\n  <thead>\r\n    <tr>\r\n      <th scope=\"col\">Місяць</th>\r\n      <th scope=\"col\">Продажі</th>\r\n      <th scope=\"col\">Прибуток</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr>\r\n      <th scope=\"row\">Січень</th>\r\n      <td>1000</td>\r\n      <td>200</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r"
-      }
-    ]
-  },
-  {
-    "question": "63. Що таке елемент canvas? І для чого він використовується?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<canvas>",
-            "code": true
-          },
-          {
-            "text": " — растровий холст для малювання графіки через JavaScript API."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ігри та інтерактивна графіка"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Складні візуалізації даних"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обробка зображень"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Анімації та ефекти"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<canvas id=\"myCanvas\" width=\"400\" height=\"200\"></canvas>\r\n\r\n<script>\r\n  const canvas = document.getElementById('myCanvas');\r\n  const ctx = canvas.getContext('2d');\r\n\r\n  // Малюємо прямокутник\r\n  ctx.fillStyle = 'blue';\r\n  ctx.fillRect(50, 50, 100, 75);\r\n\r\n  // Малюємо коло\r\n  ctx.beginPath();\r\n  ctx.arc(200, 100, 50, 0, 2 * Math.PI);\r\n  ctx.fillStyle = 'red';\r\n  ctx.fill();\r\n</script>\r"
-      }
-    ]
-  },
-  {
-    "question": "64. Різниця між canvas та svg? У яких випадках краще використовувати canvas, а в яких svg?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<canvas>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Растрова графіка (пікселі)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Малювання через JavaScript API"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підходить для ігор, складної анімації, обробки зображень"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Масштабування може погіршити якість"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Неможливо стилізувати окремі елементи CSS"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<svg>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Векторна графіка (математичні об'єкти)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Описується XML-розміткою"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підходить для іконок, логотипів, простих діаграм"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Безкінечне масштабування без втрати якості"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна стилізувати CSS та анімувати"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Коли використовувати:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Canvas",
-            "bold": true
-          },
-          {
-            "text": " → ігри, складна графіка, обробка фото, реал-тайм анімації"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "SVG",
-            "bold": true
-          },
-          {
-            "text": " → іконки, логотипи, прості діаграми, масштабована графіка"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "65. Яка різниця між елементами svg та canvas?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<svg>",
-                "code": true
-              },
-              {
-                "text": " — векторна графіка, кожен елемент DOM-структурований, масштабований без втрати якості, легкий для анімації та стилізації через CSS/JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<canvas>",
-                "code": true
-              },
-              {
-                "text": " — растровий холст, малювання відбувається через JS API, не має внутрішньої семантики елементів, масштабування може знизити якість, підходить для ігор і складної графіки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Порівняння:"
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Характеристика"
-            }
-          ],
-          [
-            {
-              "text": "SVG"
-            }
-          ],
-          [
-            {
-              "text": "Canvas"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "Тип графіки"
-              }
-            ],
-            [
-              {
-                "text": "Векторна"
-              }
-            ],
-            [
-              {
-                "text": "Растрова"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "DOM-структура"
-              }
-            ],
-            [
-              {
-                "text": "Так"
-              }
-            ],
-            [
-              {
-                "text": "Ні"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Масштабування"
-              }
-            ],
-            [
-              {
-                "text": "Без втрат"
-              }
-            ],
-            [
-              {
-                "text": "З втратами"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Стилізація CSS"
-              }
-            ],
-            [
-              {
-                "text": "Так"
-              }
-            ],
-            [
-              {
-                "text": "Обмежено"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Продуктивність"
-              }
-            ],
-            [
-              {
-                "text": "Повільніше при багатьох елементах"
-              }
-            ],
-            [
-              {
-                "text": "Швидше для складної графіки"
-              }
-            ]
-          ]
-        ]
-      }
-    ]
-  },
-  {
-    "question": "66. Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "SVG (Scalable Vector Graphics)",
-            "bold": true
-          },
-          {
-            "text": " — векторний формат для графіки, що масштабується без втрати якості."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Способи додавання SVG:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Inline SVG",
-                "bold": true
-              },
-              {
-                "text": " — безпосередньо в HTML:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<svg width=\"100\" height=\"100\">\r\n  <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\r\n</svg>\r"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Переваги:",
-                        "bold": true
-                      },
-                      {
-                        "text": " повний контроль CSS/JS, доступність"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Недоліки:",
-                        "bold": true
-                      },
-                      {
-                        "text": " збільшує розмір HTML"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Як зображення",
-                "bold": true
-              },
-              {
-                "text": " — через "
-              },
-              {
-                "text": "<img>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<img src=\"icon.svg\" alt=\"Іконка\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Переваги:",
-                "bold": true
-              },
-              {
-                "text": " кешується, компактний HTML"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Недоліки:",
-                "bold": true
-              },
-              {
-                "text": " не можна стилізувати CSS"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS background",
-                "bold": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".icon {\r\n  background-image: url('icon.svg');\r\n}\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Через `<object>` або `<embed>`",
-                "bold": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<object data=\"graphic.svg\" type=\"image/svg+xml\"></object>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Найкращий вибір:",
-            "bold": true
-          },
-          {
-            "text": " inline для іконок, що потребують стилізації; "
-          },
-          {
-            "text": "<img>",
-            "code": true
-          },
-          {
-            "text": " для статичної графіки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "67. Як створювати карти зображень у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML-карта зображень (image map) дозволяє зробити частини зображення клікабельними."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img src=\"plan.jpg\" usemap=\"#map1\" alt=\"План будівлі\" />\r\n\r\n<map name=\"map1\">\r\n  <area shape=\"rect\" coords=\"34,44,270,350\" href=\"room1.html\" alt=\"Кімната 1\" />\r\n  <area shape=\"circle\" coords=\"337,300,44\" href=\"room2.html\" alt=\"Кімната 2\" />\r\n  <area\r\n    shape=\"poly\"\r\n    coords=\"400,50,500,50,450,150\"\r\n    href=\"room3.html\"\r\n    alt=\"Кімната 3\"\r\n  />\r\n</map>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Пояснення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "usemap=\"#map1\"",
-                "code": true
-              },
-              {
-                "text": " — прив'язка картинки до карти"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<area>",
-                "code": true
-              },
-              {
-                "text": " — задає клікабельну область:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "shape=\"rect\"",
-                "code": true
-              },
-              {
-                "text": " — прямокутник (coords: x1,y1,x2,y2)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "shape=\"circle\"",
-                "code": true
-              },
-              {
-                "text": " — коло (coords: x,y,radius)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "shape=\"poly\"",
-                "code": true
-              },
-              {
-                "text": " — багатокутник (coords: x1,y1,x2,y2,x3,y3...)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — посилання при кліку"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " — альтернативний текст для доступності"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "68. Як додати аудіо та відео в HTML-документ за допомогою вбудованих тегів?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Аудіо",
-                "bold": true
-              },
-              {
-                "text": " — тег "
-              },
-              {
-                "text": "<audio>",
-                "code": true
-              },
-              {
-                "text": " з атрибутом controls:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<audio controls>\r\n  <source src=\"sound.mp3\" type=\"audio/mpeg\" />\r\n  <source src=\"sound.ogg\" type=\"audio/ogg\" />\r\n  Ваш браузер не підтримує аудіо.\r\n</audio>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відео",
-                "bold": true
-              },
-              {
-                "text": " — тег "
-              },
-              {
-                "text": "<video>",
-                "code": true
-              },
-              {
-                "text": " з атрибутом controls:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<video controls width=\"640\" height=\"360\">\r\n  <source src=\"video.mp4\" type=\"video/mp4\" />\r\n  <source src=\"video.webm\" type=\"video/webm\" />\r\n  Ваш браузер не підтримує відео.\r\n</video>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Важливо:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<source>",
-                "code": true
-              },
-              {
-                "text": " — дозволяє вказати кілька форматів для кращої сумісності"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Текст між тегами — fallback для старих браузерів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "controls",
-                "code": true
-              },
-              {
-                "text": " — показує елементи керування (play/pause/volume)"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "69. Які основні атрибути підтримують теги video та audio у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Спільні атрибути для "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": " та "
-          },
-          {
-            "text": "<audio>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "src",
-                "code": true
-              },
-              {
-                "text": " — шлях до файлу (можна замість "
-              },
-              {
-                "text": "<source>",
-                "code": true
-              },
-              {
-                "text": ")"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "controls",
-                "code": true
-              },
-              {
-                "text": " — відображає елементи керування"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "autoplay",
-                "code": true
-              },
-              {
-                "text": " — автоматичне відтворення (часто вимагає muted)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "loop",
-                "code": true
-              },
-              {
-                "text": " — повторне відтворення після завершення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "muted",
-                "code": true
-              },
-              {
-                "text": " — без звуку"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "preload",
-                "code": true
-              },
-              {
-                "text": " — підвантаження:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "none",
-                "code": true
-              },
-              {
-                "text": " — не завантажувати наперед"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "metadata",
-                "code": true
-              },
-              {
-                "text": " — тільки метадані"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "auto",
-                "code": true
-              },
-              {
-                "text": " — браузер сам вирішує"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додатково для "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "height",
-                "code": true
-              },
-              {
-                "text": " — розміри відеоплеєра"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "poster",
-                "code": true
-              },
-              {
-                "text": " — зображення-заставка до початку відтворення"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<video\r\n  controls\r\n  width=\"800\"\r\n  height=\"450\"\r\n  poster=\"preview.jpg\"\r\n  preload=\"metadata\"\r\n>\r\n  <source src=\"movie.mp4\" type=\"video/mp4\" />\r\n</video>\r"
-      }
-    ]
-  },
-  {
-    "question": "70. Як додати субтитри або підписи до відео в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використати тег "
-          },
-          {
-            "text": "<track>",
-            "code": true
-          },
-          {
-            "text": " всередині "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути "
-          },
-          {
-            "text": "<track>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "src",
-                "code": true
-              },
-              {
-                "text": " — файл субтитрів (формат .vtt)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "kind",
-                "code": true
-              },
-              {
-                "text": " — тип (subtitles, captions, descriptions, chapters, metadata)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "srclang",
-                "code": true
-              },
-              {
-                "text": " — мова субтитрів (en, uk)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "label",
-                "code": true
-              },
-              {
-                "text": " — назва треку в меню"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "default",
-                "code": true
-              },
-              {
-                "text": " — трек за замовчуванням"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<video controls>\r\n  <source src=\"movie.mp4\" type=\"video/mp4\" />\r\n  <track src=\"subtitles_en.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\" />\r\n  <track\r\n    src=\"subtitles_uk.vtt\"\r\n    kind=\"subtitles\"\r\n    srclang=\"uk\"\r\n    label=\"Українська\"\r\n    default\r\n  />\r\n  <track\r\n    src=\"descriptions.vtt\"\r\n    kind=\"descriptions\"\r\n    srclang=\"uk\"\r\n    label=\"Аудіоопис\"\r\n  />\r\n</video>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Формат .vtt файлу:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": null,
-        "content": "WEBVTT\r\n\r\n00:00:00.000 --> 00:00:03.000\r\nПривіт! Це перший рядок субтитрів.\r\n\r\n00:00:03.000 --> 00:00:06.000\r\nА це другий рядок.\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Браузер покаже вибір субтитрів, якщо формат "
-          },
-          {
-            "text": ".vtt",
-            "code": true
-          },
-          {
-            "text": " коректний."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "71. Чи можете ви пояснити призначення метатегів у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Метатеги у "
-          },
-          {
-            "text": "<head>",
-            "code": true
-          },
-          {
-            "text": " зберігають метадані про сторінку — інформацію, яку не видно користувачу, але використовують браузери, пошукові системи та сервіси."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta charset=\"UTF-8\">",
-                "code": true
-              },
-              {
-                "text": " — задає кодування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
-                "code": true
-              },
-              {
-                "text": " — адаптивність на мобільних."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta name=\"description\" content=\"Опис сторінки\">",
-                "code": true
-              },
-              {
-                "text": " — SEO."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meta name=\"robots\" content=\"index, follow\">",
-                "code": true
-              },
-              {
-                "text": " — інструкції для пошукових ботів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<head>\r\n  <meta charset=\"UTF-8\" />\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n  <meta\r\n    name=\"description\"\r\n    content=\"Короткий опис сторінки для пошукових систем\"\r\n  />\r\n  <meta name=\"keywords\" content=\"ключові, слова, для, seo\" />\r\n  <meta name=\"author\" content=\"Ім'я автора\" />\r\n  <meta name=\"robots\" content=\"index, follow\" />\r\n\r\n  <!-- Open Graph для соціальних мереж -->\r\n  <meta property=\"og:title\" content=\"Заголовок для Facebook\" />\r\n  <meta property=\"og:description\" content=\"Опис для соціальних мереж\" />\r\n  <meta property=\"og:image\" content=\"image.jpg\" />\r\n\r\n  <!-- Twitter Cards -->\r\n  <meta name=\"twitter:card\" content=\"summary_large_image\" />\r\n  <meta name=\"twitter:title\" content=\"Заголовок для Twitter\" />\r\n</head>\r"
-      }
-    ]
-  },
-  {
-    "question": "72. Як пов'язати CSS-файл з HTML-документом?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "У "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " додаємо тег:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<link rel=\"stylesheet\" href=\"styles.css\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"stylesheet\"",
-                "code": true
-              },
-              {
-                "text": " — вказує, що це файл стилів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "href",
-                "code": true
-              },
-              {
-                "text": " — шлях до CSS-файлу"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові варіанти:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Основний CSS файл -->\r\n<link rel=\"stylesheet\" href=\"css/main.css\" />\r\n\r\n<!-- CSS з медіа-запитами -->\r\n<link rel=\"stylesheet\" href=\"css/print.css\" media=\"print\" />\r\n<link rel=\"stylesheet\" href=\"css/mobile.css\" media=\"(max-width: 768px)\" />\r\n\r\n<!-- CSS з CDN -->\r\n<link\r\n  rel=\"stylesheet\"\r\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\"\r\n/>\r\n\r\n<!-- Внутрішні стилі -->\r\n<style>\r\n  body {\r\n    margin: 0;\r\n    padding: 20px;\r\n  }\r\n</style>\r"
-      }
-    ]
-  },
-  {
-    "question": "73. Як пов'язати JavaScript-файл з HTML-документом?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Через тег "
-              },
-              {
-                "text": "<script>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<script src=\"script.js\"></script>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розміщення та атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- В <head> - завантажується до рендерингу сторінки -->\r\n<head>\r\n  <script src=\"script.js\"></script>\r\n</head>\r\n\r\n<!-- Перед </body> - завантажується після HTML (рекомендовано) -->\r\n<body>\r\n  <!-- HTML контент -->\r\n  <script src=\"script.js\"></script>\r\n</body>\r\n\r\n<!-- Асинхронне завантаження -->\r\n<script src=\"script.js\" async></script>\r\n\r\n<!-- Відкладене завантаження -->\r\n<script src=\"script.js\" defer></script>\r\n\r\n<!-- Внутрішній JavaScript -->\r\n<script>\r\n  console.log('Привіт, світ!');\r\n</script>\r\n\r\n<!-- JavaScript з CDN -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js\"></script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Різниця між async та defer:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "async",
-                "code": true
-              },
-              {
-                "text": " — завантажується паралельно і виконується одразу"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "defer",
-                "code": true
-              },
-              {
-                "text": " — завантажується паралельно, але виконується після HTML"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "74. Що таке iframe і для чого його використовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<iframe>",
-            "code": true
-          },
-          {
-            "text": " — це елемент для вбудовування іншої HTML-сторінки всередину поточної сторінки."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<iframe src=\"https://example.com\" width=\"600\" height=\"400\"></iframe>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні атрибути:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<iframe\r\n  src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\r\n  width=\"560\"\r\n  height=\"315\"\r\n  frameborder=\"0\"\r\n  allowfullscreen\r\n  title=\"YouTube відео\"\r\n  loading=\"lazy\"\r\n>\r\n</iframe>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вбудовування відео",
-                "bold": true
-              },
-              {
-                "text": " (YouTube, Vimeo)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Карти",
-                "bold": true
-              },
-              {
-                "text": " (Google Maps)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Соціальні віджети",
-                "bold": true
-              },
-              {
-                "text": " (Facebook, Twitter)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зовнішні форми",
-                "bold": true
-              },
-              {
-                "text": " чи додатки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пісочниці",
-                "bold": true
-              },
-              {
-                "text": " для демонстрації коду"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути безпеки:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<iframe\r\n  src=\"untrusted-content.html\"\r\n  sandbox=\"allow-scripts allow-same-origin\"\r\n  referrerpolicy=\"no-referrer\"\r\n>\r\n</iframe>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Недоліки:",
-            "bold": true
-          },
-          {
-            "text": " може впливати на SEO, безпеку та швидкість завантаження."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "75. Як додати коментар у HTML і чому його використовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Це коментар -->\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Призначення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Пояснення коду",
-                "bold": true
-              },
-              {
-                "text": " для себе або колег"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тимчасове вимкнення",
-                "bold": true
-              },
-              {
-                "text": " частини розмітки без видалення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Позначення секцій",
-                "bold": true
-              },
-              {
-                "text": " коду для зручності навігації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Документування",
-                "bold": true
-              },
-              {
-                "text": " складної структури"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Заголовок сторінки -->\r\n<header>\r\n  <h1>Моя сторінка</h1>\r\n  <!-- TODO: додати логотип -->\r\n</header>\r\n\r\n<!-- Основний контент -->\r\n<main>\r\n  <section>\r\n    <h2>Про нас</h2>\r\n    <p>Текст про компанію...</p>\r\n  </section>\r\n\r\n  <!-- \r\n    Тимчасово приховано до завершення розробки\r\n    <section>\r\n      <h2>Наші послуги</h2>\r\n      <p>Список послуг...</p>\r\n    </section>\r\n  -->\r\n</main>\r\n\r\n<!-- \r\n  Кінець основного контенту\r\n  Далі йде підвал сторінки\r\n-->\r\n<footer>\r\n  <p>&copy; 2024 Моя компанія</p>\r\n</footer>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " коментарі видимі в коді сторінки, тому не додавайте конфіденційну інформацію!"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "76. Різниця між кнопкою та посиланням у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " — для дій:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відправка форм"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виклик JavaScript функцій"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зміна стану сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивні елементи UI"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": " — для навігації:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перехід на інші сторінки"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Переходи всередині сторінки (якорі)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завантаження файлів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Посилання на зовнішні ресурси"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади правильного використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Кнопки для дій -->\r\n<button type=\"submit\">Відправити форму</button>\r\n<button onclick=\"toggleMenu()\">Відкрити меню</button>\r\n<button type=\"button\" id=\"likeBtn\">Подобається</button>\r\n\r\n<!-- Посилання для навігації -->\r\n<a href=\"/about\">Про нас</a>\r\n<a href=\"#contacts\">Перейти до контактів</a>\r\n<a href=\"document.pdf\" download>Завантажити PDF</a>\r\n<a href=\"https://external-site.com\" target=\"_blank\">Зовнішнє посилання</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Семантична важливість:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кнопки",
-                "bold": true
-              },
-              {
-                "text": " розуміються скрінрідерами як елементи дії"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Посилання",
-                "bold": true
-              },
-              {
-                "text": " розуміються як навігаційні елементи"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це впливає на доступність та SEO"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Стилізація:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Посилання, стилізоване як кнопка (але семантично залишається посиланням) -->\r\n<a href=\"/signup\" class=\"btn\">Зареєструватися</a>\r\n\r\n<!-- Кнопка для навігації (неправильно з точки зору семантики) -->\r\n<button onclick=\"location.href='/signup'\">Зареєструватися</button>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правило:",
-            "bold": true
-          },
-          {
-            "text": " використовуйте "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": " для навігації, "
-          },
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " для дій."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "77. Як правильно створити семантичну панель навігації в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуємо семантичний тег "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": " з внутрішнім списком посилань "
-              },
-              {
-                "text": "<ul><li><a>",
-                "code": true
-              },
-              {
-                "text": ". Це забезпечує доступність і правильну структуру."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Базовий приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav>\r\n  <ul>\r\n    <li><a href=\"/\">Головна</a></li>\r\n    <li><a href=\"/about\">Про нас</a></li>\r\n    <li><a href=\"/services\">Послуги</a></li>\r\n    <li><a href=\"/contact\">Контакти</a></li>\r\n  </ul>\r\n</nav>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Розширений приклад з підменю:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav aria-label=\"Основна навігація\">\r\n  <ul>\r\n    <li><a href=\"/\" aria-current=\"page\">Головна</a></li>\r\n    <li>\r\n      <a href=\"/services\">Послуги</a>\r\n      <ul>\r\n        <li><a href=\"/services/web-design\">Веб-дизайн</a></li>\r\n        <li><a href=\"/services/development\">Розробка</a></li>\r\n        <li><a href=\"/services/seo\">SEO</a></li>\r\n      </ul>\r\n    </li>\r\n    <li><a href=\"/about\">Про нас</a></li>\r\n    <li><a href=\"/contact\">Контакти</a></li>\r\n  </ul>\r\n</nav>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Принципи семантичної навігації:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуйте `<nav>`",
-                "bold": true
-              },
-              {
-                "text": " для основних навігаційних блоків"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Структуруйте списками",
-                "bold": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "<ul><li><a>",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавайте `aria-label`",
-                "bold": true
-              },
-              {
-                "text": " для множинних навігацій"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Позначайте поточну сторінку",
-                "bold": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "aria-current=\"page\"",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечте доступність",
-                "bold": true
-              },
-              {
-                "text": " клавіатурної навігації"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "78. Як семантично правильно згорнути навігаційне меню?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для семантично правильного згортання навігаційного меню використовуйте елемент "
-          },
-          {
-            "text": "<nav>",
-            "code": true
-          },
-          {
-            "text": " всередині якого знаходяться списки з посиланнями."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад з використанням "
-          },
-          {
-            "text": "<details>",
-            "code": true
-          },
-          {
-            "text": " та "
-          },
-          {
-            "text": "<summary>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav>\r\n  <details>\r\n    <summary>Меню</summary>\r\n    <ul>\r\n      <li><a href=\"/\">Головна</a></li>\r\n      <li><a href=\"/about\">Про нас</a></li>\r\n      <li><a href=\"/services\">Послуги</a></li>\r\n      <li><a href=\"/contact\">Контакти</a></li>\r\n    </ul>"
-      }
-    ]
-  },
-  {
-    "question": "79. Як створити базове випадаюче меню в HTML і CSS без JavaScript?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуємо вкладені списки "
-              },
-              {
-                "text": "<ul>",
-                "code": true
-              },
-              {
-                "text": " і керуємо показом підменю через "
-              },
-              {
-                "text": ":hover",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav>\r\n  <ul class=\"menu\">\r\n    <li>\r\n      <a href=\"/services\">Послуги</a>\r\n      <ul class=\"dropdown\">\r\n        <li><a href=\"/services/web-development\">Веб-розробка</a></li>\r\n        <li><a href=\"/services/ui-design\">UI/UX Дизайн</a></li>\r\n        <li><a href=\"/services/seo\">SEO оптимізація</a></li>\r\n      </ul>\r\n    </li>\r\n    <li><a href=\"/about\">Про нас</a></li>\r\n    <li><a href=\"/contact\">Контакти</a></li>\r\n  </ul>\r\n</nav>\r\n\r\n<style>\r\n  /* Основні стилі меню */\r\n  .menu {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: flex;\r\n  }\r\n\r\n  .menu li {\r\n    position: relative;\r\n  }\r\n\r\n  .menu a {\r\n    display: block;\r\n    padding: 15px 20px;\r\n    text-decoration: none;\r\n    color: #333;\r\n    background: #f8f9fa;\r\n    border-right: 1px solid #ddd;\r\n  }\r\n\r\n  .menu a:hover {\r\n    background: #e9ecef;\r\n  }\r\n\r\n  /* Стилі випадаючого меню */\r\n  .dropdown {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    min-width: 200px;\r\n    background: white;\r\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n    display: none;\r\n    z-index: 1000;\r\n  }\r\n\r\n  .dropdown li {\r\n    width: 100%;\r\n  }\r\n\r\n  .dropdown a {\r\n    border-right: none;\r\n    border-bottom: 1px solid #eee;\r\n  }\r\n\r\n  /* Показати підменю при наведенні */\r\n  .menu li:hover .dropdown {\r\n    display: block;\r\n  }\r\n\r\n  /* Альтернативний варіант з плавною анімацією */\r\n  .dropdown {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .menu li:hover .dropdown {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n</style>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Працює без JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Простота реалізації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Хороша семантика"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Недоліки:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не працює на дотик (мобільні)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Обмежені можливості анімації"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Меню зникає при випадковому відведенні курсора"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "80. Різниця між meter та progress?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<meter>",
-            "code": true
-          },
-          {
-            "text": " — для виміряних значень:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Рівень заповнення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Температура"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Бали або рейтинги"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показники в певному діапазоні"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "<progress>",
-            "code": true
-          },
-          {
-            "text": " — для прогресу завдань:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завантаження файлів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Виконання процесів"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Прогрес форм"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Часові індикатори"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- <meter> для виміряного значення -->\r\n<label for=\"battery\">Рівень заряду батареї:</label>\r\n<meter id=\"battery\" value=\"0.7\" min=\"0\" max=\"1\">70%</meter>\r\n\r\n<label for=\"score\">Оцінка статті:</label>\r\n<meter id=\"score\" value=\"8\" min=\"0\" max=\"10\">8 з 10</meter>\r\n\r\n<label for=\"storage\">Використання диска:</label>\r\n<meter id=\"storage\" value=\"650\" min=\"0\" max=\"1000\" high=\"900\" optimum=\"200\">\r\n  650 GB з 1000 GB\r\n</meter>\r\n\r\n<!-- <progress> для прогресу завдання -->\r\n<label for=\"fileProgress\">Прогрес завантаження:</label>\r\n<progress id=\"fileProgress\" value=\"30\" max=\"100\">30%</progress>\r\n\r\n<label for=\"formProgress\">Заповнення форми:</label>\r\n<progress id=\"formProgress\" value=\"2\" max=\"5\">Крок 2 з 5</progress>\r\n\r\n<!-- Невизначений прогрес -->\r\n<progress>Завантажується...</progress>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути "
-          },
-          {
-            "text": "<meter>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "value",
-                "code": true
-              },
-              {
-                "text": " — поточне значення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "min",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "max",
-                "code": true
-              },
-              {
-                "text": " — діапазон"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "high",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "low",
-                "code": true
-              },
-              {
-                "text": " — пороги"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "optimum",
-                "code": true
-              },
-              {
-                "text": " — оптимальне значення"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Атрибути "
-          },
-          {
-            "text": "<progress>",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "value",
-                "code": true
-              },
-              {
-                "text": " — поточний прогрес"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "max",
-                "code": true
-              },
-              {
-                "text": " — максимальне значення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Без "
-              },
-              {
-                "text": "value",
-                "code": true
-              },
-              {
-                "text": " — невизначений прогрес"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Візуальні відмінності:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Meter",
-                "bold": true
-              },
-              {
-                "text": " зазвичай показує індикатор рівня"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Progress",
-                "bold": true
-              },
-              {
-                "text": " показує смугу прогресу"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузери стилізують їх по-різному"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "81. Що таке область перегляду (viewport) у веб-розробці та як її налаштувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Область перегляду — це видима частина веб-сторінки у браузері користувача. Вона важлива для адаптивного дизайну. Налаштовується через мета-тег у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": ":"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width=device-width",
-                "code": true
-              },
-              {
-                "text": " — ширина "
-              },
-              {
-                "text": "viewport",
-                "code": true
-              },
-              {
-                "text": " дорівнює ширині екрана пристрою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "initial-scale=1",
-                "code": true
-              },
-              {
-                "text": " — початковий масштаб сторінки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це забезпечує коректне відображення на мобільних пристроях."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "82. Розкажіть про meta-тег із name=\"viewport\"?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-тег "
-              },
-              {
-                "text": "viewport",
-                "code": true
-              },
-              {
-                "text": " контролює відображення веб-сторінки на мобільних пристроях:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні параметри:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "width=device-width",
-                "code": true
-              },
-              {
-                "text": " — ширина viewport дорівнює ширині екрана."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "initial-scale=1.0",
-                "code": true
-              },
-              {
-                "text": " — початковий рівень масштабування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "maximum-scale",
-                "code": true
-              },
-              {
-                "text": " — максимальний масштаб."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "minimum-scale",
-                "code": true
-              },
-              {
-                "text": " — мінімальний масштаб."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "user-scalable=no",
-                "code": true
-              },
-              {
-                "text": " — заборона масштабування користувачем."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Без цього тегу мобільні браузери можуть відображати сторінку неправильно."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "83. Як використовуються медіа-запити (media queries) для адаптивного дизайну в HTML/CSS?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Медіа-запити дозволяють застосовувати різні стилі залежно від розміру екрану або типу пристрою. Використовуються у CSS, а не в HTML:"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": "/* Для екранів до 768px */\r\n@media (max-width: 768px) {\r\n  body {\r\n    font-size: 14px;\r\n  }\r\n}\r\n\r\n/* Для екранів від 769px */\r\n@media (min-width: 769px) {\r\n  body {\r\n    font-size: 16px;\r\n  }\r\n}\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Так можна робити адаптивний дизайн без зміни HTML-структури."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "84. Як робити адаптивні зображення для різних пристроїв та роздільної здатності?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуються атрибути srcset та sizes у "
-              },
-              {
-                "text": "<img>",
-                "code": true
-              },
-              {
-                "text": " або елемент "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": ":"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад з `<img>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img\r\n  src=\"image-800.jpg\"\r\n  srcset=\"image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w\"\r\n  sizes=\"(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px\"\r\n  alt=\"Адаптивне зображення\"\r\n/>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад з `<picture>`:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<picture>\r\n  <source media=\"(max-width: 600px)\" srcset=\"image-400.jpg\" />\r\n  <source media=\"(max-width: 1200px)\" srcset=\"image-800.jpg\" />\r\n  <img src=\"image-1200.jpg\" alt=\"Адаптивне зображення\" />\r\n</picture>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це дозволяє браузеру обирати оптимальний розмір зображення під пристрій та економити трафік."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "85. Що таке адаптивний веб-дизайн (responsive web design)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Адаптивний веб-дизайн — це підхід до створення сайтів, коли макет і контент автоматично підлаштовуються під різні розміри екранів і пристроїв."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні принципи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкі сітки ("
-              },
-              {
-                "text": "flexible grids",
-                "code": true
-              },
-              {
-                "text": ") — елементи у відсотках, а не в пікселях."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкі зображення ("
-              },
-              {
-                "text": "flexible images",
-                "code": true
-              },
-              {
-                "text": ") — використання max-width: 100%, srcset або "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Медіа-запити ("
-              },
-              {
-                "text": "media queries",
-                "code": true
-              },
-              {
-                "text": ") — зміна стилів залежно від ширини/типу пристрою."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мета — однаково зручний UX на мобільних, планшетах і десктопах."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "86. Як зробити HTML-таблицю адаптивною для мобільних пристроїв?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Горизонтальний скрол (простий спосіб):"
-              },
-              {
-                "type": "code",
-                "language": "css",
-                "content": ".table-wrapper {\r\n  overflow-x: auto;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"table-wrapper\">\r\n  <table>\r\n    ...\r\n  </table>\r\n</div>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перетворення в картки на малих екранах через CSS (display: block + ::before з назвами колонок)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS Grid / Flexbox для кастомних адаптивних таблиць."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізувати кількість колонок для мобільних."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "87. Що таке srcset? Як працює srcset?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "srcset",
-                "code": true
-              },
-              {
-                "text": " — атрибут для адаптивних зображень, який дозволяє браузеру обирати найкращий варіант зображення залежно від умов (роздільності екрану, ширини viewport)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Синтаксис:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<img\r\n  src=\"image-800.jpg\"\r\n  srcset=\"image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w\"\r\n  sizes=\"(max-width: 600px) 400px, 800px\"\r\n  alt=\"Зображення\"\r\n/>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "400w, 800w, 1200w",
-                "code": true
-              },
-              {
-                "text": " — дескриптори ширини зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "sizes",
-                "code": true
-              },
-              {
-                "text": " — підказка браузеру про розмір відображення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Браузер автоматично вибирає найбільш підходящий файл для поточних умов."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "88. Навіщо використовується елемент picture?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": " надає більше контролю над адаптивними зображеннями порівняно з "
-              },
-              {
-                "text": "srcset",
-                "code": true
-              },
-              {
-                "text": ". Дозволяє:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати різні формати зображень (WebP, AVIF для сучасних браузерів)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Показувати різні зображення на різних пристроях (art direction)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<picture>\r\n  <source media=\"(max-width: 600px)\" srcset=\"mobile.jpg\" />\r\n  <source media=\"(max-width: 1200px)\" srcset=\"tablet.jpg\" />\r\n  <source srcset=\"desktop.webp\" type=\"image/webp\" />\r\n  <img src=\"desktop.jpg\" alt=\"Основне зображення\" />\r\n</picture>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це забезпечує кращу оптимізацію та UX на різних пристроях."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "89. Що таке доступність (accessibility) і чому вона важлива у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Доступність — це практика створення веб-сайтів і застосунків, які можуть використовувати люди з різними обмеженнями (зір, слух, моторика, когнітивні особливості)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Чому важлива:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечує рівний доступ до інформації для всіх користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підвищує SEO і відповідність стандартам (WCAG)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшує ризик юридичних проблем."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує загальний UX для всіх користувачів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Прості кроки:",
-            "bold": true
-          },
-          {
-            "text": " семантичний HTML, alt-теги для зображень, достатній контраст, клавіатурна навігація."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "90. Як підвищити доступність веб-сайту (web accessibility)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні практики:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML — використовуйте правильні теги ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<button>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Alt-тексти для зображень — описують зміст для користувачів з екранними читачами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Контрастність — достатній контраст тексту і фону."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Клавіатурна навігація — забезпечити доступ до всіх інтерактивних елементів через клавіатуру."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ARIA-атрибути — для додаткового опису ролей, станів та властивостей елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форми та інтерфейси — підписані поля, зрозумілі повідомлення про помилки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відео та аудіо — субтитри, транскрипти, аудіоописи."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це підвищує UX для всіх і забезпечує відповідність стандартам WCAG."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "91. Що таке ARIA-ролі і як їх використовувати у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "ARIA (Accessible Rich Internet Applications) — це набір атрибутів, які допомагають екранним читачам та іншим допоміжним технологіям розуміти призначення та стан елементів, особливо динамічних."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button aria-label=\"Закрити модальне вікно\">×</button>\r\n<div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">\r\n  <h2 id=\"modalTitle\">Форма зворотного зв'язку</h2>\r\n</div>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "role",
-                "code": true
-              },
-              {
-                "text": " — визначає тип елемента (button, dialog, alert)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "aria-label",
-                "code": true
-              },
-              {
-                "text": " — додає опис для елементів без видимого тексту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "aria-labelledby",
-                "code": true
-              },
-              {
-                "text": " / "
-              },
-              {
-                "text": "aria-describedby",
-                "code": true
-              },
-              {
-                "text": " — пов'язує елемент з текстовим описом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "aria-hidden=\"true\"",
-                "code": true
-              },
-              {
-                "text": " — ховає елемент від допоміжних технологій."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовуйте ARIA тільки коли семантичний HTML не достатній."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "92. Як використовувати атрибут tabindex у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex",
-                "code": true
-              },
-              {
-                "text": " визначає порядок фокусування елементів при навігації клавішею Tab."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex=\"0\"",
-                "code": true
-              },
-              {
-                "text": " — елемент доступний у природному порядку документу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex=\"-1\"",
-                "code": true
-              },
-              {
-                "text": " — елемент не доступний через Tab, але його можна сфокусувати програмно (.focus())."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "tabindex=\"1\", 2, …",
-                "code": true
-              },
-              {
-                "text": " — визначає конкретний порядок фокусування (не рекомендується, бо ускладнює підтримку)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"text\" tabindex=\"1\" />\r\n<button tabindex=\"2\">Надіслати</button>\r\n<a href=\"#\" tabindex=\"3\">Детальніше</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується для покращення доступності і контролю порядку навігації."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "93. Як зробити зображення доступними для всіх користувачів?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Атрибут alt",
-                "bold": true
-              },
-              {
-                "text": " — короткий опис змісту зображення:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<img src=\"logo.png\" alt=\"Логотип компанії\" />\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Порожній alt=\"\"",
-                "bold": true
-              },
-              {
-                "text": " — для декоративних зображень, щоб екранні читачі їх ігнорували."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Текстова альтернатива для складних графіків або діаграм",
-                "bold": true
-              },
-              {
-                "text": " — через "
-              },
-              {
-                "text": "<figcaption>",
-                "code": true
-              },
-              {
-                "text": " або окремий опис."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Контрастність та розмір",
-                "bold": true
-              },
-              {
-                "text": " — зображення повинні бути чіткими і читабельними."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не покладатися тільки на колір",
-                "bold": true
-              },
-              {
-                "text": " — важлива додаткова інформація для людей з порушеннями зору."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це забезпечує доступність і кращий UX для користувачів з обмеженими можливостями."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "94. Які техніки оптимізації HTML допомагають у SEO?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання семантичних тегів ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коректна структура заголовків ("
-              },
-              {
-                "text": "<h1>–<h6>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-теги: "
-              },
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "meta description",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "viewport",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Атрибути "
-              },
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " для зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Чистий і валідний "
-              },
-              {
-                "text": "HTML",
-                "code": true
-              },
-              {
-                "text": " без дублікатів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання структурованих даних ("
-              },
-              {
-                "text": "Schema.org",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація швидкості завантаження (мінімізація "
-              },
-              {
-                "text": "DOM",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "lazy-load",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "95. Що таке семантичний HTML і яку роль він відіграє у SEO?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML — це використання тегів за їхнім змістовим призначенням ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<nav>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<footer>",
-                "code": true
-              },
-              {
-                "text": ", а не "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " всюди)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це робить структуру сторінки зрозумілішою для браузерів, пошукових систем і "
-              },
-              {
-                "text": "assistive",
-                "code": true
-              },
-              {
-                "text": "-технологій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Для "
-              },
-              {
-                "text": "SEO",
-                "code": true
-              },
-              {
-                "text": " це критично: пошуковики краще розпізнають ієрархію контенту, визначають головні частини сторінки та підвищують релевантність у видачі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Семантична розмітка = краща доступність + зрозуміла структура + підсилення SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "96. Яке значення мають теги заголовків h1 – h6 для SEO?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<h1>",
-                "code": true
-              },
-              {
-                "text": " — головний заголовок сторінки, має бути один; сигналізує пошуковикам про основну тему."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<h2>–<h3>",
-                "code": true
-              },
-              {
-                "text": " — підзаголовки, що структурують контент і допомагають пошуковим системам зрозуміти ієрархію."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<h4>–<h6>",
-                "code": true
-              },
-              {
-                "text": " — деталізація дрібніших розділів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання ключових слів у заголовках покращує релевантність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Правильна ієрархія покращує доступність і юзабіліті, що також враховується пошуковими системами."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Заголовки = «карта сторінки» для SEO й користувачів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "97. Як структуровані дані (Schema.org) впливають на SEO та чому їх варто використовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Структуровані дані — це спеціальна розмітка (JSON-LD, microdata, RDFa), яка пояснює пошуковим системам значення контенту (напр. продукт, стаття, подія)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завдяки схемам пошуковики можуть показувати rich snippets: рейтинг, ціну, FAQ, дату публікації тощо."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це покращує CTR (користувачі частіше клікають по результату)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вони не напряму підвищують рейтинг, але допомагають пошуковим системам краще індексувати сторінку та зробити її більш привабливою у видачі."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад JSON-LD для статті:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<script type=\"application/ld+json\">\r\n  {\r\n    \"@context\": \"https://schema.org\",\r\n    \"@type\": \"Article\",\r\n    \"headline\": \"Як оптимізувати HTML для SEO\",\r\n    \"author\": { \"@type\": \"Person\", \"name\": \"Іван Іванов\" },\r\n    \"datePublished\": \"2025-08-18\",\r\n    \"publisher\": {\r\n      \"@type\": \"Organization\",\r\n      \"name\": \"MySite\"\r\n    }\r\n  }\r\n</script>\r"
-      }
-    ]
-  },
-  {
-    "question": "98. Які найкращі практики використання HTML допомагають у SEO-оптимізації сайту?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати семантичну розмітку ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Один "
-              },
-              {
-                "text": "<h1>",
-                "code": true
-              },
-              {
-                "text": " на сторінку, чітка ієрархія заголовків."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Заповнювати "
-              },
-              {
-                "text": "title",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "meta description",
-                "code": true
-              },
-              {
-                "text": " з ключовими словами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додавати "
-              },
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " для зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізувати URL-адреси (короткі, зрозумілі, з ключовими словами)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати структуровані дані ("
-              },
-              {
-                "text": "Schema.org",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникати дублювання контенту, застосовувати "
-              },
-              {
-                "text": "canonical",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечувати швидке завантаження ("
-              },
-              {
-                "text": "lazy-loading",
-                "code": true
-              },
-              {
-                "text": ", мінімізація "
-              },
-              {
-                "text": "DOM",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Робити HTML доступним: "
-              },
-              {
-                "text": "aria",
-                "code": true
-              },
-              {
-                "text": "-атрибути, правильні форми, семантичні елементи."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Правильний "
-          },
-          {
-            "text": "HTML",
-            "code": true
-          },
-          {
-            "text": " = краща індексація + зручність для користувача + кращі позиції у видачі."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "99. Способи покращення продуктивності веб-сторінки під час використання HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати gzip/brotli стиснення на сервері."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кешування (HTTP headers, Service Worker)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Critical CSS inline → решта асинхронно."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ледаче завантаження (loading=\"lazy\") для зображень/iframe."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання CDN для статичних ресурсів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізувати DOM: мінімальна кількість елементів, уникати глибокої вкладеності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати атрибути async/defer для скриптів:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<script src=\"script.js\" defer></script>\r\n<script src=\"analytics.js\" async></script>\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Кожен з цих кроків покращує швидкість завантаження та взаємодії користувача."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "100. Що таке категорії контенту в HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Категорії контенту в HTML5 — це класифікація елементів за їхньою роллю та способом використання. Основні категорії:"
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Головні категорії:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Flow content",
-                "bold": true
-              },
-              {
-                "text": " — більшість елементів, які можуть з'являтися у "
-              },
-              {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " (p, div, span, h1-h6)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Sectioning content",
-                "bold": true
-              },
-              {
-                "text": " — створюють розділи в документі (article, section, nav, aside)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Heading content",
-                "bold": true
-              },
-              {
-                "text": " — заголовки (h1-h6)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Phrasing content",
-                "bold": true
-              },
-              {
-                "text": " — текст та inline-елементи (a, span, strong, em)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Embedded content",
-                "bold": true
-              },
-              {
-                "text": " — зовнішній контент (img, video, audio, iframe)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Interactive content",
-                "bold": true
-              },
-              {
-                "text": " — елементи для взаємодії (button, input, textarea, select)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Спеціальні категорії:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Metadata content",
-                "bold": true
-              },
-              {
-                "text": " — елементи у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " (title, meta, link, script)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Form-associated content",
-                "bold": true
-              },
-              {
-                "text": " — елементи форм (input, button, select, textarea)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Розуміння категорій допомагає правильно структурувати HTML та дотримуватись стандартів валідності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "101. Що таке marquee у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<marquee>",
-                "code": true
-              },
-              {
-                "text": " — застарілий тег, який створював рухомий текст або зображення на веб-сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент автоматично прокручував контент горизонтально або вертикально."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<marquee direction=\"left\" behavior=\"scroll\"\r\n  >Рухомий текст зліва направо</marquee\r\n>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Чому застарілий:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поганий UX — відволікає та дратує користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Проблеми з доступністю — ускладнює читання для людей з дислексією."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не підтримується в HTML5 стандарті."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Альтернатива:",
-            "bold": true
-          },
-          {
-            "text": " CSS animations або JavaScript для створення контрольованих анімацій."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "102. Що таке властивість valueAsNumber?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Властивість "
-          },
-          {
-            "text": "valueAsNumber",
-            "code": true
-          },
-          {
-            "text": " повертає значення елемента форми як число. Воно доступне для елементів, таких як "
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": " з типами "
-          },
-          {
-            "text": "number",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "range",
-            "code": true
-          },
-          {
-            "text": " та іншими, де очікується числове введення. Якщо значення не число, властивість повертає "
-          },
-          {
-            "text": "NaN",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<input type=\"number\" id=\"age\" value=\"25\" />\r\n<script>\r\n  const input = document.getElementById('age');\r\n  console.log(input.valueAsNumber); // 25 (як число)\r\n  console.log(input.value); // \"25\" (як рядок)\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це зручно для роботи з числовими розрахунками без додаткового перетворення типів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "103. Навіщо використовується атрибут capture?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут capture використовується в елементах форми, таких як "
-          },
-          {
-            "text": "<input type=\"file\">",
-            "code": true
-          },
-          {
-            "text": ", для запуску камери або мікрофона замість вибору файлу з пам'яті пристрою. Це дозволяє користувачу безпосередньо зробити фото або записати аудіо."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад використання атрибута "
-          },
-          {
-            "text": "capture",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form>\r\n  <label for=\"camera\">Зробити фото:</label>\r\n  <input\r\n    type=\"file\"\r\n    id=\"camera\"\r\n    name=\"camera\"\r\n    accept=\"image/*\"\r\n    capture=\"camera\"\r\n  />\r\n\r\n  <label for=\"audio\">Записати звук:</label>\r\n  <input\r\n    type=\"file\"\r\n    id=\"audio\"\r\n    name=\"audio\"\r\n    accept=\"audio/*\"\r\n    capture=\"microphone\"\r\n  />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Особливо корисно для мобільних додатків, де потрібен швидкий доступ до камери чи мікрофона."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "104. Для чого використовується атрибут decoding enterkeyhint novalidate inputmode pattern?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`decoding`",
-                "bold": true
-              },
-              {
-                "text": ": Визначає, як браузер має обробляти зображення:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <img src=\"photo.jpg\" decoding=\"async\" alt=\"Фото\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Значення: "
-          },
-          {
-            "text": "sync",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "async",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "auto",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`enterkeyhint`",
-                "bold": true
-              },
-              {
-                "text": ": Дає браузеру підказку, що робити при натисканні Enter на віртуальній клавіатурі:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <input type=\"text\" enterkeyhint=\"search\" placeholder=\"Пошук...\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Значення: "
-          },
-          {
-            "text": "enter",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "done",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "go",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "next",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "previous",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "search",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "send",
-            "code": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`novalidate`",
-                "bold": true
-              },
-              {
-                "text": ": Вимикає валідацію форми при її відправці:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <form novalidate>\r\n    <input type=\"email\" required />\r\n  </form>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`inputmode`",
-                "bold": true
-              },
-              {
-                "text": ": Вказує тип введення для віртуальної клавіатури:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <input type=\"text\" inputmode=\"numeric\" placeholder=\"Телефон\" />\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "`pattern`",
-                "bold": true
-              },
-              {
-                "text": ": Задає регулярний вираз для перевірки введеного значення:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "  <input\r\n    type=\"text\"\r\n    pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\"\r\n    placeholder=\"123-456-7890\"\r\n  />\r"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "105. Що таке і навіщо потрібний атрибут rel=\"nofollow\" у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут "
-          },
-          {
-            "text": "rel=\"nofollow\"",
-            "code": true
-          },
-          {
-            "text": " вказує пошуковим системам не передавати \"link juice\" (вагу посилання) на цільову сторінку."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<a href=\"https://example.com\" rel=\"nofollow\">Зовнішнє посилання</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Навіщо потрібен:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-контроль",
-                "bold": true
-              },
-              {
-                "text": " — не передавати рейтинг на ненадійні або рекламні сайти."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Спам-захист",
-                "bold": true
-              },
-              {
-                "text": " — запобігання зловживанню коментарями для просування сайтів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реклама",
-                "bold": true
-              },
-              {
-                "text": " — позначення оплачених посилань для відповідності вимогам пошуковиків."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові значення rel:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"noopener\"",
-                "code": true
-              },
-              {
-                "text": " — безпека при "
-              },
-              {
-                "text": "target=\"_blank\"",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"noreferrer\"",
-                "code": true
-              },
-              {
-                "text": " — не передавати referrer"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "rel=\"sponsored\"",
-                "code": true
-              },
-              {
-                "text": " — для рекламних посилань"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "106. Навіщо потрібен атрибут autocomplete?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Значення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "on",
-                "code": true
-              },
-              {
-                "text": " — дозволяє автозаповнення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "off",
-                "code": true
-              },
-              {
-                "text": " — вимикає автозаповнення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Специфічні значення: "
-              },
-              {
-                "text": "name",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "email",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "current-password",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "new-password",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "tel",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "address-line1",
-                "code": true
-              },
-              {
-                "text": " тощо"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form autocomplete=\"on\">\r\n  <input type=\"text\" name=\"name\" autocomplete=\"name\" placeholder=\"Ім'я\" />\r\n  <input type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"Email\" />\r\n  <input type=\"password\" name=\"password\" autocomplete=\"current-password\" />\r\n</form>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Покращує UX — користувачі швидше заповнюють форми завдяки автопідказкам браузера."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "107. Як можна приховати елемент розмітки без використання CSS і JS?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Елемент можна приховати за допомогою атрибуту "
-          },
-          {
-            "text": "hidden",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div hidden>Цей елемент прихований</div>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Особливості атрибута "
-          },
-          {
-            "text": "hidden",
-            "code": true
-          },
-          {
-            "text": ":"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Це булевий атрибут — його наявність робить елемент невидимим."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Елемент повністю видаляється з візуального потоку."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантично означає, що контент зараз не релевантний."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Еквівалент CSS "
-              },
-              {
-                "text": "display: none",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Порівняння з іншими способами:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Атрибут hidden -->\r\n<p hidden>Прихований текст</p>\r\n\r\n<!-- Можна змінювати через JavaScript -->\r\n<script>\r\n  document.querySelector('p').hidden = false; // показати\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це найпростіший спосіб приховати контент без CSS, особливо для динамічних змін через JavaScript."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "108. Що таке Geolocation API у браузері та як його застосовують у веброзробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Geolocation API — вбудований у браузери інтерфейс, який дозволяє отримати географічне положення користувача (координати широти й довготи)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання потребує згоди користувача."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Застосовується для карт, локальних сервісів, геотаргетингу."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "if (navigator.geolocation) {\r\n  navigator.geolocation.getCurrentPosition(\r\n    position => {\r\n      console.log('Lat:', position.coords.latitude);\r\n      console.log('Lng:', position.coords.longitude);\r\n    },\r\n    error => {\r\n      console.error('Помилка:', error.message);\r\n    }\r\n  );\r\n}\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Основні методи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "getCurrentPosition()",
-                "code": true
-              },
-              {
-                "text": " — поточна позиція"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "watchPosition()",
-                "code": true
-              },
-              {
-                "text": " — відстеження змін позиції"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "clearWatch()",
-                "code": true
-              },
-              {
-                "text": " — зупинка відстеження"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Підтримується більшістю сучасних браузерів, але точність залежить від пристрою (GPS, Wi-Fi, IP)."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "109. Як у вебдодатках використовувати Local Storage і Session Storage?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Це частина Web Storage API для зберігання даних у браузері."
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "localStorage",
-                "code": true
-              },
-              {
-                "text": " — зберігає дані безстроково (доки користувач не очистить вручну або додаток не видалить)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "sessionStorage",
-                "code": true
-              },
-              {
-                "text": " — зберігає дані тільки в межах поточної сесії браузера (закрив вкладку = дані зникають)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "// Local Storage\r\nlocalStorage.setItem('username', 'Viktor');\r\nconsole.log(localStorage.getItem('username')); // Viktor\r\nlocalStorage.removeItem('username');\r\n\r\n// Session Storage\r\nsessionStorage.setItem('theme', 'dark');\r\nconsole.log(sessionStorage.getItem('theme')); // dark\r\nsessionStorage.clear();\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Local Storage",
-                "code": true
-              },
-              {
-                "text": " → збереження налаштувань, токенів, кешованих даних."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Session Storage",
-                "code": true
-              },
-              {
-                "text": " → тимчасові дані (форма, стан сторінки)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Обидва працюють тільки з рядками (для об'єктів треба "
-          },
-          {
-            "text": "JSON.stringify",
-            "code": true
-          },
-          {
-            "text": " / "
-          },
-          {
-            "text": "JSON.parse",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "110. Як працює Drag and Drop API у браузері та де його застосовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Drag and Drop API дозволяє перетягувати елементи на сторінці та обробляти їх \"скидання\"."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключові події:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dragstart",
-                "code": true
-              },
-              {
-                "text": " — початок перетягування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dragover",
-                "code": true
-              },
-              {
-                "text": " — об'єкт знаходиться над зоною скидання (потрібно викликати event.preventDefault())."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "drop",
-                "code": true
-              },
-              {
-                "text": " — елемент скинуто в зону."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dragend",
-                "code": true
-              },
-              {
-                "text": " — завершення перетягування."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div id=\"drag\" draggable=\"true\">Перетягни мене</div>\r\n<div id=\"drop\" style=\"width:200px;height:200px;border:1px solid black;\">\r\n  Зона скидання\r\n</div>\r\n\r\n<script>\r\n  const drag = document.getElementById('drag');\r\n  const drop = document.getElementById('drop');\r\n\r\n  drag.addEventListener('dragstart', e => {\r\n    e.dataTransfer.setData('text/plain', drag.id);\r\n  });\r\n\r\n  drop.addEventListener('dragover', e => {\r\n    e.preventDefault(); // дозволяє скидання\r\n  });\r\n\r\n  drop.addEventListener('drop', e => {\r\n    e.preventDefault();\r\n    const id = e.dataTransfer.getData('text');\r\n    const el = document.getElementById(id);\r\n    drop.appendChild(el);\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реалізація "
-              },
-              {
-                "text": "drag-and-drop",
-                "code": true
-              },
-              {
-                "text": " інтерфейсів (сортування списків, kanban-дошки)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завантаження файлів через \"перетягни й скинь\"."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивні UI (редактори, кастомізація блоків)."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "111. Що таке Fullscreen API у браузері та для чого його застосовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Fullscreen API дозволяє елементу сторінки (відео, зображення, canvas, div) переходити в повноекранний режим."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для медіа (відеоплеєри, презентації, ігри, карти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підвищує зручність користувача, коли потрібна максимальна концентрація на контенті."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "const elem = document.documentElement;\r\n\r\n// Увійти в повноекранний режим\r\nfunction openFullscreen() {\r\n  if (elem.requestFullscreen) {\r\n    elem.requestFullscreen();\r\n  }\r\n}\r\n\r\n// Вийти з повноекранного режиму\r\nfunction closeFullscreen() {\r\n  if (document.exitFullscreen) {\r\n    document.exitFullscreen();\r\n  }\r\n}\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується разом із подіями "
-          },
-          {
-            "text": "fullscreenchange",
-            "code": true
-          },
-          {
-            "text": ", щоб реагувати на зміни стану."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "112. Що таке ApplicationCache в HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`ApplicationCache`",
-            "bold": true
-          },
-          {
-            "text": " в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з'єднання."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Особливості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувався для створення офлайн-додатків"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Визначався через атрибут "
-              },
-              {
-                "text": "manifest",
-                "code": true
-              },
-              {
-                "text": " в HTML"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дозволяв кешувати статичні ресурси"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад застарілого використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<html manifest=\"cache.appcache\">\r\n  <head>\r\n    <title>Офлайн додаток</title>\r\n  </head>\r\n  <body>\r\n    ...\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як "
-          },
-          {
-            "text": "Service Workers",
-            "bold": true
-          },
-          {
-            "text": ", які надають більш гнучкі можливості для офлайн-функціональності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "113. Як обробляти події, що надходять від сервера, на фронтенді?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для взаємодії з подіями сервера зазвичай використовують WebSocket або Server-Sent Events (SSE)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "1. Server-Sent Events (SSE) — для односпрямованих подій від сервера:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "const eventSource = new EventSource('/events');\r\n\r\neventSource.onmessage = event => {\r\n  console.log('Нові дані від сервера:', event.data);\r\n};\r\n\r\neventSource.onerror = err => {\r\n  console.error('Помилка SSE:', err);\r\n};\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "2. WebSocket — для двосторонньої взаємодії:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "javascript",
-        "content": "const socket = new WebSocket('ws://localhost:8080');\r\n\r\nsocket.onopen = () => {\r\n  console.log('З'єднання встановлено');\r\n};\r\n\r\nsocket.onmessage = (event) => {\r\n  console.log('Повідомлення від сервера:', event.data);\r\n};\r\n\r\nsocket.onerror = (err) => {\r\n  console.error('Помилка WebSocket:', err);\r\n};\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реал-time оновлення UI (чат, сповіщення, лічильники)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стримінг даних без перезавантаження сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Двостороннє спілкування між клієнтом і сервером."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "114. Як відобразити сторінку кількома мовами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна зробити кількамовність так:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Окремі HTML-файли для кожної мови:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<!-- index-en.html -->\r\n<html lang=\"en\">\r\n  <head>\r\n    <title>Welcome</title>\r\n  </head>\r\n  <body>\r\n    <h1>Welcome to our site</h1>\r\n  </body>\r\n</html>\r\n\r\n<!-- index-uk.html -->\r\n<html lang=\"uk\">\r\n  <head>\r\n    <title>Ласкаво просимо</title>\r\n  </head>\r\n  <body>\r\n    <h1>Ласкаво просимо на наш сайт</h1>\r\n  </body>\r\n</html>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Серверна локалізація:",
-                "bold": true
-              },
-              {
-                "text": "Сервер віддає потрібну мову залежно від налаштувань користувача чи URL (/en/, /uk/)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript + JSON-файли перекладів:",
-                "bold": true
-              },
-              {
-                "text": "Підвантаження текстів без перезавантаження сторінки (часто у SPA)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Фреймворки з i18n:",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "react-i18next, vue-i18n, Angular i18n."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Важливо:",
-            "bold": true
-          },
-          {
-            "text": " Для базового HTML обов'язково вказувати "
-          },
-          {
-            "text": "lang=\"...\"",
-            "code": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": "meta charset=\"UTF-8\"",
-            "code": true
-          },
-          {
-            "text": "."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "115. Як правильно задавати і обробляти кодування символів у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовують UTF-8, щоб підтримувати всі символи (латиницю, кирилицю, емодзі тощо)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вказують у "
-              },
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " сторінки:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<meta charset=\"UTF-8\" />\r"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Додаткові рекомендації:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Сервер також має надсилати правильний заголовок:"
-              },
-              {
-                "type": "code",
-                "language": null,
-                "content": "  Content-Type: text/html; charset=UTF-8\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання UTF-8 запобігає появі \"кракозябр\" при відображенні тексту."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " всі HTML, CSS і JS файли зберігати в UTF-8 без BOM (Byte Order Mark)."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад правильного кодування:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<html lang=\"uk\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <title>Український текст відображається правильно</title>\r\n  </head>\r\n  <body>\r\n    <p>Привіт! Це українські символи: ї, є, ґ, щ</p>\r\n  </body>\r\n</html>\r"
-      }
-    ]
-  },
-  {
-    "question": "116. Що робить атрибут lang у HTML і чому він важливий?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут lang визначає мову контенту елемента або сторінки:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<html lang=\"uk\">\r\n  <body>\r\n    <p>Це український текст</p>\r\n    <p lang=\"en\">This is English text</p>\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Важливість:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO:",
-                "bold": true
-              },
-              {
-                "text": " Допомагає пошуковим системам і поліпшує ранжування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність:",
-                "bold": true
-              },
-              {
-                "text": " Читачі екрану правильно озвучують текст з правильною вимовою."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Локалізація:",
-                "bold": true
-              },
-              {
-                "text": " Впливає на правильне відображення шрифтів і форматування дат, чисел."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузерні функції:",
-                "bold": true
-              },
-              {
-                "text": " Автоматичні перекладачі працюють точніше."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Основна мова документа -->\r\n<html lang=\"uk\">\r\n  <!-- Окремі фрагменти іншими мовами -->\r\n  <blockquote lang=\"en\">\"To be or not to be, that is the question\"</blockquote>\r\n\r\n  <!-- Для багатомовних сайтів -->\r\n  <div lang=\"fr\">Bonjour le monde!</div>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " завжди вказувати lang на "
-          },
-          {
-            "text": "<html>",
-            "code": true
-          },
-          {
-            "text": " і при необхідності на внутрішніх елементах з іншою мовою."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "117. Як у HTML враховувати підтримку напрямку тексту LTR (зліва направо) та RTL (справа наліво)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовують атрибут dir:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dir=\"ltr\"",
-                "code": true
-              },
-              {
-                "text": " — текст зліва направо (за замовчуванням для більшості мов)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "dir=\"rtl\"",
-                "code": true
-              },
-              {
-                "text": " — текст справа наліво (арабська, іврит)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<p dir=\"ltr\">Hello, world! → (зліва направо)</p>\r\n<p dir=\"rtl\">مرحبا بالعالم ← (справа наліво)</p>\r\n\r\n<!-- Змішаний контент -->\r\n<div dir=\"rtl\">\r\n  <p>نص عربي</p>\r\n  <p dir=\"ltr\">English text in RTL context</p>\r\n</div>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Комбінування з CSS:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "css",
-        "content": "[dir='rtl'] {\r\n  text-align: right;\r\n}\r\n\r\n[dir='rtl'] .menu {\r\n  float: right;\r\n}\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Практичні міркування:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна ставити на "
-              },
-              {
-                "text": "<html>",
-                "code": true
-              },
-              {
-                "text": " або окремі елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Потрібно поєднувати з CSS, якщо є специфічне вирівнювання чи флоати (text-align, float, margin)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Враховують при мультимовних сайтах, щоб макет і UI не ламалися."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика:",
-            "bold": true
-          },
-          {
-            "text": " для мультимовних проєктів задавати lang + dir на кореневому елементі й контролювати локально там, де мова змінюється."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "118. Яке значення та користь має використання \"хлібних крихт\" (breadcrumbs) у веб-навігації?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує юзабіліті:",
-                "bold": true
-              },
-              {
-                "text": " користувач бачить своє місце в ієрархії сайту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Швидка навігація:",
-                "bold": true
-              },
-              {
-                "text": " дозволяє швидко перейти на вищі рівні структури."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшує кліки:",
-                "bold": true
-              },
-              {
-                "text": " скорочує кількість кліків до потрібної сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-переваги:",
-                "bold": true
-              },
-              {
-                "text": " має позитивний вплив на SEO (пошуковики краще розуміють структуру сайту)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад HTML для breadcrumbs:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<nav aria-label=\"Breadcrumb\">\r\n  <ol class=\"breadcrumb\">\r\n    <li><a href=\"/\">Головна</a></li>\r\n    <li><a href=\"/category\">Категорія</a></li>\r\n    <li><a href=\"/category/subcategory\">Підкategорія</a></li>\r\n    <li aria-current=\"page\">Поточна сторінка</li>\r\n  </ol>\r\n</nav>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Структуровані дані для SEO:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<script type=\"application/ld+json\">\r\n  {\r\n    \"@context\": \"https://schema.org\",\r\n    \"@type\": \"BreadcrumbList\",\r\n    \"itemListElement\": [\r\n      {\r\n        \"@type\": \"ListItem\",\r\n        \"position\": 1,\r\n        \"name\": \"Головна\",\r\n        \"item\": \"https://example.com/\"\r\n      },\r\n      {\r\n        \"@type\": \"ListItem\",\r\n        \"position\": 2,\r\n        \"name\": \"Категорія\",\r\n        \"item\": \"https://example.com/category\"\r\n      }\r\n    ]\r\n  }\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Breadcrumbs особливо корисні для великих сайтів з глибокою ієрархією контенту."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "119. Як створити розсувне (collapsible/accordion) меню в HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Метод 1: Через теги "
-          },
-          {
-            "text": "<details>",
-            "code": true
-          },
-          {
-            "text": " і "
-          },
-          {
-            "text": "<summary>",
-            "code": true
-          },
-          {
-            "text": " (нативний HTML):"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<details>\r\n  <summary>Services</summary>\r\n  <ul>\r\n    <li><a href=\"#\">Web Development</a></li>\r\n    <li><a href=\"#\">UI/UX Design</a></li>\r\n    <li><a href=\"#\">SEO</a></li>\r\n  </ul>"
-      }
-    ]
-  },
-  {
-    "question": "Products",
-    "category": "general",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<ul> <li><a href=\"#\">Product A</a></li> <li><a href=\"#\">Product B</a></li> </ul>"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "",
-    "category": "general",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "/",
-            "code": true
-          },
-          {
-            "text": "<summary>`:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нативна підтримка браузерами"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність \"з коробки\""
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Не потребує JavaScript"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантично правильний"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "120. Яка різниця між вбудовуванням медіафайлів у HTML і посиланням на них?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вбудовування медіа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Медіа відтворюється прямо на сторінці через теги ("
-          },
-          {
-            "text": "<img>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<audio>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<video>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<iframe>",
-            "code": true
-          },
-          {
-            "text": "). Користувач взаємодіє з контентом без переходу на інший ресурс."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Вбудовані медіафайли -->\r\n<img src=\"photo.jpg\" alt=\"Фотографія\" />\r\n<video controls>\r\n  <source src=\"video.mp4\" type=\"video/mp4\" />\r\n</video>\r\n<audio controls>\r\n  <source src=\"music.mp3\" type=\"audio/mpeg\" />\r\n</audio>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Посилання на медіа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Файл відкривається або завантажується після кліку по "
-          },
-          {
-            "text": "<a href=\"...\">",
-            "code": true
-          },
-          {
-            "text": ". Контент не відтворюється безпосередньо у сторінці."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Посилання на медіафайли -->\r\n<a href=\"document.pdf\">Завантажити PDF</a>\r\n<a href=\"photo.jpg\">Переглянути фото</a>\r\n<a href=\"video.mp4\" download>Завантажити відео</a>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Порівняння:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "table",
-        "header": [
-          [
-            {
-              "text": "Критерій"
-            }
-          ],
-          [
-            {
-              "text": "Вбудовування"
-            }
-          ],
-          [
-            {
-              "text": "Посилання"
-            }
-          ]
-        ],
-        "rows": [
-          [
-            [
-              {
-                "text": "UX",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Безшовний перегляд"
-              }
-            ],
-            [
-              {
-                "text": "Потребує переходу/завантаження"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Швидкість",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Повільніше завантаження сторінки"
-              }
-            ],
-            [
-              {
-                "text": "Швидша сторінка"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Трафік",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Завантажується автоматично"
-              }
-            ],
-            [
-              {
-                "text": "Завантажується на вимогу"
-              }
-            ]
-          ],
-          [
-            [
-              {
-                "text": "Контроль",
-                "bold": true
-              }
-            ],
-            [
-              {
-                "text": "Повний контроль відтворення"
-              }
-            ],
-            [
-              {
-                "text": "Залежить від браузера"
-              }
-            ]
-          ]
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Висновок:",
-            "bold": true
-          },
-          {
-            "text": " Вбудовування — зручно для інтерактивності, посилання — легше для швидких завантажень або коли не потрібен попередній перегляд."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "121. Що таке Web Components у фронтенд-розробці та для чого їх використовують?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Web Components — це нативна технологія браузера для створення повторно використовуваних, інкапсульованих UI-компонентів без залежності від фреймворків. Складаються з трьох частин:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Custom Elements",
-                "bold": true
-              },
-              {
-                "text": " — визначення власних HTML-тегів ("
-              },
-              {
-                "text": "<my-button>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Shadow DOM",
-                "bold": true
-              },
-              {
-                "text": " — ізоляція стилів і DOM-компонента від решти сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML Templates",
-                "bold": true
-              },
-              {
-                "text": " — заготовки розмітки ("
-              },
-              {
-                "text": "<template>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<template id=\"my-card\">\r\n  <style>\r\n    .card {\r\n      border: 1px solid #ccc;\r\n      padding: 10px;\r\n      border-radius: 8px;\r\n    }\r\n  </style>\r\n  <div class=\"card\"><slot></slot></div>\r\n</template>\r\n\r\n<script>\r\n  class MyCard extends HTMLElement {\r\n    constructor() {\r\n      super();\r\n      const template = document.getElementById('my-card').content;\r\n      const shadow = this.attachShadow({ mode: 'open' });\r\n      shadow.appendChild(template.cloneNode(true));\r\n    }\r\n  }\r\n  customElements.define('my-card', MyCard);\r\n</script>\r\n\r\n<my-card>Привіт! Я веб-компонент</my-card>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створення UI-бібліотек без прив'язки до React/Angular/Vue."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інкапсуляція стилів (не конфліктують з глобальними CSS)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна повторно використовувати між різними проєктами чи фреймворками."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "122. Що таке Shadow DOM у вебкомпонентах і як його правильно застосовувати?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Shadow DOM — це механізм інкапсуляції DOM і стилів усередині вебкомпонента. Він приховує внутрішню реалізацію від зовнішнього коду та запобігає конфліктам CSS/JS."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Ключові властивості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюється через "
-              },
-              {
-                "text": "element.attachShadow({ mode: 'open' | 'closed' })",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Має власне дерево елементів, відокремлене від основного DOM."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стилі в Shadow DOM не впливають на глобальні стилі і навпаки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div id=\"host\"></div>\r\n\r\n<script>\r\n  const host = document.getElementById('host');\r\n  const shadow = host.attachShadow({ mode: 'open' });\r\n\r\n  shadow.innerHTML = `\r\n    <style>\r\n      p { color: red; }\r\n    </style>\r\n    <p>Цей текст червоний лише в Shadow DOM</p>\r\n  `;\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Режими:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "mode: 'open'",
-                "code": true
-              },
-              {
-                "text": " — можна отримати доступ до shadow DOM через "
-              },
-              {
-                "text": "element.shadowRoot",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "mode: 'closed'",
-                "code": true
-              },
-              {
-                "text": " — shadow DOM повністю прихований від зовнішнього коду"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використовується головним чином у Web Components, щоб створювати незалежні й повторно використовувані UI-елементи."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "123. Як створити власний HTML-елемент (Custom Element) у браузері?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для створення кастомного елемента використовується API Custom Elements:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Створюємо клас, що наслідує "
-              },
-              {
-                "text": "HTMLElement",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Реєструємо його через "
-              },
-              {
-                "text": "customElements.define()",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовуємо у розмітці як звичайний тег."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<script>\r\n  class MyButton extends HTMLElement {\r\n    constructor() {\r\n      super();\r\n      this.innerHTML = `<button>Click me!</button>`;\r\n    }\r\n\r\n    connectedCallback() {\r\n      console.log('Element додано до DOM');\r\n      this.addEventListener('click', this.handleClick);\r\n    }\r\n\r\n    disconnectedCallback() {\r\n      console.log('Element видалено з DOM');\r\n      this.removeEventListener('click', this.handleClick);\r\n    }\r\n\r\n    handleClick = () => {\r\n      alert('Custom button clicked!');\r\n    };\r\n  }\r\n\r\n  customElements.define('my-button', MyButton);\r\n</script>\r\n\r\n<my-button></my-button>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Lifecycle методи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "connectedCallback()",
-                "code": true
-              },
-              {
-                "text": " — викликається при додаванні до DOM"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "disconnectedCallback()",
-                "code": true
-              },
-              {
-                "text": " — викликається при видаленні з DOM"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "attributeChangedCallback()",
-                "code": true
-              },
-              {
-                "text": " — викликається при зміні атрибутів"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Браузер розпізнає "
-          },
-          {
-            "text": "<my-button>",
-            "code": true
-          },
-          {
-            "text": " як нативний елемент."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Можна додати "
-          },
-          {
-            "text": "Shadow DOM",
-            "code": true
-          },
-          {
-            "text": " для інкапсуляції стилів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "124. Що таке HTML-шаблони template і як їх використовують у веброзробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "<template>",
-            "code": true
-          },
-          {
-            "text": " — це тег для визначення розмітки, яка не відображається на сторінці до моменту її програмного клонування. Використовується разом із JavaScript для динамічного створення контенту."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Особливості:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Вміст шаблона не рендериться при завантаженні сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Можна клонувати через "
-              },
-              {
-                "text": "template.content.cloneNode(true)",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Часто застосовується у Web Components та при динамічному рендерингу списків."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<template id=\"item-template\">\r\n  <li class=\"item\">\r\n    <h3 class=\"title\"></h3>\r\n    <p class=\"description\"></p>\r\n  </li>\r\n</template>\r\n\r\n<ul id=\"list\"></ul>\r\n\r\n<script>\r\n  const template = document.getElementById('item-template');\r\n  const list = document.getElementById('list');\r\n\r\n  const items = [\r\n    { title: 'Item 1', description: 'Description 1' },\r\n    { title: 'Item 2', description: 'Description 2' },\r\n  ];\r\n\r\n  items.forEach(item => {\r\n    const clone = template.content.cloneNode(true);\r\n    clone.querySelector('.title').textContent = item.title;\r\n    clone.querySelector('.description').textContent = item.description;\r\n    list.appendChild(clone);\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Використання:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Динамічне додавання елементів у DOM."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інкапсульована розмітка для вебкомпонентів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Повторне використання UI-блоків без дублювання коду."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шаблони для генерації контенту на основі даних."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "125. Як Flexbox і Grid допомагають створювати адаптивні макети?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Flexbox",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Дозволяє легко вирівнювати та розподіляти простір між елементами в одному напрямку (рядок або колонка). Ідеально для адаптивних меню, рядків карток, елементів навігації."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"flex-container\">\r\n  <div class=\"flex-item\">Item 1</div>\r\n  <div class=\"flex-item\">Item 2</div>\r\n  <div class=\"flex-item\">Item 3</div>\r\n</div>\r\n\r\n<style>\r\n  .flex-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  .flex-item {\r\n    flex: 1 1 300px; /* grow, shrink, basis */\r\n    margin: 10px;\r\n  }\r\n</style>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Grid",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Дозволяє будувати двовимірні макети (рядки + колонки) і керувати складними структурами сторінки. Легко змінювати кількість колонок під різні екрани через медіа-запити."
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<div class=\"grid-container\">\r\n  <div class=\"grid-item\">Header</div>\r\n  <div class=\"grid-item\">Sidebar</div>\r\n  <div class=\"grid-item\">Main</div>\r\n  <div class=\"grid-item\">Footer</div>\r\n</div>\r\n\r\n<style>\r\n  .grid-container {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n    gap: 20px;\r\n  }\r\n\r\n  /* Адаптивність через медіа-запити */\r\n  @media (max-width: 768px) {\r\n    .grid-container {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n</style>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Переваги для адаптивності:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Автоматичне перенесення елементів на новий рядок"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Гнучкий розподіл простору"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легка зміна макету через медіа-запити"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Менше коду порівняно з float-основними рішеннями"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Обидва підходи роблять макети гнучкими і дозволяють створювати адаптивний дизайн без складних обхідних рішень."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "126. Що таке валідація? Які типи перевірок HTML-документа ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Валідація — це процес перевірки коректності коду HTML-документа відповідно до стандартів W3C."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Типи перевірок:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Синтаксична валідація",
-                "bold": true
-              },
-              {
-                "text": " — перевірка правильності синтаксису та структури тегів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідація атрибутів",
-                "bold": true
-              },
-              {
-                "text": " — перевірка правильності та відповідності використаних атрибутів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідація доступності (Accessibility)",
-                "bold": true
-              },
-              {
-                "text": " — перевірка на відповідність стандартам доступності, наприклад WCAG."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка сумісності",
-                "bold": true
-              },
-              {
-                "text": " — оцінка роботи коду в різних браузерах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO-валідація",
-                "bold": true
-              },
-              {
-                "text": " — перевірка оптимізації документа для пошукових систем."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка швидкодії",
-                "bold": true
-              },
-              {
-                "text": " — аналіз завантаження та продуктивності."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклади помилок:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!-- Синтаксична помилка: незакритий тег -->\r\n<div>\r\n  <p>Text</p>\r\n</div>\r\n\r\n<!-- Помилка атрибута: неіснуючий атрибут -->\r\n<img src=\"photo.jpg\" invalidattr=\"value\" />\r\n\r\n<!-- Доступність: відсутній alt -->\r\n<img src=\"photo.jpg\" />\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Інструменти валідації:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "W3C Markup Validator"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTMLHint (лінтер)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Lighthouse (доступність і SEO)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "axe DevTools"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Валідний HTML",
-            "bold": true
-          },
-          {
-            "text": " = краща сумісність, доступність і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "127. Основні етапи перевірок валідності HTML-документа?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні етапи перевірки валідності:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка синтаксису",
-                "bold": true
-              },
-              {
-                "text": " — аналіз тегів, вкладеності та закриття."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка атрибутів",
-                "bold": true
-              },
-              {
-                "text": " — відповідність атрибутів специфікації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка DocType",
-                "bold": true
-              },
-              {
-                "text": " — відповідність документа заявленому типу."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка доступності",
-                "bold": true
-              },
-              {
-                "text": " — наявність елементів для підтримки доступності (alt, aria)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка семантики",
-                "bold": true
-              },
-              {
-                "text": " — правильне використання семантичних тегів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірка посилань",
-                "bold": true
-              },
-              {
-                "text": " — аналіз працездатності та коректності URL."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Детальний процес:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 1: Структурна валідація",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<!-- Правильний DOCTYPE -->\r\n<html lang=\"uk\">\r\n  <!-- Мова документа -->\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <!-- Кодування -->\r\n    <title>Заголовок</title>\r\n  </head>\r\n  <body>\r\n    <!-- Правильно вкладені елементи -->\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 2: Семантична валідація",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання відповідних тегів ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": ")"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Правильна ієрархія заголовків (h1-h6)"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коректні форми та їх елементи"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 3: Доступність",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Alt-тексти для зображень"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "ARIA-атрибути де потрібно"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Табуляційна навігація"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Етап 4: Продуктивність і SEO",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізовані зображення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мета-теги для SEO"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідні посилання"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "128. Якими способами перевіряють HTML на валідність і коректність?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основні способи перевірки:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Онлайн валідатори:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "W3C Markup Validator",
-                        "bold": true
-                      },
-                      {
-                        "text": " (validator.w3.org) — офіційний сервіс для перевірки синтаксису й стандартів"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTML5 Validator",
-                        "bold": true
-                      },
-                      {
-                        "text": " — перевірка специфічно для HTML5"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Редакторні плагіни та лінтери:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTMLHint",
-                        "bold": true
-                      },
-                      {
-                        "text": " — інтегрується в CI/CD або редактор"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "ESLint з HTML плагінами",
-                        "bold": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Prettier",
-                        "bold": true
-                      },
-                      {
-                        "text": " — форматування коду"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузерні інструменти:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "DevTools",
-                        "bold": true
-                      },
-                      {
-                        "text": " — виявляють помилки розмітки в консолі"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Elements панель",
-                        "bold": true
-                      },
-                      {
-                        "text": " — показує структуру та помилки DOM"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Автоматизоване тестування:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Lighthouse",
-                        "bold": true
-                      },
-                      {
-                        "text": " — комплексна перевірка (accessibility, SEO, performance)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "axe DevTools",
-                        "bold": true
-                      },
-                      {
-                        "text": " — спеціалізовано на доступності"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WAVE",
-                        "bold": true
-                      },
-                      {
-                        "text": " — онлайн інструмент для accessibility"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CI/CD інтеграція:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "json",
-                "content": "{\r\n  \"scripts\": {\r\n    \"lint:html\": \"htmlhint src/**/*.html\",\r\n    \"validate\": \"html-validate src/**/*.html\"\r\n  }\r\n}\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Командні інструменти:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "html-validate",
-                        "bold": true
-                      },
-                      {
-                        "text": " — CLI валідатор"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "htmllint",
-                        "bold": true
-                      },
-                      {
-                        "text": " — лінтер для HTML"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад перевірки:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "bash",
-        "content": "# Перевірка через HTMLHint\r\nnpx htmlhint index.html\r\n\r\n# Автоматична перевірка в pipeline\r\nnpm run lint:html\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Валідний HTML",
-            "bold": true
-          },
-          {
-            "text": " = краща сумісність, доступність і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "129. Як перевірити, що HTML-код відповідає стандартам і найкращим практикам?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Комплексний підхід до перевірки:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Валідатори:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "W3C HTML Validator",
-                        "bold": true
-                      },
-                      {
-                        "text": " для перевірки синтаксису"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Nu Html Checker",
-                        "bold": true
-                      },
-                      {
-                        "text": " — сучасний валідатор HTML5"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Лінтери:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTMLHint",
-                        "bold": true
-                      },
-                      {
-                        "text": " з налаштованими правилами"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "ESLint",
-                        "bold": true
-                      },
-                      {
-                        "text": " з плагінами для HTML"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Audits і аналіз:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Chrome Lighthouse",
-                        "bold": true
-                      },
-                      {
-                        "text": " → accessibility, SEO, performance"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "PageSpeed Insights",
-                        "bold": true
-                      },
-                      {
-                        "text": " — Google аналіз продуктивності"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Accessibility тестування:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "axe DevTools",
-                        "bold": true
-                      },
-                      {
-                        "text": " — найпопулярніший інструмент"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WAVE",
-                        "bold": true
-                      },
-                      {
-                        "text": " — онлайн accessibility валідатор"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Colour Contrast Analyser",
-                        "bold": true
-                      },
-                      {
-                        "text": " — перевірка контрастності"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Code review:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Внутрішні стандарти команди"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "PR-рецензії з чеклістами"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Автоматичні коментарі від ботів"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CI/CD інтеграція:",
-                "bold": true
-              },
-              {
-                "type": "code",
-                "language": "yaml",
-                "content": "# GitHub Actions приклад\r\n- name: Validate HTML\r\n  run: |\r\n    npm install -g htmlhint\r\n    htmlhint src/**/*.html\r\n\r\n- name: Accessibility test\r\n  run: |\r\n    npm install -g @axe-core/cli\r\n    axe src/**/*.html\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Чекліст найкращих практик:",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Семантичні теги замість "
-                      },
-                      {
-                        "text": "<div>",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Один "
-                      },
-                      {
-                        "text": "<h1>",
-                        "code": true
-                      },
-                      {
-                        "text": " на сторінку"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Alt-тексти для всіх зображень"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Правильна ієрархія заголовків"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Валідні форми з labels"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "HTTPS і безпечні атрибути"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Мінімізований HTML для продакшену"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Комбо автоматичних інструментів + ручне рев'ю = гарантія дотримання best practices."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "130. Якщо представити HTML5 як відкриту веб-платформу, з яких блоків він складається?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML5 як відкрита веб-платформа складається з наступних ключових блоків:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантика",
-                "bold": true
-              },
-              {
-                "text": "Семантичні теги для структурування контенту:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<header>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<footer>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<main>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<article>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<section>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<nav>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<aside>",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Покращують доступність та SEO"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мультимедіа",
-                "bold": true
-              },
-              {
-                "text": "Нативна підтримка аудіо та відео:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<audio>",
-                        "code": true
-                      },
-                      {
-                        "text": ", "
-                      },
-                      {
-                        "text": "<video>",
-                        "code": true
-                      },
-                      {
-                        "text": " — без сторонніх плагінів"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<track>",
-                        "code": true
-                      },
-                      {
-                        "text": " — субтитри та доступність"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Media API для програмного контролю"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Графіка",
-                "bold": true
-              },
-              {
-                "text": "Елементи для роботи з графікою:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<canvas>",
-                        "code": true
-                      },
-                      {
-                        "text": " — растрова графіка через JavaScript"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<svg>",
-                        "code": true
-                      },
-                      {
-                        "text": " — векторна графіка"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WebGL для 3D графіки"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Сховище і офлайн",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "API для локального зберігання даних:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "localStorage",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "sessionStorage",
-                "code": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "IndexedDB",
-                "code": true
-              },
-              {
-                "text": " — потужна NoSQL база даних"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Service Workers",
-                "code": true
-              },
-              {
-                "text": " — офлайн функціональність"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Cache API",
-                "code": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Комунікації",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WebSocket",
-                        "code": true
-                      },
-                      {
-                        "text": " — реал-тайм двостороння комунікація"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Server-Sent Events",
-                        "code": true
-                      },
-                      {
-                        "text": " — односпрямовані події від сервера"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "WebRTC",
-                        "code": true
-                      },
-                      {
-                        "text": " — peer-to-peer зв'язок"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Fetch API",
-                        "code": true
-                      },
-                      {
-                        "text": " — сучасні HTTP запити"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форми",
-                "bold": true
-              },
-              {
-                "text": "Розширені можливості форм:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Нові типи "
-                      },
-                      {
-                        "text": "<input>",
-                        "code": true
-                      },
-                      {
-                        "text": " (email, url, date, color, range)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Вбудована валідація"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<datalist>",
-                        "code": true
-                      },
-                      {
-                        "text": " — автокомпліт"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Продуктивність",
-                "bold": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "API для оптимізації роботи:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Web Workers",
-                "code": true
-              },
-              {
-                "text": " — фонові обчислення"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Intersection Observer",
-                "code": true
-              },
-              {
-                "text": " — ефективне відстеження видимості"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Performance API",
-                "code": true
-              },
-              {
-                "text": " — моніторинг швидкодії"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "ARIA-атрибути для покращення доступності"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Семантичні ролі та стани"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Підтримка асистивних технологій"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Безпека",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Content Security Policy",
-                        "code": true
-                      },
-                      {
-                        "text": " (CSP)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Sandbox",
-                        "code": true
-                      },
-                      {
-                        "text": " атрибути"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Захищені контексти (HTTPS)"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Геолокація та пристрої",
-                "bold": true
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Geolocation API",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Device Orientation API",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Vibration API",
-                        "code": true
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Battery Status API",
-                        "code": true
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Ця платформа забезпечує повноцінну екосистему для розробки сучасних веб-додатків без залежності від сторонніх плагінів."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "131. Що таке Living Standard і як HTML підтримує цей підхід?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Living Standard — модель розвитку веб-стандартів, коли специфікація постійно оновлюється замість випуску фіксованих версій."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML (через WHATWG) слідує цій моделі: нові елементи, атрибути й API додаються без формальних великих версій, а застарілі депрекейтяться поступово."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Завжди актуальна специфікація."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Менше застарілих версій у браузерах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Швидке впровадження нових технологій (Web Components, "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": ", API для медіа)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Браузери синхронізуються з Living Standard, забезпечуючи сумісність і інновації одночасно."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML Living Standard гарантує, що розробники працюють із сучасним, підтримуваним і сумісним кодом."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "132. Як HTML еволюціонує у контексті веб-стандартів і нових технологій?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантика та структура:",
-                "bold": true
-              },
-              {
-                "text": " додаються нові теги для сучасних інтерфейсів ("
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<template>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтерактивність:",
-                "bold": true
-              },
-              {
-                "text": " тісна інтеграція з JavaScript API (Web Components, Canvas, WebRTC, Web Audio)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Безпека:",
-                "bold": true
-              },
-              {
-                "text": " нові атрибути і механізми (CSP, sandbox, form validation)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність:",
-                "bold": true
-              },
-              {
-                "text": " стандарти WAI-ARIA та краща підтримка скрінрідерів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мобільність і PWA:",
-                "bold": true
-              },
-              {
-                "text": " API для офлайн-доступу, push-сповіщень, service workers."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML оновлюється разом із CSS і JS стандартами, забезпечуючи сумісність, продуктивність і безпеку."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Коротко: HTML розвивається як частина екосистеми веб-стандартів, зберігаючи сумісність і додаючи сучасні функції для UI, доступності та безпеки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "133. Які ключові зміни та нововведення з'явилися в HTML5.1 та HTML5.2?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML5.1 (2016):",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нові семантичні теги: "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<picture>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращення форм: "
-              },
-              {
-                "text": "autocomplete",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "autofocus",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "required",
-                "code": true
-              },
-              {
-                "text": " та нові "
-              },
-              {
-                "text": "input types",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Додано підтримку "
-              },
-              {
-                "text": "custom elements",
-                "code": true
-              },
-              {
-                "text": " (Web Components)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поліпшення атрибутів для "
-              },
-              {
-                "text": "accessibility",
-                "code": true
-              },
-              {
-                "text": " (hidden, tabindex)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Невеликі уточнення в DOM API і інтеграції з JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML5.2 (2017):",
-                "bold": true
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нові теги та атрибути: "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": " для модальних вікон, formaction для "
-              },
-              {
-                "text": "<button>",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "<input>",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Забезпечення безпечного використання "
-              },
-              {
-                "text": "iframe:",
-                "code": true
-              },
-              {
-                "text": " "
-              },
-              {
-                "text": "sandbox",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "allow",
-                "code": true
-              },
-              {
-                "text": " атрибути."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращення "
-              },
-              {
-                "text": "ARIA",
-                "code": true
-              },
-              {
-                "text": " підтримки та "
-              },
-              {
-                "text": "accessibility",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Деякі застарілі елементи були депрекейтовані ("
-              },
-              {
-                "text": "<menu>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<keygen>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтеграція з "
-              },
-              {
-                "text": "Content Security Policy",
-                "code": true
-              },
-              {
-                "text": " (CSP) та нові механізми безпеки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Кожне оновлення робить HTML більш семантичним, безпечним і дружнім до доступності."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "134. Які потенційні напрямки розвитку HTML можна очікувати у найближчому майбутньому?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Більш тісна інтеграція з "
-              },
-              {
-                "text": "Web Components",
-                "code": true
-              },
-              {
-                "text": " → спрощена кастомізація і повторне використання UI."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Нові семантичні елементи для сучасних інтерфейсів (напр. "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": " покращення, "
-              },
-              {
-                "text": "<modal>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<carousel>",
-                "code": true
-              },
-              {
-                "text": " можливі)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращена мультимедіа-підтримка → "
-              },
-              {
-                "text": "Web Audio",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "WebRTC",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "3D/AR",
-                "code": true
-              },
-              {
-                "text": " контент без сторонніх плагінів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Більш потужні форми → нові "
-              },
-              {
-                "text": "input types",
-                "code": true
-              },
-              {
-                "text": ", краща валідація і "
-              },
-              {
-                "text": "accessibility",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримка прогресивних веб-додатків (PWA) → офлайн, "
-              },
-              {
-                "text": "push notifications",
-                "code": true
-              },
-              {
-                "text": ", фонова синхронізація."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інтеграція зі стандартами безпеки та конфіденційності → "
-              },
-              {
-                "text": "CSP",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "cookie-less auth",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "sandboxing",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація для мобільних і "
-              },
-              {
-                "text": "low-power",
-                "code": true
-              },
-              {
-                "text": " пристроїв → легші елементи та оптимізовані API."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Загальний тренд: HTML стає більш семантичним, інтерактивним і безпечним, з меншим залученням сторонніх бібліотек."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "135. Які популярні CSS-фреймворки найчастіше інтегрують із HTML для швидкої розробки UI?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Bootstrap",
-                "code": true
-              },
-              {
-                "text": " → найпопулярніший, готові компоненти й grid-система."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Tailwind CSS",
-                "code": true
-              },
-              {
-                "text": " → утилітарний підхід, висока гнучкість."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Foundation (від Zurb)",
-                "code": true
-              },
-              {
-                "text": " → адаптивна сітка, компоненти."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Bulma",
-                "code": true
-              },
-              {
-                "text": " → чистий flexbox-фреймворк, простий у використанні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Materialize",
-                "code": true
-              },
-              {
-                "text": " → реалізація Google Material Design."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "UIkit",
-                "code": true
-              },
-              {
-                "text": " → легкий, зручний для швидкого прототипування."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вибір залежить від потреб: Bootstrap — швидкий старт, Tailwind — кастомні дизайн-системи, Bulma/Materialize — простота."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "136. Як CSS-фреймворки на кшталт Bootstrap полегшують створення HTML-структур і UI?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Готові компоненти:",
-                "code": true
-              },
-              {
-                "text": " кнопки, форми, навігація, модальні вікна."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Адаптивна сітка (Grid)",
-                "code": true
-              },
-              {
-                "text": " → легке створення макетів для різних екранів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уніфіковані стилі",
-                "code": true
-              },
-              {
-                "text": " → не потрібно писати CSS з нуля."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript-компоненти",
-                "code": true
-              },
-              {
-                "text": " → каруселі, модальні, тултіпи без власного JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кросбраузерність",
-                "code": true
-              },
-              {
-                "text": " → вирішує проблеми сумісності HTML/CSS."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Результат: швидша розробка, менше помилок у верстці, легке прототипування."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "137. Які JavaScript-бібліотеки часто використовують для підвищення інтерактивності HTML-сторінок?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "jQuery",
-                "code": true
-              },
-              {
-                "text": " → прості маніпуляції DOM і анімації (старі проєкти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "GSAP",
-                "code": true
-              },
-              {
-                "text": " → складні та плавні анімації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Anime.js",
-                "code": true
-              },
-              {
-                "text": " → легкі анімації елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Swiper.js",
-                "code": true
-              },
-              {
-                "text": " → інтерактивні каруселі і слайдери."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Chart.js / D3.js",
-                "code": true
-              },
-              {
-                "text": " → інтерактивні графіки та діаграми."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Sortable.js / Dragula",
-                "code": true
-              },
-              {
-                "text": " → drag-and-drop елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Popper.js / Tippy.js",
-                "code": true
-              },
-              {
-                "text": " → тултіпи та спливаючі підказки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Вибір залежить від задачі: анімації, інтерактивні UI, графіки або drag-and-drop."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "138. Як HTML, CSS та JavaScript працюють разом у веб-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML → структура сторінки, семантичні елементи."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS → оформлення: кольори, шрифти, розташування, адаптивність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript → динаміка та інтерактивність (події, анімації, API)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Взаємозв'язок:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML надає «скелет»."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS прикрашає цей скелет."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JS робить його живим, реагуючи на події користувача або сервер."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button id=\"btn\">Клікни мене</button>\r\n<style>\r\n  #btn {\r\n    background: blue;\r\n    color: white;\r\n    padding: 10px;\r\n  }\r\n</style>\r\n<script>\r\n  document\r\n    .getElementById('btn')\r\n    .addEventListener('click', () => alert('Привіт!'));\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML + CSS + JS = базова тріада фронтенду, яка формує структуру, стиль і поведінку сторінки."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "139. Які переваги дає використання HTML-препроцесора (наприклад, Pug/Jade) у фронтенд-розробці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Скорочений синтаксис → менше коду, швидше писати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шаблонізація → змінні, цикли, умови прямо в HTML."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Міксини → повторне використання блоків розмітки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Краща структура → вкладеність зрозуміліша, ніж у звичайному HTML."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко підтримувати динамічні сторінки в SSR (Express, NestJS)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінус: потрібна збірка, ще один шар абстракції."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "140. Як працює механізм шаблонів у HTML і для чого він використовується?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "HTML має нативний тег "
-              },
-              {
-                "text": "<template>",
-                "code": true
-              },
-              {
-                "text": " → його вміст не рендериться, доки не буде клонований через JS."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Шаблон зберігає розмітку, стилі й навіть скрипти, але пасивно, поки не активований."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовується для динамічного рендерингу контенту та у Web Components."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<template id=\"user-template\">\r\n  <div class=\"user\">\r\n    <p class=\"name\"></p>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  const tmpl = document.getElementById('user-template');\r\n  const clone = tmpl.content.cloneNode(true);\r\n  clone.querySelector('.name').textContent = 'Alice';\r\n  document.body.appendChild(clone);\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Перевага — можна підготувати заготовки UI та багаторазово їх використовувати."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "141. Які переваги дає мінімізація (minification) HTML-коду?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Менший розмір файлу → швидше завантаження сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшення трафіку → особливо важливо для мобільних користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кращий SEO → швидкість сайту впливає на ранжування."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Економія ресурсів сервера/CDN."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Часто поєднується з мінімізацією CSS/JS і gzip/brotli компресією."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Мінус: складніше читати код → тому в проєктах зберігають оригінал + мініфіковану збірку."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "142. Які основні способи оптимізації часу завантаження HTML-сторінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мінімізувати HTML, CSS, JS (видалити пробіли, коментарі)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати gzip/brotli стиснення на сервері."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кешування (HTTP headers, Service Worker)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Critical CSS inline → решта асинхронно."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ледаче завантаження (loading=\"lazy\") для зображень/iframe."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання CDN для статичних ресурсів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Правильне підключення скриптів: defer або async."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Оптимізація медіа (webp, responsive images)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшити кількість HTTP-запитів (об'єднання ресурсів)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Головна мета — швидкий First Contentful Paint (FCP) і хороший LCP для користувачів і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "143. Які переваги згортання пробілів (collapsing white space) в HTML та CSS?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зменшення розміру файлів:",
-                "bold": true
-              },
-              {
-                "text": " Коли зайві пробіли, нові рядки або табуляції автоматично згортатимуться, це допомагає зменшити розмір файлів, що може бути корисно для оптимізації швидкості завантаження веб-сторінки. Це особливо важливо для мобільних пристроїв або при повільному інтернет-з'єднанні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Спрощення структури документа:",
-                "bold": true
-              },
-              {
-                "text": " Згортання пробілів дозволяє уникнути зайвих пробілів між елементами, що робить код HTML та CSS більш чистим і зрозумілим. Код стає компактнішим, і його легше підтримувати та редагувати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращення читабельності контенту:",
-                "bold": true
-              },
-              {
-                "text": " Згортання пробілів дозволяє браузеру правильно відображати текст, забезпечуючи, щоб зайві пробіли не порушували структуру та відображення елементів. Це особливо важливо при відображенні тексту в абзацах, списках або інших блочних елементах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ізоляція та відокремлення елементів:",
-                "bold": true
-              },
-              {
-                "text": " Коли працює згортання пробілів, можна забезпечити рівномірний розподіл простору між елементами, що дозволяє більш ефективно керувати відстанями між ними, без того щоб зайві пробіли впливали на вигляд веб-сторінки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Уникнення непотрібних порушень макета:",
-                "bold": true
-              },
-              {
-                "text": " В деяких випадках зайві пробіли можуть спричиняти небажану поведінку макета, наприклад, додавання непотрібних відступів між елементами. Згортання пробілів допомагає уникнути таких ситуацій і зберегти дизайн відповідно до заданих правил стилів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Згортання пробілів",
-            "bold": true
-          },
-          {
-            "text": " — це стандартна поведінка в HTML, що дозволяє браузеру ігнорувати зайві пробіли, кілька переносів рядка або табуляцій між текстовими елементами. Таким чином, візуальне відображення не залежить від кількості пробілів у коді."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "[MDN link](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse)"
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "144. Як у HTML реалізується підхід прогресивного вдосконалення (Progressive Enhancement)?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Progressive Enhancement",
-            "bold": true
-          },
-          {
-            "text": " → спочатку базова функціональність працює на будь-якому браузері, а додаткові можливості додаються через сучасні HTML, CSS і JS."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Принципи:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Базова розмітка — семантичний HTML для всіх користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стілі CSS — покращують дизайн, але не ламають функціонал без них."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "JavaScript — додає інтерактивність та анімації, але сайт працює і без нього."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"POST\">\r\n  <input type=\"text\" name=\"email\" required placeholder=\"Email\" />\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r\n<script>\r\n  // JS: покращення UX — валідація на клієнті\r\n  document.querySelector('form').addEventListener('submit', e => {\r\n    const email = e.target.email.value;\r\n    if (!email.includes('@')) e.preventDefault();\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Базовий функціонал завжди доступний, а сучасні фічі підвищують зручність і інтерктивність."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "145. Які є поширені антипатерни (погані практики) при написанні HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання "
-              },
-              {
-                "text": "<div>",
-                "code": true
-              },
-              {
-                "text": " і "
-              },
-              {
-                "text": "<span>",
-                "code": true
-              },
-              {
-                "text": " замість семантичних тегів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кілька "
-              },
-              {
-                "text": "<h1>",
-                "code": true
-              },
-              {
-                "text": " на сторінці без потреби."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Інлайнові стилі та події ("
-              },
-              {
-                "text": "style=\"\"",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "onclick=\"\"",
-                "code": true
-              },
-              {
-                "text": ") → важче підтримувати."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відсутність атрибута "
-              },
-              {
-                "text": "alt",
-                "code": true
-              },
-              {
-                "text": " у зображень."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дублікат "
-              },
-              {
-                "text": "id",
-                "code": true
-              },
-              {
-                "text": " на сторінці."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання застарілих тегів ("
-              },
-              {
-                "text": "<font>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<center>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<marquee>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Зловживання табличною розміткою для "
-              },
-              {
-                "text": "layout",
-                "code": true
-              },
-              {
-                "text": " замість "
-              },
-              {
-                "text": "CSS Grid/Flexbox",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відсутність "
-              },
-              {
-                "text": "lang",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "meta charset=\"UTF-8\"",
-                "code": true
-              },
-              {
-                "text": "."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використання пустих елементів для відступів (наприклад, "
-              },
-              {
-                "text": "<br><br>",
-                "code": true
-              },
-              {
-                "text": " замість "
-              },
-              {
-                "text": "CSS",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Такі практики шкодять SEO, доступності й ускладнюють підтримку коду."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "146. Чому важлива документація при роботі з HTML і як її правильно вести?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Підтримуваність коду → інші розробники швидко розуміють структуру та призначення елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Командна робота → зменшує помилки при масштабуванні проєкту."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SEO і доступність → коментарі про призначення блоків, використання семантики."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Стандарти та best practices → легше дотримуватись внутрішніх правил або HTML5-стандартів."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Практики:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Використовувати коментарі <!-- пояснення -->."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Документувати складні структури, шаблони та інтерактивні блоки."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Ведення зовнішньої документації (Wiki, Storybook для UI-компонентів)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Добра документація економить час на підтримку, знижує помилки і покращує командну роботу."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "147. Що таке інструменти розробника браузера (DevTools) і як вони допомагають працювати з HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "DevTools — вбудовані інструменти у браузерах (Chrome, Firefox, Edge) для налагодження вебсторінок."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "З HTML їх використовують для:"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перегляду та редагування DOM у реальному часі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Аналізу атрибутів, структури й доступності елементів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Відстеження завантаження ресурсів і продуктивності."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Перевірки SEO-тегів, метаінформації, семантики."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Дає можливість швидко експериментувати з розміткою без зміни вихідного коду."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Краща практика: перевіряти валідність HTML, доступність і performance прямо через DevTools."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "148. Як забезпечити сумісність HTML-коду між різними браузерами?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантичний HTML",
-                "code": true
-              },
-              {
-                "text": " → базові елементи ("
-              },
-              {
-                "text": "<header>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<main>",
-                "code": true
-              },
-              {
-                "text": ", "
-              },
-              {
-                "text": "<form>",
-                "code": true
-              },
-              {
-                "text": ") працюють у всіх сучасних браузерах."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Поліфіли та шими",
-                "code": true
-              },
-              {
-                "text": " → підключення JS/CSS для старих або непідтримуваних функцій (e.g., fetch, Promise, "
-              },
-              {
-                "text": "<dialog>",
-                "code": true
-              },
-              {
-                "text": ")."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тестування у кількох браузерах",
-                "code": true
-              },
-              {
-                "text": " → Chrome, Firefox, Edge, Safari, мобільні."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Can I Use",
-                "code": true
-              },
-              {
-                "text": " → перевірка підтримки тегів, атрибутів і API."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Progressive Enhancement / Graceful Degradation",
-                "code": true
-              },
-              {
-                "text": " → базовий функціонал доступний усюди, додаткові можливості — де підтримується."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "DevTools і автоматичне тестування",
-                "code": true
-              },
-              {
-                "text": " → перевірка рендерингу, accessibility і JavaScript API."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Комбінація стандартного HTML, поліфілів, progressive enhancement і ретельного тестування забезпечує максимальну сумісність."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "149. Що таке візуалізація даних у HTML і як її реалізувати на вебсторінці?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Візуалізація даних — графічне відображення інформації (діаграми, графіки, карти) прямо в браузері."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Реалізація в HTML:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Canvas API → малювання графіки через JavaScript."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "SVG → векторна графіка, інтерактивна та масштабована."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Бібліотеки JS → полегшують роботу і додають інтерактивність:"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Chart.js — швидке створення графіків."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "D3.js — гнучкі й кастомні візуалізації."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "Plotly.js — інтерактивні графіки з zoom і tooltip."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад із Chart.js:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<canvas id=\"myChart\"></canvas>\r\n\r\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\r\n<script>\r\n  const ctx = document.getElementById('myChart').getContext('2d');\r\n  new Chart(ctx, {\r\n    type: 'bar',\r\n    data: {\r\n      labels: ['Red', 'Blue', 'Green'],\r\n      datasets: [{ label: 'Votes', data: [12, 19, 7] }],\r\n    },\r\n  });\r\n</script>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Візуалізації роблять дані більш зрозумілими і інтерактивними для користувача."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "150. Які теги з найсвіжіших оновлень ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<mark>",
-                "code": true
-              },
-              {
-                "text": ": Для виділення тексту (позначення важливих фрагментів)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<progress>",
-                "code": true
-              },
-              {
-                "text": ": Для відображення прогресу виконання задачі."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<meter>",
-                "code": true
-              },
-              {
-                "text": ": Для вимірювання значення в певному діапазоні (наприклад, рівень батареї)."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "151. Які атрибути можна використовувати зі списками для зміни їхнього зовнішнього вигляду або поведінки?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Для списків в HTML основні атрибути та способи зміни вигляду/поведінки:"
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "type (для "
-              },
-              {
-                "text": "<ol>",
-                "code": true
-              },
-              {
-                "text": " та "
-              },
-              {
-                "text": "<ul>",
-                "code": true
-              },
-              {
-                "text": " в старому HTML, частково застаріло):"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"1\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — цифри (за замовчуванням)"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"A\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — великі літери"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"a\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — малі літери"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"I\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — римські великі"
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "<ol type=\"i\">",
-                        "code": true
-                      },
-                      {
-                        "text": " — римські малі"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "start (для <ol>) — початковий номер:"
-              },
-              {
-                "type": "code",
-                "language": "html",
-                "content": "<ol start=\"5\">\r\n  <li>Пункт</li>\r\n</ol>\r"
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "reversed (для <ol>) — зворотний порядок нумерації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "compact (застарілий) — менш відстані між пунктами."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "CSS (сучасний спосіб):"
-              },
-              {
-                "type": "bulletList",
-                "children": [
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "list-style-type",
-                        "code": true
-                      },
-                      {
-                        "text": " — тип маркера (disc, circle, square, none)."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "list-style-image",
-                        "code": true
-                      },
-                      {
-                        "text": " — використовувати зображення замість маркера."
-                      }
-                    ]
-                  },
-                  {
-                    "type": "listItem",
-                    "children": [
-                      {
-                        "text": "list-style-position",
-                        "code": true
-                      },
-                      {
-                        "text": " — розташування маркера (inside, outside)."
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Сучасні проєкти майже завжди стилізують списки через CSS, а не HTML-атрибути."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "152. Як створити посилання на різні розділи на одній веб-сторінці HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відповідь: Для створення гіперпосилання використовується тег "
-          },
-          {
-            "text": "<a>",
-            "code": true
-          },
-          {
-            "text": ". Атрибут href вказує URL або шлях."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Приклад:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": null,
-        "content": "<a href=\"https://example.com\">Перейти на Example</a>\r"
-      }
-    ]
-  },
-  {
-    "question": "153. Опишіть основну структуру HTML-документа.",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Основна структура HTML-документа:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<!DOCTYPE html>\r\n<!-- Оголошення типу документа -->\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <title>Назва сторінки</title>\r\n  </head>\r\n  <body>\r\n    <!-- Вміст сторінки -->\r\n  </body>\r\n</html>\r"
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Складові:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "numberedList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<!DOCTYPE html>",
-                "code": true
-              },
-              {
-                "text": " — вказує, що документ у HTML5."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<html>",
-                "code": true
-              },
-              {
-                "text": " — кореневий елемент."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<head>",
-                "code": true
-              },
-              {
-                "text": " — метадані (кодова сторінка, заголовок, стилі, скрипти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<body>",
-                "code": true
-              },
-              {
-                "text": " — видимий вміст сторінки."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "154. Різниця між кнопкою та посиланням у HTML?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<button>",
-                "code": true
-              },
-              {
-                "text": " використовується для виконання дій (відправити форму, викликати JavaScript функції)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<a>",
-                "code": true
-              },
-              {
-                "text": " використовується для навігації (перехід на іншу сторінку, розділ)."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<button type=\"submit\">Відправити</button> <a href=\"/about\">Про нас</a>\r"
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Семантика:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Кнопка — дія."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Посилання — навігація."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Використання правильних елементів покращує доступність і SEO."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "155. Чим відрізняється article від section?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<article>",
-                "code": true
-              },
-              {
-                "text": " — самостійний блок контенту, який може існувати окремо від сторінки і бути зрозумілий поза контекстом."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<section>",
-                "code": true
-              },
-              {
-                "text": " — логічний розділ сторінки."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклади використання:"
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Article:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Новини, блоги, публікації."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Коментарі користувачів."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форумні повідомлення."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Section:",
-            "bold": true
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Розділи сторінки (Про нас, Контакти)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Тематичні групи контенту."
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Переваги:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Покращує SEO і доступність."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Легко стилізується та структуровано організовує контент."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "156. Що таке категорії контенту в HTML5?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Семантика",
-                "bold": true
-              },
-              {
-                "text": " — семантичні теги для структурування контенту (header, footer, article)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Мультимедіа",
-                "bold": true
-              },
-              {
-                "text": " — підтримка аудіо та відео (audio, video)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Графіка",
-                "bold": true
-              },
-              {
-                "text": " — елементи для роботи з графікою (canvas, SVG)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Сховище і офлайн",
-                "bold": true
-              },
-              {
-                "text": " — API для локального зберігання даних (localStorage, IndexedDB)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Комунікації",
-                "bold": true
-              },
-              {
-                "text": " — WebSocket, Server-Sent Events."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Форми",
-                "bold": true
-              },
-              {
-                "text": " — розширені можливості форм (нові типи input, валідація)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Продуктивність",
-                "bold": true
-              },
-              {
-                "text": " — API для оптимізації роботи (Web Workers)."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "Доступність",
-                "bold": true
-              },
-              {
-                "text": " — ARIA-атрибути для покращення доступності."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "157. Що таке data-атрибути, в яких випадках їх використовуєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Атрибут autocomplete в HTML використовується для вказівки браузеру, чи має він автоматично заповнювати поля форми збереженими даними (наприклад, іменем, адресою, електронною поштою). Він може бути включений або вимкнений для окремих полів форми або для всієї форми."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Значення:"
-          }
-        ]
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "on",
-                "code": true
-              },
-              {
-                "text": " — дозволяє автозаповнення."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "off",
-                "code": true
-              },
-              {
-                "text": " — вимикає автозаповнення."
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "158. Як створити форму в HTML і забезпечити її валідацію?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "HTML-форма — це елемент, який збирає дані від користувача та відправляє їх на сервер або обробляє на клієнті."
-          }
-        ]
-      },
-      {
-        "type": "heading",
-        "level": 4,
-        "children": [
-          {
-            "text": "Приклад створення:"
-          }
-        ]
-      },
-      {
-        "type": "code",
-        "language": "html",
-        "content": "<form action=\"/submit\" method=\"post\">\r\n  <label for=\"name\">Ім'я:</label>\r\n  <input type=\"text\" id=\"name\" name=\"name\" />\r\n\r\n  <label for=\"email\">Email:</label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" />\r\n\r\n  <button type=\"submit\">Відправити</button>\r\n</form>\r"
-      },
-      {
-        "type": "bulletList",
-        "children": [
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "<form>",
-                "code": true
-              },
-              {
-                "text": " — контейнер форми."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "action",
-                "code": true
-              },
-              {
-                "text": " — URL, куди відправляються дані."
-              }
-            ]
-          },
-          {
-            "type": "listItem",
-            "children": [
-              {
-                "text": "method",
-                "code": true
-              },
-              {
-                "text": " — спосіб відправки (get або post)."
+                "type": "listItem",
+                "children": [
+                  { "text": "Tagi zapisuje się w nawiasach kątowych " },
+                  { "text": "< >", "code": true },
+                  { "text": "." }
+                ]
               }
             ]
           }
         ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Поля вводу",
-            "bold": true
-          },
-          {
-            "text": " ("
-          },
-          {
-            "text": "<input>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<textarea>",
-            "code": true
-          },
-          {
-            "text": ", "
-          },
-          {
-            "text": "<select>",
-            "code": true
-          },
-          {
-            "text": ") + кнопки ("
-          },
-          {
-            "text": "<button>",
-            "code": true
-          },
-          {
-            "text": " або "
-          },
-          {
-            "text": "<input type=\"submit\">",
-            "code": true
-          },
-          {
-            "text": ")."
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "question": "159. Які методи відправки даних форми ви знаєте?",
-    "category": "html",
-    "answerBlocks": [
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "`ApplicationCache`",
-            "bold": true
-          },
-          {
-            "text": " в HTML5 — це механізм для офлайн-доступу до веб-додатків. Він дозволяє зберігати ресурси веб-сторінки (HTML, CSS, JavaScript, зображення) в кеші браузера, що дає змогу користувачам працювати з додатком без інтернет-з'єднання."
-          }
-        ]
-      },
-      {
-        "type": "paragraph",
-        "children": [
-          {
-            "text": "Відповідно до специфікації HTML5, цей механізм був застарілий і замінений новими API, такими як "
-          },
-          {
-            "text": "Service Workers",
-            "bold": true
-          },
-          {
-            "text": "."
-          }
-        ]
       }
-    ]
+    }
   }
-]
\ No newline at end of file
+]
diff --git a/frontend/proxy.ts b/frontend/proxy.ts
index 870ea24f..9fd11eab 100644
--- a/frontend/proxy.ts
+++ b/frontend/proxy.ts
@@ -4,9 +4,8 @@ import { routing } from './i18n/routing';
 
 const AUTH_COOKIE_NAME = 'auth_session';
 
-const _AUTH_SECRET = process.env.AUTH_SECRET;
-
-if (!_AUTH_SECRET) {
+const AUTH_SECRET = process.env.AUTH_SECRET;
+if (!AUTH_SECRET) {
   throw new Error('AUTH_SECRET is not defined');
 }
 
@@ -20,7 +19,8 @@ function authMiddleware(req: NextRequest) {
   const { pathname } = req.nextUrl;
   const authenticated = isAuthenticated(req);
 
-  const pathnameWithoutLocale = pathname.replace(/^\/(uk|en|pl)/, '') || '/';
+  const pathnameWithoutLocale =
+    pathname.replace(/^\/(uk|en|pl)(?=\/|$)/, '') || '/';
 
   if (
     (pathnameWithoutLocale === '/login' ||
@@ -31,16 +31,24 @@ function authMiddleware(req: NextRequest) {
     return NextResponse.redirect(new URL(`/${locale}/`, req.url));
   }
 
-  if (pathnameWithoutLocale.startsWith('/dashboard') && !authenticated) {
-    const locale = pathname.split('/')[1];
-    return NextResponse.redirect(new URL(`/${locale}/login`, req.url));
+  if (
+    pathnameWithoutLocale.startsWith('/leaderboard') ||
+    pathnameWithoutLocale.startsWith('/quiz') ||
+    pathnameWithoutLocale.startsWith('/dashboard')
+  ) {
+    if (!authenticated) {
+      const locale = pathname.split('/')[1] || 'uk';
+      return NextResponse.redirect(new URL(`/${locale}/login`, req.url));
+    }
   }
 
   return null;
 }
+
 function getScopeFromPathname(pathname: string): 'shop' | 'site' {
   const pathnameWithoutLocale =
     pathname.replace(/^\/(uk|en|pl)(?=\/|$)/, '') || '/';
+
   return pathnameWithoutLocale.startsWith('/shop') ? 'shop' : 'site';
 }
 
@@ -49,6 +57,8 @@ export function proxy(req: NextRequest) {
     return NextResponse.redirect(new URL('/uk', req.url));
   }
 
+  const locale = req.nextUrl.pathname.split('/')[1] || 'uk';
+
   const authResponse = authMiddleware(req);
   if (authResponse) return authResponse;
 
@@ -56,6 +66,7 @@ export function proxy(req: NextRequest) {
   const scope = getScopeFromPathname(req.nextUrl.pathname);
 
   intlResponse.headers.set('x-app-scope', scope);
+  intlResponse.headers.set('x-locale', locale);
 
   return intlResponse;
 }
diff --git a/frontend/utils/slugify.ts b/frontend/utils/slugify.ts
new file mode 100644
index 00000000..90307809
--- /dev/null
+++ b/frontend/utils/slugify.ts
@@ -0,0 +1,8 @@
+export function slugify(value: string) {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/\./g, '')
+    .replace(/[^a-z0-9-]/g, '');
+}