С чего начнем?
Начнем мы с понимания того, что мы в итоге получим!
В итоге у нас будет простой сайт- визитка, который можно будет разместить на любом хостинге и который мы сможем редактировать дальше как хотим.
Так как я указал, что делать мы его будем профессионально, то сервисы типа "Wix" или "Tilda" мы использовать не будем, мы будем делать все своими ручками. За счет этого мы получим максимальную гибкость и свободу, включая и "финансовую".
Для кого это?
Это очень хорошо подойдет для начинающих предпринимателей, и новичков в веб- разработке.
Это первая серия уроков дающая возможность сделать себе простой сайт -визитку, который не будет обременять вас постоянно какими- то тарифами, постоянными вливаниями средств и т.д.
После этой серии уроков мы начнем новую, продвинутую серию для тех, кто заинтересовался разработкой. Там мы будем использовать продвинутые инструменты типа Gulp, Webpack, Sass, Pug, ES6, Различные виды анимаций и т.д.
В третей серии уроков я планирую показать внедрение наших шаблонов в различные популярные CMS. В частности "Wordpress", "MODX Revo" и мое любимое "Evolution CMS"
Что будет уметь наш сайт из этой серии?
Одинаково хорошо смотреться на больших мониторах и дисплеях планшетов и смартфонов.
Взаимодействовать с посетителем и принимать от него "Сообщения - Заявки".
План на сегодня.
- Установить и подготовить все необходимое для разработки.
- Определиться с тематикой.
- Найти подходящий нам дизайн сайта.
Поехали!!!
Первый пункт:
Для простого сайта нам будет достаточно современного редактора кода. Я советую установить "Visual Studio Code", он полностью бесплатен и очень удобен. Вот ссылка на скачивание. После скачивания установите его и откройте.
Далее создадим папку на рабочем столе с названием "My-site" и перетащим ее в открытое окно редактора.
И создадим два файла: index.html и style.css
Отлично. Мы подготовили файловую структуру для верстки макета.
Пункт два и три:
Тут я предлагаю использовать какую- нибудь легкую тему, что- то типа beauty. Для этого идем в yandex и вводим в поиске beauty template и переходим в картинки, чтобы найти уже готовый дизайн сайта, который нам понравится, и с которого по образу и подобию мы сверстаем свой сайт.
Я нашел то что мне приглянулось:
Картинка ведет на на сайт Colorlib где мы можем полностью посмотреть дизайн сайта. Полностью мы его копировать не будем и значительно упростим, так как у нас серия уроков для новичков. Но будем придерживаться концепции.
Итог
Мы подготовили площадку для верстки сайта и определились с дизайном, которого мы будем придерживаться.
В следующем уроке мы начнем подбирать изображения для нашего сайта, шрифты, и начнем верстку первого экрана сайта.
Как только второй урок будет готов ссылка будет добавлена здесь в низу статьи.