Downloaden "Создание сайта с нуля. Красиво + просто =Vue.js. | Урок #1"

Код Урока - на GitHub: https://github.com/pepelazz/vue_tutorial_cinema_list Ссылка на урок №2: Итак, вам понадобилось сделать сайт. Естественно вы хотите сайт современный, стильный, функциональный, быстрый и масштабируемый под любой экран: от смартфона до стадиона. Ушли в прошлое времена, когда избранные хранители знаний про html определяли то, что все мы видим в Интернете. Сейчас любой человек с компьютером может сделать вполне приличную веб-страницу за пару часов, используя какой-нибудь конструктор сайтов с набором шаблонов. Благо такой сервис в сети найти нетрудно: на любой кошелёк, начиная с абсолютно пустого. Но вариант конструктора всегда ограничивает полёт мысли определёнными рамками. Гибкость этих рамок сильно зависит от тарифа, но и за все деньги мира вы не получите полную свободу творчества в конструкторе. С какого-то момента приходится подрезать крылья неугомонной мысли или расширять границы своих познаний и навыков, осваивая азы программирования. Видеоурок поможет тем, кто решился на второй вариант, но ещё не стал крутым программистом. Крутые программисты до этого момента точно не досмотрели, поэтому не будут ругаться на дилетантский уровень изложения некоторых вещей: 1. В основе любой веб страницы лежит html-код. HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать содержимое сайта. Вместо длинной теории давайте просто создадим новый HTML-файл. По умолчанию файлам такого типа присваивается название index.html. Редактор сразу создаёт нужную структуру файла, состоящую из обязательных блоков head и body. Внутри помещаются теги, которые преобразовываются в визуальные объекты в браузере. Например, тег (img) используется для размещения изображений на странице. У него есть обязательный атрибут src - ссылка на источник (место хранения изображения). В нашем примере местом хранения картинок будет локальная директория. Вот так будет выглядеть код для вывода на страницу, например, обложки мультика "Тайна Коко". (кадр с кодом) А это то, что мы увидим в браузере. (кадр страницы в браузере) Пока это просто картинка. Мы можем дать имя вкладке с этой картинкой: например, кино. Можем в эту вкладку вывести ещё картинку: пусть будет обложка "Пиратов Карибского моря". Будем добавлять картинки - они по умолчанию как-то распределятся по странице. Получили такую простенькую галерею в виде плитки без особой красоты и без намёка на интерактивность. Но нам-то хочется, и чтобы картинки друг с другом не сливались, и чтобы при клике на них что-то происходило. С этого места мы не пойдём дальше пешком, а пересядем на велосипед, изобретённый за нас добрыми людьми: то есть установим Bootstrap. Bootstrap это — свободный набор инструментов для создания сайтов и веб-приложений (front-end framework). Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Заходим на страницу getbootstrap.com и дальше в меню getting started. Мы пока не будем использовать все широкие возможности фреймворка. Сейчас нас интересует красота, значит пока нам нужны только стили. Можно скачать этот файл и подключить у себя локально, но можно подключить ссылкой. Готово. Проверим в терминале браузера: network, css. Видим, что всё подкачалось. И, конечно, помним зачем: хотим управлять вёрсткой. Чтобы было как в глянцевом веб-журнале: красивые колонки с красивыми картинками. На сайте getbootstrap есть примеры с описанием атрибутов сетки, столбцов и строк. Видим, как задавать ширину, отступы и другие атрибуты. Нет смысла у себя в редакторе набивать весь этот код: копируем, вставляем и меняем источник картинок на свой. Заодно добавим фильмов в нашу растущую фильмотеку. Готово. Смотрим на результат: видим, что есть над чем работать. Значит будем работать! Начнём менять атрибуты: для начала определим число колонок с картинками на странице: атрибут col определяет, сколько колонок из 12 возможных займёт объект. Присвоим col значение 2 (пишем col тире 2). Каждая картинка займёт контейнер из двух колонок - получится 6 картинок в строке. Теперь надо сделать так, чтобы ширина картинок автоматом подстраивалась под ширину контейнера: задаём в img style ширину, равную, например, 100% контейнера. Вносим изменения в стиль каждой из четырёх картинок. Получаем ожидаемый результат. При этом понимаем, что такой метод совершенно не годится, если в фильмотеке не 4 фильма, а 4000. Вот здесь на сцену выходит script. Элемент HTML script используется для встраивания или подключения исполняемого JavaScript кода. Пока поставим наполнение фильмотеки тысячами фильмов на паузу и сделаем первый символический шаг к интерактивности сайта: превратим наконец клик мышки в видимое действие