Довольно заморочено, если честно. В этой статье мы не будем рассматривать варианты с конструкторами и коробочными решениями. Наша цель - понять полный процесс, по которому, скорее всего, никто из нас никогда не пойдет. Но я все еще считаю, что знать его полезно и нужно. Ремарка: в статье процесс описан в общих чертах, так сказать “для новичков”, чтобы понять в целом.
Также для пользы дела мы возьмем за основу, что цель сайта и основная концепция уже поняты, найдены и разработаны. Также не будем учитывать согласования, проверки и тесты, которые по факту занимают, наверное, процентов 70 от общего времени работы.
Итак…
Шаг 1. Дизайн
Дизайн это не просто красивая картинка, цвета и шрифты (хотя и они тоже). В первую очередь это функциональность сайта и пользовательский опыт (UX). Надо понять, в зависимости от того, что за сайт мы делаем (будь то личный блог, новостник, рекламный одностраничник или интернет-магазин), иерархию страниц, расположения кнопок, расположение блоков, внутренние ссылки и так далее. Вероятно, принятый изначально дизайн будет в итоге далеко не лучшим вариантом. Поэтому важно сразу настраивать системы аналитики (тема для отдельной статьи. Для общего понимания: это сторонний код (обычно JavaScript), который добавляется в код сайта и собирает полезную информацию о действиях пользователей, и через некоторое время после старта дизайн обновляется с учетом тепловых карт, которые показывают куда пользователи чаще всего кликают).
После формирования схемы сайта начинается этап разработки стиля, подбора цветовых гамм, распределения контента. Если речь идет о разработке сайта под крупную компанию, то обычно все проще - уже есть брендбуки, логотипы, основные решения понятны и включены в ТЗ. Если же разработка ведется для маленького предприятия или личного сайта, то процесс становится более творческим, но и куда более запутанным.
Базовый совет - если ты не дизайнер, найми дизайнера. Нет денег, позаимствуй основные решения у реализованных аналогичных проектов.
Шаг 2. Фронтенд
Внешний вид сайта готов, картинки для него сгенерированы (или отсняты/отрисованы, если вы динозавр), расписана схема, функционал элементов, подобраны цвета и шрифты… Короче, дизайнер уже улетел отдыхать после проделанной работы и теперь всю эту красоту надо подготовить для того, чтобы она могла быть доступна в интернете.
В первую очередь каждая отдельная страница разбивается на блоки для создания максимально простой структуры. Впереди первый этап - HTML-верстка (грубо говоря, блок помещаем в блок, который находится в другом блоке и так далее). Самая базовая структура: сверху хедер (в нем обычно расположен логотип и навигация), центральный блок (в нем обычно основной контент страницы), боковые бары (в них может быть реклама или дополнительная навигация) и футер (в нем обычно есть каталог всех страниц, правовая информация).
Далее всему этому нужен стиль, это делается с помощью CSS - каскадных таблиц стилей. Углубляться в это в рамках этой статьи не будем, тут надо уже полноценные курсы проходить. Отметим только, что это специально созданный язык для оформления веб-страниц.
И третья черепаха фронтэнда - JavaScript. Это уже полноценный язык программирования, который используется не только для создания сайтов. Но в нашем случаей с помощью него создаются интерактивные элементы (формы и поля, через которые можно передавать данные, реакция на клики, запуск анимаций и т.д.).
По итогу этого этапа разработки мы получаем папку, в которой лежат основной файл - index.html, файл с кодом CSS, файл с кодом JS (или встроенные скрипты в HTML), и медиафайлы (обычно в подпапке assets), которые используются на сайте. Все пути в коде должны быть относительными, то есть не указывать абсолютный путь к объекту (это тот, который начиная с локального диска), а использовать относительный (адрес объекта относительно корневой папки сайта), потому что потом эта папка будет переноситься на сервер, где абсолютные адреса работать не будут.
Шаг 3. Бэкэнд
Вот тут уже сложнее. На этом этапе подключается (или создается с нуля, если ты богач) система управления контентом - CMS (тут стоит упомянуть, что есть такие CMS как Wordpress, где есть аналог конструктора, в котором можно без кодинга создать себе почти любой сайт и там же его и захостить), создаются базы данных и обеспечивается их безопасность, интегрируются внешние API, настраивается обработка ошибок и обмен данными, производится оптимизация работы сайта. Короче, сложный этап. Надо быть сильно умным, я пока не такой.
Шаг 4. Мы заканчиваем
Тут надо подобрать хостинг с подходящим тарифом, перенести файлы и запустить сайт. Доменное имя, кстати, тоже придется купить.
И итоговый совет: надо сделать сайт - не пишите его с нуля, используйте коробочные решения, в большинстве случаев они полностью удовлетворяют все необходимые потребности.
На этом все.