В интернете очень много информации о создании сайтов, однако крайне сложно найти материал, который будет хорошо структурирован и сможет дать новичку целостную картину. Тебе начинают рассказывать об HTML, JavaScript, PHP, но не объясняют, как же они связаны. Потом ты упираешься в тупик, когда пытаешься понять, что такое фронтенд, бэкенд и где между ними граница. Я постараюсь объяснить все это максимально доступным языком для человека, который только начал свой путь в разработке сайтов и, возможно, впервые сталкивается с программированием.
У сайта есть 2 составляющие: frontend и backend. Front - это html, css, js, картинки и прочее, к чему у пользователя есть доступ. Когда человек заходит на сайт, с сервера загружаются эти файлы и отображаются в виде готовой html страницы. Если вы нажмете на f12 в браузере, то увидите весь этот код, отвечающий за отображение информации.
Backend скрыт от глаз пользователя. Это то, что хранится на сервере (который, по сути, является просто компьютером): базы данных, различные скрипты и программы, которые могут быть написаны на любом языке программирования. Например, фронтенд отправляет запрос на сервер, который, в свою очередь, находит нужную информацию в базе данных и возвращает результат, который встраивается в шаблон.
HTML
Безусловно, первым языком для изучения станет HTML. Он НЕ ЯВЛЯЕТСЯ языком программирования. В нем нет переменных, функций и прочего, он не позволяет выполнять никакие действия. Это язык разметки. На нем мы, можно сказать, размечаем страницу.
Например, на сайте есть меню. Мы помещаем все меню в один контейнер:
<nav>
Главная
Каталог
О компании
</nav>
Вставляем картинку:
<img src=‘/images/img.jpg’>
Таким образом мы размечаем страницу, чтобы в дальнейшем смочь обращаться к элементам для придания им стилей (изменения дизайна) с помощью CSS.
CSS
CSS тоже не является языком программирования. Это таблица стилей, с помощью которой мы можем задавать стиль элементам. Например, сделать фон нашего меню зеленым:
nav {
background: green;
}
CSS может встраиваться и прямо в html:
<nav style=‘background: green’>
Главная
Каталог
О компании
</nav>
JavaScript
Первый в нашем списке настоящий язык программирования. Он используется в фронтенде (хотя сейчас активно стал использоваться и в бэке, но пока не об этом) для всевозможных манипуляций с элементами страницы.
Например, JavaScript может:
- Добавлять и изменять HTML-код, CSS-стили, добавить новую кнопку и т.д.
- Реагировать нажатия кнопки мыши, клавиатуры, перемещения указателя.
- Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы.
- Получать и устанавливать куки, показывать сообщения и задавать вопросы.
Также существуют различные «надстройки» над этими языками (less, scss, jquery и т.д.), дающие дополнительные возможности и позволяющие упростить длинный код.
По сути, зная только эти языки, вы не сможете создать сайт, на который будете прямо со страницы в браузере добавлять, например, новые статьи, картинки, потому что у вас нет доступа к базам данных. Вы можете сделать скрипт, позволяющий менять текст на странице, но после ее перезагрузки все вернется к первоначальному виду.
Для упрощения вставки таких динамических элементов существуют различные шаблонизаторы (например, twig), благодаря которым вы можете использовать переменные, в которых будет храниться нужная вам информация. И вам совсем необязательно знать, как оно устроено изнутри и как информация попадает из базы данных в эту переменную. Поэтому, изучив основные языки (HTML, CSS, JS), вам стоит приступить к изучению фреймворков и шаблонизаторов, о которых вы сможете почитать в моих будущих статьях.
Backend
Как я уже говорил, бэк может быть написан на любом языке программирования, т.к. по сути является обычным приложением на серверном компьютере. Наиболее популярные:
- Ruby
- PHP
- Python
- Java
- JavaScript
Как раз бэкенд и отвечает за то, как та самая информация будет обработана и попадет из бозы данных во фронт.
Итоги
Основные языки на фронте, которые нужно знать:
- HTML
- CSS
- JavaScript
После этого можно (и нужно) будет изучать различные фреймворки, об этом будет отдельная статья.
В бэкенде вы в любом случае столкнетесь с PHP, поэтому, если вы не знаете никакого языка программирования, который могли бы применить для сайта, то будет неплохо выучить PHP.
