---
### 1. Клиентский код (Front-end)
Это то, что пользователь видит в браузере:
- **HTML (HyperText Markup Language):** Основной язык разметки веб-страниц. Он задаёт структуру сайта: заголовки, параграфы, ссылки, изображения и т.д.
- **CSS (Cascading Style Sheets):** Отвечает за оформление: цвета, шрифты, отступы и позиционирование элементов. Современные техники, такие как Flexbox и Grid, помогают создавать адаптивные макеты.
- **JavaScript:** Язык программирования, который оживляет страницу. С его помощью реализуются интерактивные элементы, анимации и динамическая загрузка данных.
Помимо этих основ, разработчики используют разнообразные библиотеки и фреймворки (например, React, Angular, Vue.js, jQuery) и CSS-фреймворки (Bootstrap, Tailwind CSS) для ускорения разработки и улучшения качества кода.
---
### 2. Серверный код (Back-end)
Этот код работает на стороне сервера и отвечает за обработку данных, бизнес-логику, авторизацию и работу с базами данных:
- **Языки:** Здесь применяются языки, такие как PHP, Python, Ruby, Java, C#, Node.js (на JavaScript) и многие другие.
- **Фреймворки:** Для упрощения разработки используются системы, как например Laravel или Symfony (для PHP), Django или Flask (для Python), Ruby on Rails, Spring (для Java) и Express (для Node.js).
Серверный код генерирует динамический контент, обрабатывает запросы пользователей и обеспечивает обмен данными с клиентской частью сайта.
---
### 3. Работа с данными
Для хранения и управления данными сайта применяют базы данных:
- **Реляционные базы данных:** Используют SQL (MySQL, PostgreSQL, SQLite, Oracle) для создания, чтения, обновления и удаления данных.
- **NoSQL базы данных:** Такие как MongoDB, Cassandra или Firebase, которые работают с данными в формате JSON и предлагают гибкую схему хранения.
Также применяются форматы обмена данными, такие как JSON, XML или YAML, которые помогают передавать и настраивать данные между сервером и клиентом.
---
### 4. Системы сборки, конфигурации и автоматизации
Современные веб-проекты часто требуют использования вспомогательных инструментов для управления проектом:
- **Системы сборки и пакетные менеджеры:** Webpack, Gulp, npm, Yarn облегчают организацию кода и управление зависимостями.
- **Конфигурационные файлы:** Например, файлы `.htaccess` для настройки Apache или конфигурация для Nginx, а также файловые форматы YAML или JSON для CI/CD систем и инфраструктурного кода.
- **Скрипты автоматизации:** Batch-скрипты, Bash или PowerShell помогают автоматизировать рутинные задачи, такие как деплой, тестирование или резервное копирование.
---
### 5. Дополнительные технологии и разработки
- **WebAssembly:** Позволяет запускать код, написанный на таких языках, как C, C++ или Rust, прямо в браузере, что открывает новые возможности для производительных веб-приложений.
- **API код:** Интерфейсы для подключения внешних сервисов или взаимодействия между отдельными модулями сайта (REST API, GraphQL и т.д.).
- **Анимация и интерактивность:** Помимо базового JavaScript, специализированные библиотеки (например, GSAP или Anime.js) позволяют создавать сложные анимации и визуальные эффекты.
---
### Итог
На современном сайте практически **каждая часть** его функционирования полагается на отдельный вид кода. Именно их взаимное сотрудничество обеспечивает не только корректное отображение сайта, но и его безопасность, функциональность и масштабируемость. Если вы только начинаете изучать веб-разработку, хорошим стартом будет освоение HTML, CSS и базового JavaScript, а со временем — переход к серверным технологиям и системам управления данными.