Поздравляем!

Поздравляем, у кинотеатра «Звёздный свет» новый вид, а вы закончили третий этап пути «Веб-разработка»!

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

Всё это вы сделали сами и сможете повторить для любого сайта: написать его страницы на HTML, оформить их на CSS или Tailwind для любого экрана, оживить с помощью JavaScript, загрузить данные, проверить формы, запомнить что-то в браузере и выложить сайт в интернет. Так делается веб.

Новая версия в интернете. Загрузите её, как в уроке «Выкладываем сайт в интернет», но сначала сделайте ещё один шаг. Браузеры не понимают @import "tailwindcss";: при каждом запуске Start Coder превращает ваш style.css в обычный CSS. Для вашего сайта это делает Tailwind CLI на вашем компьютере, как вы видели в конце курса Tailwind. Для него нужен Node.js. Ваша таблица стилей Tailwind остаётся на вашем компьютере, а сайт получает готовый CSS:

1. Создайте папку cinema и переместите в неё папку своего сайта, starlight-cinema. Из редактора сохраните index.html, showtimes.html, script.js и showtimes.json в starlight-cinema вместо старых файлов, а style.css — в cinema.
2. Откройте терминал в папке cinema и выполните:

   npm install tailwindcss @tailwindcss/cli
   npx @tailwindcss/cli -i style.css -o starlight-cinema/style.css --minify

   Вторая команда читает вашу таблицу стилей Tailwind, находит классы в файлах сайта, в том числе в script.js, и записывает готовый CSS в starlight-cinema/style.css. Параметр --minify убирает пробелы и переводы строк, поэтому файл меньше и загружается быстрее. Запускайте команду снова при каждом изменении классов.
3. Откройте starlight-cinema/index.html в браузере и проверьте внешний вид (само расписание загружается только с сервера, как вы знаете из проекта с расписанием). Затем в Netlify перетащите папку starlight-cinema на страницу Deploys своего проекта, как и раньше. То, что установил npm, остаётся в cinema: сайту оно не нужно.

А теперь откройте свой сайт на телефоне. На этот раз он сделан именно для него.

Что дальше. Последний этап пути — React, библиотека JavaScript для создания целых приложений из компонентов, то есть частей страницы, которые вы пишете один раз и используете снова и снова. После курса React кинотеатр вернётся в последний раз: вы пересоберёте его как приложение на React. А если сначала захотите продолжить работу над этой версией, вы уже знаете всё, что нужно для тёмной темы: вариант dark: и переключатель из урока «Тёмная тема», а с помощью localStorage переключатель может даже запоминать выбор посетителя.

Прежде чем уйти, подпишите свой сайт, как вы подписали самую первую страницу в начале пути.