diff --git a/UPDATE.md b/UPDATE.md
new file mode 100644
index 0000000..2118bcb
--- /dev/null
+++ b/UPDATE.md
@@ -0,0 +1,202 @@
+# Добавление поля learningMaterial в задачу челленджа
+
+## Описание изменений
+
+В модель задачи челленджа (`ChallengeTask`) добавлено новое необязательное текстовое поле `learningMaterial` для хранения дополнительной обучающей информации в формате Markdown.
+
+## Структура данных
+
+### Модель ChallengeTask
+
+```typescript
+{
+  title: string,           // Заголовок задания (обязательное)
+  description: string,     // Основное описание в Markdown (обязательное, видно студентам)
+  learningMaterial: string, // Дополнительный учебный материал в Markdown (необязательное, видно студентам)
+  hiddenInstructions: string, // Скрытые инструкции для LLM (необязательное, только для преподавателей)
+  createdAt: Date,         // Дата создания
+  updatedAt: Date,         // Дата последнего обновления
+  creator: Object          // Данные создателя из Keycloak
+}
+```
+
+## Изменения в API
+
+### 1. Создание задания (POST /challenge/task)
+
+**Добавлено поле в тело запроса:**
+```json
+{
+  "title": "Название задания",
+  "description": "Основное описание в Markdown",
+  "learningMaterial": "Дополнительный учебный материал в Markdown",
+  "hiddenInstructions": "Скрытые инструкции для преподавателей"
+}
+```
+
+**Пример запроса:**
+```bash
+POST /challenge/task
+Content-Type: application/json
+
+{
+  "title": "Реализация алгоритма сортировки",
+  "description": "Напишите функцию сортировки массива методом пузырька",
+  "learningMaterial": "## Теория\n\nМетод пузырьковой сортировки работает путем...\n\n## Полезные ссылки\n- [Википедия](https://ru.wikipedia.org/wiki/Сортировка_пузырьком)\n- [Видео объяснение](https://example.com/video)",
+  "hiddenInstructions": "Оценить эффективность алгоритма и стиль кода"
+}
+```
+
+### 2. Обновление задания (PUT /challenge/task/:taskId)
+
+**Добавлено поле в тело запроса:**
+```json
+{
+  "title": "Новое название",
+  "description": "Обновленное описание",
+  "learningMaterial": "Обновленный учебный материал",
+  "hiddenInstructions": "Обновленные инструкции"
+}
+```
+
+## Получение данных
+
+### Получение задания (GET /challenge/task/:taskId)
+
+**Ответ содержит новое поле:**
+```json
+{
+  "id": "task_id",
+  "title": "Название задания",
+  "description": "Основное описание в Markdown",
+  "learningMaterial": "Дополнительный учебный материал в Markdown",
+  "createdAt": "2025-01-15T10:00:00.000Z",
+  "updatedAt": "2025-01-15T10:30:00.000Z"
+}
+```
+
+**Важно:** Поле `learningMaterial` видно всем пользователям (студентам и преподавателям), в отличие от `hiddenInstructions`, которое скрывается от студентов.
+
+### Получение всех заданий (GET /challenge/tasks)
+
+Возвращает массив заданий с новым полем `learningMaterial`.
+
+### Получение цепочек (GET /challenge/chains, GET /challenge/chain/:chainId)
+
+При получении цепочек с populate заданий, поле `learningMaterial` будет доступно в каждом задании цепочки.
+
+## Frontend изменения
+
+### Интерфейсы TypeScript
+
+```typescript
+interface ChallengeTask {
+  id: string;
+  title: string;
+  description: string;     // Markdown
+  learningMaterial?: string; // Новое поле - дополнительный материал в Markdown
+  createdAt: string;
+  updatedAt: string;
+}
+```
+
+### Формы создания/редактирования заданий
+
+В формах создания и редактирования заданий необходимо добавить поле для ввода `learningMaterial`:
+
+```typescript
+// Пример компонента формы
+const TaskForm = () => {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    learningMaterial: '', // Новое поле
+    hiddenInstructions: ''
+  });
+
+  // Визуальный редактор или textarea для learningMaterial
+  return (
+    <form>
+      <input name="title" value={formData.title} />
+      <textarea name="description" value={formData.description} />
+
+      {/* Новое поле для дополнительного материала */}
+      <label>Дополнительный учебный материал (Markdown)</label>
+      <textarea
+        name="learningMaterial"
+        value={formData.learningMaterial}
+        placeholder="Дополнительные объяснения, ссылки, примеры..."
+      />
+
+      {/* Только для преподавателей */}
+      <textarea name="hiddenInstructions" value={formData.hiddenInstructions} />
+    </form>
+  );
+};
+```
+
+### Отображение заданий
+
+При отображении задания студентам показывать `learningMaterial` как дополнительную информацию:
+
+```typescript
+const TaskView = ({ task }: { task: ChallengeTask }) => {
+  return (
+    <div>
+      <h1>{task.title}</h1>
+
+      {/* Основное описание */}
+      <div dangerouslySetInnerHTML={{ __html: marked(task.description) }} />
+
+      {/* Дополнительный учебный материал */}
+      {task.learningMaterial && (
+        <div className="learning-material">
+          <h2>Дополнительные материалы</h2>
+          <div dangerouslySetInnerHTML={{ __html: marked(task.learningMaterial) }} />
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+## Миграция данных
+
+Поле `learningMaterial` добавлено как необязательное с значением по умолчанию `''`, поэтому:
+- Существующие задания будут работать без изменений
+- Новое поле будет пустым для старых заданий
+- Можно постепенно добавлять учебный материал к существующим заданиям
+
+## Тестирование
+
+### Создание задания с учебным материалом
+```bash
+# Создать задание с дополнительным материалом
+POST /challenge/task
+{
+  "title": "Тестовое задание",
+  "description": "Основное задание",
+  "learningMaterial": "# Полезная информация\n\nЭто дополнительный материал для студентов"
+}
+```
+
+### Получение задания
+```bash
+GET /challenge/task/{taskId}
+# Проверить, что learningMaterial присутствует в ответе
+```
+
+### Обновление учебного материала
+```bash
+PUT /challenge/task/{taskId}
+{
+  "learningMaterial": "# Обновленная информация\n\nНовые полезные материалы..."
+}
+```
+
+## Влияние на существующий код
+
+- Все существующие эндпоинты получения данных автоматически возвращают новое поле
+- Создание заданий без указания `learningMaterial` работает как прежде
+- Фильтрация и валидация не затрагиваются
+- Поле индексируется MongoDB автоматически
\ No newline at end of file
diff --git a/src/__data__/types.ts b/src/__data__/types.ts
index c887635..96681c6 100644
--- a/src/__data__/types.ts
+++ b/src/__data__/types.ts
@@ -12,6 +12,7 @@ export interface ChallengeTask {
   id: string
   title: string
   description: string
+  learningMaterial?: string
   hiddenInstructions?: string
   creator?: Record<string, unknown>
   createdAt: string
diff --git a/src/components/personal/LearningMaterialViewer.tsx b/src/components/personal/LearningMaterialViewer.tsx
new file mode 100644
index 0000000..200c217
--- /dev/null
+++ b/src/components/personal/LearningMaterialViewer.tsx
@@ -0,0 +1,271 @@
+import React, { useState, useMemo } from 'react'
+import {
+  Box,
+  Button,
+  HStack,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+interface LearningMaterialViewerProps {
+  content: string
+  linesPerPage?: number
+}
+
+export const LearningMaterialViewer = ({
+  content,
+  linesPerPage = 30
+}: LearningMaterialViewerProps) => {
+  const [currentPage, setCurrentPage] = useState(0)
+
+  // Разделяем контент на страницы по linesPerPage строк
+  const pages = useMemo(() => {
+    const lines = content.split('\n')
+    const pagesArray: string[] = []
+
+    for (let i = 0; i < lines.length; i += linesPerPage) {
+      const pageLines = lines.slice(i, i + linesPerPage)
+      pagesArray.push(pageLines.join('\n'))
+    }
+
+    return pagesArray
+  }, [content, linesPerPage])
+
+  const totalPages = pages.length
+
+  if (totalPages === 0) {
+    return null
+  }
+
+  const goToPrevious = () => {
+    setCurrentPage(prev => Math.max(0, prev - 1))
+  }
+
+  const goToNext = () => {
+    setCurrentPage(prev => Math.min(totalPages - 1, prev + 1))
+  }
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderRadius="md"
+      borderColor="blue.200"
+      p={4}
+      bg="blue.50"
+      shadow="sm"
+    >
+      <VStack align="stretch" gap={3}>
+        <HStack justify="space-between" align="center">
+          <Text fontSize="lg" fontWeight="bold" color="blue.800">
+            Дополнительные материалы
+          </Text>
+          {totalPages > 1 && (
+            <Text fontSize="sm" color="blue.600">
+              Страница {currentPage + 1} из {totalPages}
+            </Text>
+          )}
+        </HStack>
+
+        <Box
+          color="gray.700"
+          fontSize="sm"
+          lineHeight="1.7"
+          css={{
+            // Заголовки
+            '& h1': {
+              fontSize: '1.75em',
+              fontWeight: '700',
+              marginTop: '1.2em',
+              marginBottom: '0.6em',
+              color: '#2D3748',
+              borderBottom: '2px solid #E2E8F0',
+              paddingBottom: '0.3em'
+            },
+            '& h2': {
+              fontSize: '1.5em',
+              fontWeight: '600',
+              marginTop: '1em',
+              marginBottom: '0.5em',
+              color: '#2D3748'
+            },
+            '& h3': {
+              fontSize: '1.25em',
+              fontWeight: '600',
+              marginTop: '0.8em',
+              marginBottom: '0.4em',
+              color: '#2D3748'
+            },
+            '& h4': {
+              fontSize: '1.1em',
+              fontWeight: '600',
+              marginTop: '0.6em',
+              marginBottom: '0.3em',
+              color: '#4A5568'
+            },
+            // Параграфы
+            '& p': {
+              marginTop: '0.75em',
+              marginBottom: '0.75em',
+              lineHeight: '1.8'
+            },
+            // Списки
+            '& ul, & ol': {
+              marginLeft: '1.5em',
+              marginTop: '0.75em',
+              marginBottom: '0.75em',
+              paddingLeft: '0.5em'
+            },
+            '& li': {
+              marginTop: '0.4em',
+              marginBottom: '0.4em',
+              lineHeight: '1.7'
+            },
+            '& li > p': {
+              marginTop: '0.25em',
+              marginBottom: '0.25em'
+            },
+            // Инлайн-код
+            '& code': {
+              backgroundColor: '#EDF2F7',
+              color: '#C53030',
+              padding: '0.15em 0.4em',
+              borderRadius: '4px',
+              fontSize: '0.9em',
+              fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+              fontWeight: '500'
+            },
+            // Блоки кода
+            '& pre': {
+              backgroundColor: '#1A202C',
+              color: '#E2E8F0',
+              padding: '1em 1.2em',
+              borderRadius: '8px',
+              overflowX: 'auto',
+              marginTop: '1em',
+              marginBottom: '1em',
+              border: '1px solid #2D3748',
+              fontSize: '0.9em',
+              lineHeight: '1.6'
+            },
+            '& pre code': {
+              backgroundColor: 'transparent',
+              color: '#E2E8F0',
+              padding: '0',
+              fontFamily: 'Monaco, Consolas, "Courier New", monospace'
+            },
+            // Цитаты
+            '& blockquote': {
+              borderLeft: '4px solid #4299E1',
+              paddingLeft: '1em',
+              paddingTop: '0.5em',
+              paddingBottom: '0.5em',
+              marginLeft: '0',
+              marginTop: '1em',
+              marginBottom: '1em',
+              fontStyle: 'italic',
+              color: '#4A5568',
+              backgroundColor: '#EBF8FF',
+              borderRadius: '0 4px 4px 0'
+            },
+            '& blockquote p': {
+              marginTop: '0.25em',
+              marginBottom: '0.25em'
+            },
+            // Ссылки
+            '& a': {
+              color: '#3182CE',
+              textDecoration: 'underline',
+              fontWeight: '500',
+              transition: 'color 0.2s',
+              '&:hover': {
+                color: '#2C5282'
+              }
+            },
+            // Горизонтальная линия
+            '& hr': {
+              border: 'none',
+              borderTop: '2px solid #E2E8F0',
+              marginTop: '1.5em',
+              marginBottom: '1.5em'
+            },
+            // Таблицы
+            '& table': {
+              borderCollapse: 'collapse',
+              width: '100%',
+              marginTop: '1em',
+              marginBottom: '1em',
+              fontSize: '0.95em'
+            },
+            '& table thead': {
+              backgroundColor: '#F7FAFC'
+            },
+            '& table th': {
+              border: '1px solid #E2E8F0',
+              padding: '0.75em 1em',
+              textAlign: 'left',
+              fontWeight: '600',
+              color: '#2D3748'
+            },
+            '& table td': {
+              border: '1px solid #E2E8F0',
+              padding: '0.75em 1em',
+              textAlign: 'left'
+            },
+            '& table tr:nth-of-type(even)': {
+              backgroundColor: '#F7FAFC'
+            },
+            // Выделение (strong, em)
+            '& strong': {
+              fontWeight: '600',
+              color: '#2D3748'
+            },
+            '& em': {
+              fontStyle: 'italic'
+            },
+            // Изображения
+            '& img': {
+              maxWidth: '100%',
+              height: 'auto',
+              borderRadius: '8px',
+              marginTop: '1em',
+              marginBottom: '1em'
+            }
+          }}
+        >
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {pages[currentPage]}
+          </ReactMarkdown>
+        </Box>
+
+        {totalPages > 1 && (
+          <HStack justify="center" gap={2}>
+            <Button
+              size="sm"
+              variant="outline"
+              colorScheme="blue"
+              onClick={goToPrevious}
+              // @ts-expect-error Chakra UI v2 uses isDisabled
+              isDisabled={currentPage === 0}
+              leftIcon={<Text>←</Text>}
+            >
+              Предыдущая
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              colorScheme="blue"
+              onClick={goToNext}
+              // @ts-expect-error Chakra UI v2 uses isDisabled
+              isDisabled={currentPage === totalPages - 1}
+              rightIcon={<Text>→</Text>}
+            >
+              Следующая
+            </Button>
+          </HStack>
+        )}
+      </VStack>
+    </Box>
+  )
+}
\ No newline at end of file
diff --git a/src/components/personal/TaskWorkspace.tsx b/src/components/personal/TaskWorkspace.tsx
index 084e297..00203e4 100644
--- a/src/components/personal/TaskWorkspace.tsx
+++ b/src/components/personal/TaskWorkspace.tsx
@@ -13,6 +13,7 @@ import remarkGfm from 'remark-gfm'
 import type { ChallengeTask } from '../../__data__/types'
 import { useChallenge } from '../../context/ChallengeContext'
 import { useSubmission } from '../../hooks/useSubmission'
+import { LearningMaterialViewer } from './LearningMaterialViewer'
 
 interface TaskWorkspaceProps {
   task: ChallengeTask
@@ -27,31 +28,34 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
 
   // Сохраняем последний результат, чтобы блок не исчезал
   const [lastResult, setLastResult] = useState<typeof finalSubmission>(null)
+  // Состояние для показа дополнительного материала
+  const [showLearningMaterial, setShowLearningMaterial] = useState(false)
 
   const isChecking = !!queueStatus || isSubmitting
   const isAccepted = finalSubmission?.status === 'accepted'
   const needsRevision = finalSubmission?.status === 'needs_revision'
-  
+
   // Вычисляем прогресс проверки (0-100%)
   const checkingProgress = (() => {
     if (!queueStatus) return 0
-    
+
     const initial = queueStatus.initialPosition || 3
     const current = queueStatus.position || 0
-    
+
     if (queueStatus.status === 'in_progress') return 90 // Почти готово
     if (current === 0) return 90
-    
+
     // От 0% до 80% по мере движения в очереди
     const progress = ((initial - current) / initial) * 80
     return Math.max(10, progress) // Минимум 10% чтобы было видно
   })()
-  
+
   // Сбрасываем состояние при смене задания
   useEffect(() => {
     setLastResult(null)
+    setShowLearningMaterial(false)
   }, [task.id])
-  
+
   // Обновляем сохраненный результат только когда получаем новый
   useEffect(() => {
     if (finalSubmission) {
@@ -64,7 +68,7 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
       refreshStats()
     }
   }, [finalSubmission, refreshStats])
-  
+
   // Используем либо текущий результат, либо последний сохраненный
   const displayedSubmission = finalSubmission || lastResult
   const showAccepted = displayedSubmission?.status === 'accepted'
@@ -76,57 +80,58 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
         <Text fontSize="lg" fontWeight="bold" mb={3} color="gray.800">
           {task.title}
         </Text>
+
         <Box
           color="gray.700"
           fontSize="sm"
           lineHeight="1.7"
           css={{
             // Заголовки
-            '& h1': { 
-              fontSize: '1.75em', 
-              fontWeight: '700', 
-              marginTop: '1.2em', 
+            '& h1': {
+              fontSize: '1.75em',
+              fontWeight: '700',
+              marginTop: '1.2em',
               marginBottom: '0.6em',
               color: '#2D3748',
               borderBottom: '2px solid #E2E8F0',
               paddingBottom: '0.3em'
             },
-            '& h2': { 
-              fontSize: '1.5em', 
-              fontWeight: '600', 
-              marginTop: '1em', 
+            '& h2': {
+              fontSize: '1.5em',
+              fontWeight: '600',
+              marginTop: '1em',
               marginBottom: '0.5em',
               color: '#2D3748'
             },
-            '& h3': { 
-              fontSize: '1.25em', 
-              fontWeight: '600', 
-              marginTop: '0.8em', 
+            '& h3': {
+              fontSize: '1.25em',
+              fontWeight: '600',
+              marginTop: '0.8em',
               marginBottom: '0.4em',
               color: '#2D3748'
             },
-            '& h4': { 
-              fontSize: '1.1em', 
-              fontWeight: '600', 
-              marginTop: '0.6em', 
+            '& h4': {
+              fontSize: '1.1em',
+              fontWeight: '600',
+              marginTop: '0.6em',
               marginBottom: '0.3em',
               color: '#4A5568'
             },
             // Параграфы
-            '& p': { 
-              marginTop: '0.75em', 
+            '& p': {
+              marginTop: '0.75em',
               marginBottom: '0.75em',
               lineHeight: '1.8'
             },
             // Списки
-            '& ul, & ol': { 
-              marginLeft: '1.5em', 
-              marginTop: '0.75em', 
+            '& ul, & ol': {
+              marginLeft: '1.5em',
+              marginTop: '0.75em',
               marginBottom: '0.75em',
               paddingLeft: '0.5em'
             },
-            '& li': { 
-              marginTop: '0.4em', 
+            '& li': {
+              marginTop: '0.4em',
               marginBottom: '0.4em',
               lineHeight: '1.7'
             },
@@ -135,41 +140,41 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
               marginBottom: '0.25em'
             },
             // Инлайн-код
-            '& code': { 
-              backgroundColor: '#EDF2F7', 
+            '& code': {
+              backgroundColor: '#EDF2F7',
               color: '#C53030',
-              padding: '0.15em 0.4em', 
-              borderRadius: '4px', 
+              padding: '0.15em 0.4em',
+              borderRadius: '4px',
               fontSize: '0.9em',
               fontFamily: 'Monaco, Consolas, "Courier New", monospace',
               fontWeight: '500'
             },
             // Блоки кода
-            '& pre': { 
-              backgroundColor: '#1A202C', 
+            '& pre': {
+              backgroundColor: '#1A202C',
               color: '#E2E8F0',
-              padding: '1em 1.2em', 
-              borderRadius: '8px', 
-              overflowX: 'auto', 
-              marginTop: '1em', 
+              padding: '1em 1.2em',
+              borderRadius: '8px',
+              overflowX: 'auto',
+              marginTop: '1em',
               marginBottom: '1em',
               border: '1px solid #2D3748',
               fontSize: '0.9em',
               lineHeight: '1.6'
             },
-            '& pre code': { 
-              backgroundColor: 'transparent', 
+            '& pre code': {
+              backgroundColor: 'transparent',
               color: '#E2E8F0',
               padding: '0',
               fontFamily: 'Monaco, Consolas, "Courier New", monospace'
             },
             // Цитаты
-            '& blockquote': { 
-              borderLeft: '4px solid #4299E1', 
-              paddingLeft: '1em', 
+            '& blockquote': {
+              borderLeft: '4px solid #4299E1',
+              paddingLeft: '1em',
               paddingTop: '0.5em',
               paddingBottom: '0.5em',
-              marginLeft: '0', 
+              marginLeft: '0',
               marginTop: '1em',
               marginBottom: '1em',
               fontStyle: 'italic',
@@ -182,8 +187,8 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
               marginBottom: '0.25em'
             },
             // Ссылки
-            '& a': { 
-              color: '#3182CE', 
+            '& a': {
+              color: '#3182CE',
               textDecoration: 'underline',
               fontWeight: '500',
               transition: 'color 0.2s',
@@ -244,16 +249,40 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
         >
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{task.description}</ReactMarkdown>
         </Box>
+
+        {/* Кнопка для показа дополнительного материала */}
+        {task.learningMaterial && !showLearningMaterial && (
+          <HStack justify="center" mt={4}>
+            <Button
+              size="sm"
+              variant="outline"
+              colorScheme="blue"
+              onClick={() => setShowLearningMaterial(true)}
+            >
+              📚 Прочитать доп. материал
+            </Button>
+          </HStack>
+        )}
       </Box>
 
+      {/* Дополнительные материалы - показываются отдельно */}
+      {task.learningMaterial && showLearningMaterial && (
+        <LearningMaterialViewer
+          content={task.learningMaterial}
+          linesPerPage={30}
+        />
+      )}
+
+
+
       {/* Статус проверки и результат - фиксированное место */}
       <Box minH="80px">
         {queueStatus && !finalSubmission ? (
-          <Box 
-            borderWidth="2px" 
-            borderRadius="lg" 
-            borderColor="blue.300" 
-            bg="blue.50" 
+          <Box
+            borderWidth="2px"
+            borderRadius="lg"
+            borderColor="blue.300"
+            bg="blue.50"
             p={4}
           >
             <VStack gap={3} align="stretch">
@@ -262,13 +291,13 @@ export const TaskWorkspace = ({ task, onTaskComplete }: TaskWorkspaceProps) => {
                   Проверяем решение...
                 </Text>
               </HStack>
-              
+
               <Box>
                 {/* Кастомный прогресс-бар */}
-                <Box 
-                  bg="blue.100" 
-                  borderRadius="md" 
-                  h="24px" 
+                <Box
+                  bg="blue.100"
+                  borderRadius="md"
+                  h="24px"
                   overflow="hidden"
                   position="relative"
                 >
diff --git a/stubs/api/data/chains.json b/stubs/api/data/chains.json
index 0d831fa..107739c 100644
--- a/stubs/api/data/chains.json
+++ b/stubs/api/data/chains.json
@@ -13,6 +13,7 @@
           "_id": "task-html-intro",
           "title": "HTML старт",
           "description": "# HTML старт\n\nСоздайте базовую HTML-страницу с заголовком и абзацем.",
+          "learningMaterial": "# Дополнительные материалы: HTML основы\n\n## Что такое HTML?\n\n**HTML (HyperText Markup Language)** — это язык разметки гипертекста, который является основой всех веб-страниц. HTML позволяет создавать структуру документа и определять его содержимое.\n\n## История HTML\n\nHTML был создан Тимом Бернерс-Ли в 1989 году. Первая версия HTML появилась в 1991 году. С тех пор язык эволюционировал:\n\n- **HTML 2.0** (1995) — первая стандартизированная версия\n- **HTML 3.2** (1997) — добавлены таблицы и апплеты\n- **HTML 4.01** (1999) — последняя версия HTML 4\n- **HTML5** (2014) — современная версия с множеством новых возможностей\n\n## Базовая структура HTML-документа\n\nКаждый HTML-документ имеет стандартную структуру:\n\n```html\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Заголовок страницы</title>\n</head>\n<body>\n    <!-- Основное содержимое страницы -->\n</body>\n</html>\n```\n\n### Детальное объяснение структуры:\n\n- `<!DOCTYPE html>` — сообщает браузеру, что это HTML5 документ\n- `<html lang=\"ru\">` — корневой элемент с указанием языка\n- `<head>` — содержит мета-информацию\n- `<meta charset=\"UTF-8\">` — кодировка символов\n- `<meta name=\"viewport\"...>` — адаптивность для мобильных устройств\n- `<title>` — заголовок вкладки браузера\n- `<body>` — видимая часть страницы\n\n## Семантические элементы HTML5\n\nHTML5 ввел множество семантических элементов для лучшей структуры:\n\n```html\n<header>     <!-- Шапка сайта -->\n<nav>         <!-- Навигация -->\n<main>        <!-- Основное содержимое -->\n<section>     <!-- Раздел -->\n<article>     <!-- Статья -->\n<aside>       <!-- Боковая панель -->\n<footer>      <!-- Подвал -->\n```\n\n## Работа с текстом\n\n### Заголовки и параграфы\n\n```html\n<h1>Главный заголовок</h1>\n<h2>Подзаголовок</h2>\n<p>Абзац текста с <strong>выделением</strong> и <em>курсивом</em>.</p>\n```\n\n### Списки\n\n```html\n<!-- Нумерованный список -->\n<ol>\n    <li>Первый пункт</li>\n    <li>Второй пункт</li>\n</ol>\n\n<!-- Маркированный список -->\n<ul>\n    <li>Элемент списка</li>\n    <li>Еще один элемент</li>\n</ul>\n```\n\n## Мультимедиа\n\n### Изображения\n\n```html\n<img src=\"image.jpg\" alt=\"Описание изображения\" width=\"300\" height=\"200\">\n```\n\n### Ссылки\n\n```html\n<!-- Внешняя ссылка -->\n<a href=\"https://example.com\" target=\"_blank\">Ссылка</a>\n\n<!-- Внутренняя ссылка -->\n<a href=\"#section1\">Перейти к разделу</a>\n```\n\n## Формы и интерактивность\n\n```html\n<form action=\"/submit\" method=\"post\">\n    <label for=\"name\">Имя:</label>\n    <input type=\"text\" id=\"name\" name=\"name\" required>\n    \n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\" required>\n    \n    <button type=\"submit\">Отправить</button>\n</form>\n```\n\n## Атрибуты и их типы\n\n### Глобальные атрибуты\n\n- `id` — уникальный идентификатор\n- `class` — CSS классы\n- `title` — всплывающая подсказка\n- `data-*` — пользовательские данные\n\n### Атрибуты специального назначения\n\n- `src` — источник (для изображений, скриптов)\n- `href` — ссылка (для ссылок)\n- `alt` — альтернативный текст (для изображений)\n- `type` — тип (для input элементов)\n\n## Валидация HTML\n\nДля проверки корректности HTML-кода используйте:\n\n- [W3C HTML Validator](https://validator.w3.org/)\n- [HTML5 Validator](https://html5.validator.nu/)\n\n## Лучшие практики\n\n1. **Используйте семантические элементы** — это улучшает SEO и доступность\n2. **Всегда указывайте alt для изображений** — для скринридеров\n3. **Используйте правильную иерархию заголовков** — H1 → H2 → H3\n4. **Валидируйте код** — проверяйте на ошибки\n5. **Используйте отступы** — код должен быть читаемым\n\n## Полезные инструменты\n\n- **VS Code** с расширениями для HTML\n- **Emmet** — ускоряет написание HTML\n- **Browser DevTools** — для отладки\n- **Prettier** — форматирование кода\n\n## Что изучать дальше\n\n1. **CSS** — для стилизации страниц\n2. **JavaScript** — для интерактивности\n3. **Accessibility** — доступность веб-приложений\n4. **SEO** — оптимизация для поисковых систем\n5. **Performance** — производительность\n\n## Ресурсы для изучения\n\n- [MDN Web Docs](https://developer.mozilla.org/ru/docs/Web/HTML)\n- [HTML Academy](https://htmlacademy.ru/)\n- [Codecademy HTML](https://www.codecademy.com/learn/learn-html)\n- [freeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/)\n- [W3Schools](https://www.w3schools.com/html/)\n\n## Практические упражнения\n\n1. Создайте страницу-визитку с фото, именем и контактами\n2. Сделайте простое меню навигации\n3. Добавьте форму обратной связи\n4. Создайте галерею изображений\n5. Сверстайте новостную страницу\n\n## Заключение\n\nHTML — это фундамент веб-разработки. Понимание основ HTML позволит вам создавать структурированные и семантически правильные веб-страницы. Комбинируя HTML с CSS и JavaScript, вы сможете создавать современные веб-приложения.",
           "createdAt": "2024-09-01T08:05:00.000Z",
           "updatedAt": "2024-09-10T12:00:00.000Z"
         },
@@ -21,6 +22,7 @@
           "_id": "task-react-component",
           "title": "React компонент",
           "description": "# React компонент\n\nСоздайте компонент `StatCard` с пропсами `title` и `value`.",
+          "learningMaterial": "# Дополнительные материалы: React компоненты\n\n## Основы компонентов\n\nКомпоненты — это строительные блоки React приложений. Они позволяют разбить интерфейс на независимые, переиспользуемые части.\n\n### Функциональные компоненты\n\nФункциональные компоненты — это простые функции JavaScript, которые принимают props и возвращают JSX:\n\n```jsx\nfunction Welcome(props) {\n  return <h1>Привет, {props.name}</h1>;\n}\n```\n\n### Классовые компоненты\n\nКлассовые компоненты наследуются от React.Component:\n\n```jsx\nclass Welcome extends React.Component {\n  render() {\n    return <h1>Привет, {this.props.name}</h1>;\n  }\n}\n```\n\n## Props\n\nProps (свойства) — это механизм передачи данных от родительского компонента к дочернему.\n\n```jsx\nfunction Greeting({ name, age }) {\n  return (\n    <div>\n      <h1>Привет, {name}!</h1>\n      <p>Тебе {age} лет.</p>\n    </div>\n  );\n}\n```\n\n## Состояние компонента\n\nСостояние позволяет компонентам изменяться со временем:\n\n```jsx\nimport { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  \n  return (\n    <div>\n      <p>Ты нажал {count} раз</p>\n      <button onClick={() => setCount(count + 1)}>\n        Нажми меня\n      </button>\n    </div>\n  );\n}\n```\n\n## Жизненный цикл компонентов\n\nКомпоненты имеют жизненный цикл с различными этапами:\n\n- **Mounting** (монтирование)\n- **Updating** (обновление)\n- **Unmounting** (размонтирование)\n\n## Хуки\n\nХуки позволяют использовать состояние и другие возможности React в функциональных компонентах:\n\n- `useState` — управление состоянием\n- `useEffect` — побочные эффекты\n- `useContext` — контекст\n- `useReducer` — сложное состояние\n\n## Лучшие практики\n\n1. **Единая ответственность** — каждый компонент должен делать только одну вещь\n2. **Переиспользуемость** — компоненты должны быть переиспользуемыми\n3. **Читаемость** — код должен быть понятным и читаемым\n4. **Производительность** — оптимизировать рендеринг с помощью React.memo, useMemo, useCallback\n\n## Полезные ссылки\n\n- [Официальная документация React](https://react.dev)\n- [React Hooks](https://react.dev/reference/react)\n- [Создание React приложения](https://create-react-app.dev)\n\n## Примеры компонентов\n\n### Простой компонент\n\n```jsx\nfunction Button({ children, onClick }) {\n  return (\n    <button \n      onClick={onClick}\n      style={{ \n        padding: '10px 20px', \n        backgroundColor: '#007bff', \n        color: 'white', \n        border: 'none', \n        borderRadius: '4px' \n      }}\n    >\n      {children}\n    </button>\n  );\n}\n```\n\n### Компонент с состоянием\n\n```jsx\nimport { useState } from 'react';\n\nfunction TodoList() {\n  const [todos, setTodos] = useState([]);\n  const [input, setInput] = useState('');\n  \n  const addTodo = () => {\n    setTodos([...todos, input]);\n    setInput('');\n  };\n  \n  return (\n    <div>\n      <input \n        value={input} \n        onChange={e => setInput(e.target.value)} \n        placeholder=\"Добавить задачу\"\n      />\n      <button onClick={addTodo}>Добавить</button>\n      <ul>\n        {todos.map((todo, index) => (\n          <li key={index}>{todo}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n```\n\n### Компонент с эффектами\n\n```jsx\nimport { useState, useEffect } from 'react';\n\nfunction UserProfile({ userId }) {\n  const [user, setUser] = useState(null);\n  \n  useEffect(() => {\n    fetch(`/api/users/${userId}`)\n      .then(res => res.json())\n      .then(setUser);\n  }, [userId]);\n  \n  if (!user) return <div>Загрузка...</div>;\n  \n  return (\n    <div>\n      <h1>{user.name}</h1>\n      <p>{user.email}</p>\n    </div>\n  );\n}\n```\n\n## Заключение\n\nReact компоненты — это мощный инструмент для создания пользовательских интерфейсов. Понимание основ компонентов, props, состояния и хуков поможет вам создавать качественные и поддерживаемые приложения.",
           "createdAt": "2024-09-05T11:30:00.000Z",
           "updatedAt": "2024-10-01T09:45:00.000Z"
         },