Как самостоятельно сделать сайт, если ничего не понимаешь в программировании

Если вам нужен сайт, у вас есть три варианта: заказать у профессионалов, собрать на конструкторе или создать самостоятельно с нуля. Первый способ – простой, почти не требует вашего участия, но стоит денег. В этой статье мы расскажем о втором и третьем способах – как самостоятельно и бесплатно сделать и настроить сайт без помощи профессионалов. 

Способ 1: собрать сайт на конструкторе  

Самый простой способ сделать сайт – использовать конструктор. Наиболее популярные: Tilda, Платформа LP и WiX. Они работают по принципу блоков и шаблонов: на сайте вы собираете сайт из блоков, настраиваете цветовую гамму и подбираете шрифты или выбираете уже готовую конструкцию и просто вписываете свой текст. 

Этот вариант подходит для типовых сайтов, когда хочется сделать быстро и не мучиться с дизайном: сайтов-портфолио, лендингов и простых интернет-магазинов. Для более сложных магазинов существуют специальные конструкторы вроде Zyro или Ecwid.  

Вот как выглядят этапы создания лендинга на примере конструктора WiX. 

Этап 1: регистрация на сайте конструктора 

Зайдите на сайт и создайте аккаунт. Вам понадобится действующая электронная почта и пароль или аккаунт в соцсети. 

Введите email и придумайте пароль или залогиньтесь через аккаунт Facebook или Google 

Этап 2: выбор способа создания сайта 

Можно создать сайт вручную из шаблонов или автоматически, используя искусственный интеллект. Во втором случае нужно будет ответить на несколько вопросов о сфере деятельности, выбрать название сайта, загрузить фото и тексты и выбрать дизайн, а система сама создаст ваш сайт.   

Каждый из вариантов оформления можно оценить в предварительном просмотре и, если надо, отредактировать 

Этап 3: выбор шаблона 

Обычно шаблоны разделены по тематике, популярности и новизне. Некоторые конструкторы позволяют искать подходящий шаблон и по ключевым словам. 

Шаблоны можно редактировать и настраивать под себя 

Этап 4: редактирование и наполнение шаблона 

В режиме редактора вы можете менять фон, шрифты и анимацию, добавлять и удалять кнопки, формы обратной связи и другие элементы. Когда оформление блоков готово, переходите к добавлению информации. 

Шаблон можно тонко настроить под свои потребности по множеству параметров 

Этап 5: публикация сайта 

Прежде чем сделать сайт доступным для пользователей, проверьте всю информацию в предпросмотре и настройте мобильную версию сайта. Если все нравится, жмите кнопку «Опубликовать» и сайт станет видимым в сети. 

В премиум-аккаунте можно редактировать адрес страницы  

Преимущества сайта на конструкторе 

Собрать сайт на конструкторе – быстрый и бюджетный вариант. Так, за интернет-магазин на Zyro вы будете платить чуть больше 500 рублей в месяц, а у «Тильды» и многих других конструкторов есть бесплатные версии. 

Для работы с конструкторами не нужно уметь программировать или разбираться в дизайне: для этого есть встроенный движок и шаблоны. Вам нужно только настроить внешний вид сайта и наполнить его контентом.  

Если вам понадобится изменить расположение элементов, добавить страницу или поменять текст на сайте, вы сможете это сделать сами в любой момент в своем аккаунте на конструкторе.  

Недостатки сайта на конструкторе  

Конструкторы имеют ограничение в функционале. Не всегда вы можете добавить анимацию, личный кабинет пользователя или другие нужные опции. Ваш дизайн не будет уникален: он ограничен предложенными блоками и шаблонами.  

Использование конструктора может плохо сказаться на продвижении сайта. Поисковики любят уникальность: они считывают шаблонные блоки и понижают такой сайт в выдаче. Значит, вам придется сильнее вложиться в продвижение. 

Способ 2: сделать сайт с нуля 

Даже если вы не планируете становиться разработчиком, а хотите просто сделать сайт для себя, стоит научиться хотя бы основам фронтенд-разработки. Фронтенд – это все, что составляет «фасад» вашего сайта: картинки, текст, видео или анимация. Если в этом немного разобраться, можно будет легко пересобрать или заменить внешний вид сайта. 

Создание сайта с нуля состоит из нескольких этапов.  

Этап 1: разработка прототипа 

Прототип – это структура сайта на основе его задач. При разработке прототипа продумывается юзабилити – удобство сайта для пользователя и разрабатывается предварительный дизайн. 

Чтобы определить расположение элементов, нужно понимать, что важно клиенту, что ему нужно увидеть на главной странице, какая навигация будет удобна. Чем детальнее вы проработаете прототип, тем проще будет на следующих этапах.  

Прототип можно рисовать от руки или в графическом редакторе, а можно использовать специальную программу: Balsamiq Mockups, Axure RP или Flinto. 

Прототип сайта можно нарисовать даже от руки. Источник: Skillbox 

Проанализируйте свою аудиторию, продумайте структуру сайта, отрисуйте прототип и переходите к созданию макета.  

Этап 2: создание дизайн-макета  

Разработка дизайн-макета – это «оживление» прототипа. При разработке дизайна определяется цветовая гамма сайта, отрисовываются кнопки и другие графические элементы и расставляются блоки из прототипа на макете страницы. Все это можно сделать в графических редакторах Adobe Photoshop или Figma. Разобраться с этими программами можно самостоятельно или на коротких курсах.  

Простой минималистичный макет можно сделать самостоятельно: взять графические элементы на стоках и выровнять контент по сетке 

Этап 3: верстка макета 

При верстке макет страницы через код переводится в интерактивный вид и становится интернет-страницей. Для верстки нужно разобраться в языке разметки HTML и языке стилей CSS: первый нужен, чтобы расставить элементы на странице, второй – чтобы визуально их оформить. 

Разработчик получает макет в графическом формате и через HTML-разметку переводит его в формат, который понимают браузеры 

Этап 4: подключение домена и хостинга 

Подключить домен и хостинг можно на reg.ru, «Спринтхосте» или у другого хостинг-провайдера на ваш вкус. Если вы делаете лендинг, на этом ваша работа заканчивается – сайт готов. Если сайт посложнее – идем дальше. 

Привязать домен и хостинг – дело пары кликов, главное – выбрать провайдера с выгодным тарифом 

Этап 5: бэкенд-разработка 

Бэкенд – это «начинка» вашего сайта, которую не видят посетители. Ее можно написать с нуля полностью под свои нужны и запросы. Этим занимаются бэкенд-разработчики – без знания языков программирования не обойтись. Если вы не разработчик, можно воспользоваться готовой системой управления – CMS-системой.  

Разные CMS заточены под разные цели: «Битрикс» подходит для небольших и средних интернет-магазинов, Opencart – для крупных, а WordPress и Joomla хороши для блогов и онлайн-изданий. 

CMS нужно настроить один раз, а дальше работать с ней может любой сотрудник, даже без специальных знаний. Продвинутые разработчики умеют сочетать элементы из нескольких систем и собирать из них индивидуальные CMS: Opencart для личного кабинета клиента можно соединить с Joomla для блога магазина. 

Если вы легко справляетесь с настройкой CMS, можете начать делать это профессионально: изучить одну из систем и подстраивать ее под разные бизнесы. 

Так выглядят параметры настройки бесплатной CMS системы WordPress 

Этап 6: наполнение сайта контентом и его тестирование  

Контент – это текст, видео, фотографии и все, что вы хотите показать посетителям сайта. Хорошо, если у вас уже есть SEO-стратегия и вы наполняете сайт согласно ей, но можно оставить стратегию и на потом: создав сайт самостоятельно, вы в любой момент сможете что-то переделать. 

Когда контент загружен, прокликайте все баннеры, кнопки и ссылки и убедитесь, что все работает так, как вы задумали. Если все в порядке, сайт готов и можно звать посетителей. 

Так выглядит добавление новой страницы в WordPress 

Преимущества самостоятельного создания сайта 

Если собирать все с нуля, вы получите сайт с уникальным дизайном и настроенной под вас системой управления. Вы сможете контролировать всю работу сайта: чинить, если что-то сломается, менять цены в каталоге товаров, добавлять картинки и быстро оповещать клиентов о новых акциях.  

Недостатки самостоятельного создания сайта 

Разработка сайта с нуля – долгий процесс. Вы встретите новые термины и программы, о которых раньше не слышали, и во всем придется разбираться самостоятельно. Процесс пойдет быстрее, если у вас есть опытный программист, готовый отвечать на вопросы и объяснять основы и нюансы. Если такого человека нет, придется учиться – самому или на курсах.  

Какой способ выбрать 

Чтобы вам проще было сравнить и выбрать подходящий вариант, соберем преимущества и недостатки разработки сайта на конструкторе и с нуля в таблицу: 

Выбирайте конструкторы для простых сайтов: одностраничников, лендингов, сайтов-визиток, портфолио и небольших магазинов. Типовой корпоративный сайт тоже можно сделать на конструкторе за пару часов: в конструкторах есть готовые макеты со всеми нужными блоками, вам останется лишь добавить контент и при желании поменять цвета. 

Разрабатывать сайт с нуля стоит, когда важно создать уникальный стиль бренда и полностью контролировать процессы: для корпоративных или информационных порталов и крупных интернет-магазинов. Это можно делать на базе CMS или с полноценной бэкенд-разработкой.  

Где учиться разработке сайтов 

Если вы только присматриваетесь к профессии, начните с бесплатных вебинаров и обучающих видео на YouTube. Они помогут погрузиться в профессию и понять, в каком направлении двигаться дальше.  

Если вы уже определились и готовы получать новую профессию или хотите сами развивать собственный сайт и бизнес, идите на курсы в онлайн-школу. Онлайн-курсы заточены на практику, поэтому к концу обучения у вас будет прочная теоретическая база, портфолио и практический опыт. Многие школы предоставляют возможность стажировки, а после обучения помогают с трудоустройством.