Заголовок страницы

{ "success": true, "body": [ { "id": "chain-frontend", "_id": "chain-frontend", "name": "Frontend Basics", "createdAt": "2024-09-01T08:00:00.000Z", "updatedAt": "2024-10-12T10:15:00.000Z", "tasks": [ { "id": "task-html-intro", "_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\n\n\n \n \n Заголовок страницы\n\n\n \n\n\n```\n\n### Детальное объяснение структуры:\n\n- `` — сообщает браузеру, что это HTML5 документ\n- `` — корневой элемент с указанием языка\n- `` — содержит мета-информацию\n- `` — кодировка символов\n- `` — адаптивность для мобильных устройств\n- `` — заголовок вкладки браузера\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" }, { "id": "task-react-component", "_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" }, { "id": "task-css-layout", "_id": "task-css-layout", "title": "CSS-верстка", "description": "# CSS-верстка\n\nСверстайте карточку с заголовком, описанием и кнопкой. Используйте Flexbox и тени.", "createdAt": "2024-09-10T14:00:00.000Z", "updatedAt": "2024-10-05T09:00:00.000Z" }, { "id": "task-js-dom", "_id": "task-js-dom", "title": "DOM-манипуляции", "description": "# DOM-манипуляции\n\nНапишите скрипт, который добавляет элементы списка по клику на кнопку и очищает их по второй кнопке.", "createdAt": "2024-09-15T10:20:00.000Z", "updatedAt": "2024-10-07T12:30:00.000Z" }, { "id": "task-react-state", "_id": "task-react-state", "title": "Состояние React", "description": "# Состояние React\n\nСоздайте компонент, который показывает счётчик кликов и два кнопки — увеличить/сбросить. Используйте хуки.", "createdAt": "2024-09-20T09:15:00.000Z", "updatedAt": "2024-10-08T08:45:00.000Z" }, { "id": "task-api-fetch", "_id": "task-api-fetch", "title": "Работа с API", "description": "# Работа с API\n\nСделайте запрос к фиктивному API и отобразите список пользователей с именами и email.", "createdAt": "2024-09-25T13:40:00.000Z", "updatedAt": "2024-10-09T10:10:00.000Z" } ] } ] }