Frontend
Frontend
Frontend — это часть веб-разработки, отвечающая за всё, что пользователь видит и с чем взаимодействует в браузере. Это интерфейс сайта или веб-приложения: кнопки, формы, анимации, макеты, шрифты, цвета, медиа и динамическое поведение. Frontend объединяет дизайн, логику и данные, превращая их в живой, отзывчивый цифровой опыт.
Основы среды выполнения
Frontend существует внутри браузера — специализированной программы, предназначенной для отображения веб-контента.
- 2.03. Сеть и интернет - основы и принципы работы
- 2.03. История развития сетевых технологий
- 2.03. URL URI URN
- 2.03. Сетевые протоколы, порты и установка соединения
- 2.03. Что происходит при загрузке сайта
- 2.03. DNS - система доменных имён и её работа
- 2.03. Cookie
- 2.03. Дополнительные сетевые технологии
- 2.03. HTTP и HTTPS
- 2.03. Сетевые устройства - маршрутизаторы, коммутаторы, модемы
- 2.03. Основы IP-адресации
- 2.03. Надёжная доставка — от идеи к TCP — от идеи к TCP — от идеи к TCP — от идеи к TCP — от идеи к TCP
- 2.03. Интернет-провайдер
- 2.03. Беспроводные сети - Wi-Fi, Bluetooth, LTE
- 2.03. Как работать с сетью
- 2.03. Государственное регулирование интернета
- 2.03. Сеть и интернет — итоги — итоги — итоги — итоги — итоги
- 2.03. Сеть и интернет — чек-лист — чек-лист — чек-лист — чек-лист — чек-лист
- Веб-браузеры — среда, в которой выполняется frontend-код.
- История интернета — глобальная сеть, обеспечивающая доставку ресурсов.
Данные и информация во frontend
Все элементы интерфейса оперируют данными: текстом, числами, изображениями, метаданными.
- 1.09. Данные и информация
- 1.09. Виды информации
- 1.09. Типы данных в вычислительных системах
- 1.09. Типизация
- 1.09. Метаданные
- 1.09. Данные и информация — итоги — итоги — итоги — итоги — итоги
- 1.09. Данные и информация — чек-лист — чек-лист — чек-лист — чек-лист — чек-лист
- Кэширование — механизм ускорения повторной загрузки ресурсов.
- Текстовые данные — основа контента.
- Медиаплееры и обработка мультимедиа — изображения, аудио, видео как составляющие интерфейса.
Языки frontend: три столпа
Современный frontend строится на трёх ключевых технологиях:
HTML — структура
- 1.24. Основные языки
- 1.24. Естественные и искусственные языки в цифровой среде
- 1.24. Языки запросов - SQL и его аналоги
- 1.24. Языки разметки - HTML, XML, Markdown
- 1.24. Языки стилей - CSS и препроцессоры
- 1.24. Языки программирования
- 1.24. Визуальные языки программирования и моделирования
- 1.24. Классификация языков в IT — итоги — итоги — итоги — итоги — итоги
- 1.24. Классификация языков в IT — чек-лист — чек-лист — чек-лист — чек-лист — чек-лист
- HTML
- Основные HTML-теги и их назначение
- Справочник по HTML
HTML определяет смысловую структуру страницы: заголовки, абзацы, списки, формы, ссылки.
CSS — оформление
- 1.24. Основные языки
- 1.24. Естественные и искусственные языки в цифровой среде
- 1.24. Языки запросов - SQL и его аналоги
- 1.24. Языки разметки - HTML, XML, Markdown
- 1.24. Языки стилей - CSS и препроцессоры
- 1.24. Языки программирования
- 1.24. Визуальные языки программирования и моделирования
- 1.24. Классификация языков в IT — итоги — итоги — итоги — итоги — итоги
- 1.24. Классификация языков в IT — чек-лист — чек-лист — чек-лист — чек-лист — чек-лист
- CSS
- Flexbox и CSS Grid — современные методы компоновки.
- Основные стили в CSS — корректное отображение на всех устройствах.
- Псевдоклассы и псевдоэлементы — стилизация состояний элементов.
- Анимации, переходы и трансформации — микровзаимодействия и плавные переходы.
- Адаптивный и отзывчивый дизайн
CSS управляет внешним видом: цветами, шрифтами, отступами, позиционированием.
JavaScript — поведение
- 5.01. Основы JavaScript
- 5.01. История языка JavaScript
- 5.01. Синтаксис и пунктуация в JavaScript
- 5.01. Структура и подключение JavaScript-кода
- 5.01. Применение JavaScript в вебе и за его пределами
- 5.01. Функции в JavaScript
- 5.01. Область видимости и замыкания в JavaScript
- 5.01. Переменные в JavaScript
- 5.01. Типы данных в JavaScript
- 5.01. Выражения и операторы в JavaScript
- 5.01. Циклы в JavaScript
- 5.01. Асинхронное программирование в JavaScript
- 5.01. Работа с объектами и прототипами
- 5.01. События и обработка событий в браузере
- 5.01. Консоль, отладка и боль
- 5.01. Экосистема JavaScript - инструменты и фреймворки
- 5.01. TypeScript
- JavaScript — практика — практика — практика — практика — практика
- 5.01. Тестирование JavaScript — Vitest и Testing Library — Vitest и Testing Library — Vitest и Testing Library — Vitest и Testing Library — Vitest и Testing Library
- 5.01. Виджеты интерфейса на ванильном JavaScript
- 5.01. Регулярные выражения в JavaScript
- 5.01. Валидация форм в JavaScript
- 5.01. Отмена запросов и поток событий с сервера
- 5.01. Наблюдатели DOM — Intersection, Resize и Mutation — Intersection, Resize и Mutation — Intersection, Resize и Mutation — Intersection, Resize и Mutation — Intersection, Resize и Mutation
- 5.01. Хранение данных в браузере
- 5.01. ES-модули в браузере и обзор Temporal API
- 5.01. Объектная модель браузера (BOM)
- 5.01. Чтение файлов в браузере
- 5.01. Web Components — Custom Elements и Shadow DOM — Custom Elements и Shadow DOM — Custom Elements и Shadow DOM — Custom Elements и Shadow DOM — Custom Elements и Shadow DOM
- 5.01. Кнопка "Поделиться" — DOM, события и Web Share API — DOM, события и Web Share API — DOM, события и Web Share API — DOM, события и Web Share API — DOM, события и Web Share API
- 5.01. Нативные уведомления в браузере — Notification API — Notification API — Notification API — Notification API — Notification API
- 5.01. Canvas 2D — программируемая графика в браузере — программируемая графика в браузере — программируемая графика в браузере — программируемая графика в браузере — программируемая графика в браузере
- 5.01. Рекомендации по разработке на JavaScript
- 5.01. Работа с HTML в JavaScript
- 5.01. Простые приложения на JavaScript
- 5.01. Форматы JavaScript
- 5.01. Ключевые слова языка JavaScript
- 5.01. Встроенные функции JavaScript
JavaScript добавляет динамику: обновление контента без перезагрузки, валидация форм, сложные интерактивные элементы.
Архитектура и организация кода
Современный frontend — это не просто скрипты, а полноценные приложения.
- 4.02. Что такое код и как он работает
- 4.02. Теория представления кода
- 4.02. Ключевые слова в языках программирования
- 4.02. Функции
- 4.02. Циклы
- 4.02. Стили оформления кода
- 4.02. Операторы
- 4.02. Обработка значения null
- 4.02. Уровни абстракции языков программирования
- 4.02. Синтаксический сахар
- 4.02. Язык программирования
- Фронтенд — определение и границы ответственности.
- Проект программного обеспечения
- Модульность и компонентный подход в разработке
- Процессы и потоки выполнения
- Программные парадигмы
- Объектно-ориентированное программирование
Фреймворки и инструменты
Для ускорения разработки и поддержки сложных приложений используются специализированные библиотеки.
- Экосистема JavaScript - инструменты и фреймворки
- React - библиотека для пользовательских интерфейсов
- Vue.js
- Angular
- TypeScript — о разделе — о разделе — о разделе — о разделе — подробнее в отдельном разделе языка.
- Ext JS
Проектирование и дизайн
Frontend начинается не с кода, а с понимания задачи и пользователя.
- 2.04. Сайты и веб-сайты
- 2.04. Дизайн веб-интерфейсов
- 2.04. Рекламные технологии в вебе
- 2.04. Адресная строка браузера
- 2.04. Архитектура веб-приложений
- 2.04. Веб-серверы
- 2.04. Конструкторы сайтов
- 2.04. Архитектурные особенности современных веб-приложений
- 2.04. Фоновая работа и офлайн-режим веб-приложений
- 2.04. Хранение данных в браузере и на сервере
- 2.04. Push-уведомления и рассылки
- 2.04. SEO-оптимизация
- 2.04. Персонализация и пользовательские предпочтения
- 2.04. Web API в браузере
- 2.04. Web API на практике - примеры кода
- 2.04. Справочник по Tilda
- 2.04. BB-код — разметка постов на форумах — разметка постов на форумах — разметка постов на форумах — разметка постов на форумах — разметка постов на форумах
- 2.04. История браузера и приватность на клиенте
- 2.04. Интернет, сайт и HTTP — связь с культурой сети — связь с культурой сети — связь с культурой сети — связь с культурой сети — связь с культурой сети
- 2.04. Движки браузеров и линейки продуктов
- 2.04. HTTPS и TLS — шифрование веба — шифрование веба — шифрование веба — шифрование веба — шифрование веба
- 2.04. Polling, Long Polling, SSE и Webhook
- 2.04. Метрики производительности веб-страницы
- Проектирование веб-разработки
- Текст в веб-технологиях - HTML, Markdown, шаблоны
Разработка и отладка
Процесс создания frontend включает написание, тестирование и оптимизацию кода.
- 4.14. Процесс разработки программного обеспечения
- 4.14. Разработка и отладка — итоги — итоги — итоги — итоги — итоги
- 4.14. Разработка и отладка — чек-лист — чек-лист — чек-лист — чек-лист — чек-лист
- 4.14. Профессиональные практики и культура разработки
- 4.14. Типовые задачи разработчика — справочник-шпаргалка — справочник-шпаргалка — справочник-шпаргалка — справочник-шпаргалка — справочник-шпаргалка
- 4.14. Отладка
- 4.14. Анализ и оптимизация производительности приложений
- 4.14. Создание и публикация собственной библиотеки
- 4.14. Пет-проекты
- 4.14. План развития разработчика
- 4.14. Организация структуры кодовой базы
- 4.14. README для разработчика
- 4.14. Проверка и валидация
- 4.14. Разработка расширений для веб-браузеров
- Система контроля версий Git
- Установка и настройка Git
Контекст использования
Frontend служит целям бизнеса, образования, коммуникации.
- 1.21. Поисковые системы
- 1.21. Языки поисковых запросов
- 1.21. Эффективный поиск в интернете
- 1.21. Популярные поисковые системы
- 1.21. ИИ для новичка
- 1.21. ИИ-инструменты в поисковиках
- 1.21. Факт-чекинг и первоисточники
- 1.21. Поиск информации — итоги — итоги — итоги — итоги — итоги
- 1.21. Поиск информации — чек-лист — чек-лист — чек-лист — чек-лист — чек-лист
- Цифровая коммуникация
- Мессенджеры и чаты
- Цифровые формы и анкеты
Программная основа
Frontend — это программа, исполняемая в браузере.
- 1.19. Что такое программа?
- 1.19. Компиляторы и интерпретаторы
- 1.19. Что такое мобильное приложение
- 1.19. Программа — итоги — итоги — итоги — итоги — итоги
- 1.19. Программа — чек-лист — чек-лист — чек-лист — чек-лист — чек-лист
- 1.19. Программное обеспечение и операционная система
- 1.19. Классификация программ
- 1.19. Поведение программ
- 1.19. Установка, обновление и удаление программ
- 1.19. Взаимодействие программ с операционной системой
- Исполняемые файлы
Frontend — это точка соприкосновения между человеком и цифровым миром. Он требует сочетания технической точности, эстетического вкуса и эмпатии к пользователю. Современный frontend-разработчик создаёт не просто страницы, а полноценные приложения, которые работают быстро, выглядят гармонично и помогают людям достигать своих целей.