Что мы сделаем и что понадобится

За тринадцать глав мы соберём сайт кухонной студии «Фасад»: с каталогом кухонь и ценами, готовыми проектами, заявкой на замер и адресом в интернете. Опыт программирования не нужен: каждый шаг показан и объяснён.

Какой сайт получится

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

Сайт будет настоящий: с адресом вроде fasad.ru, защищённым соединением HTTPS и резервными копиями. Всё это мы сделаем сами, по одному шагу за раз.

Главная страница студии, какой она станет к концу кукбука

Для кого этот кукбук

Для новичков. Может быть, вы писали HTML на уроках информатики, а может быть, не писали никогда. Оба случая подходят.

Мы будем писать немного кода: шаблоны страниц на языке Svelte. Каждый пример можно скопировать целиком, а под ним разобрано, что делает каждая строка. Если вы уже знаете HTML, CSS и немного JavaScript, главы пройдутся быстрее.

Что понадобится

Компьютер с Linux или macOS. На Windows установите WSL: это Linux внутри Windows, и всё из кукбука в нём работает.
Терминал. Это окно, куда вводят команды. На macOS он называется «Терминал» и лежит в «Программах → Утилитах». В Ubuntu его открывает сочетание Ctrl+Alt+T.
Браузер. Любой современный: в нём вы будете и смотреть сайт, и править его.
Около часа на первые четыре главы. Дальше можно идти в своём темпе.

Ни PHP, ни MySQL, ни Node.js, ни Docker ставить не нужно. Eile приходит одним файлом, а весь сайт лежит в одном файле базы данных. Что это значит на деле, увидим во второй главе.

Как читать главы

Главы идут по порядку, и каждая опирается на предыдущую. Пропускать их не стоит, но возвращаться к уже пройденным можно сколько угодно.

Команды для терминала выглядят так:

$ cms version

Знак $ в начале строки вводить не нужно: он только показывает, что дальше идёт команда. Строки без него показывают, что ответит компьютер.

Код шаблона подписан сверху: так видно, в какой элемент сайта его положить.

Пример: шаблон Base

<h1>{page.title}</h1>

Названия кнопок и разделов менеджера выделены так: Сохранить. Их можно искать на экране глазами.