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

#сайт #vue #урок

Код Урока - на GitHub:

Ссылка на урок №2:

Итак, вам понадобилось сделать сайт. Естественно вы хотите сайт современный, стильный, функциональный, быстрый и масштабируемый под любой экран: от смартфона до стадиона. Ушли в прошлое времена, когда избранные хранители знаний про html определяли то, что все мы видим в Интернете. Сейчас любой человек с компьютером может сделать вполне приличную веб-страницу за пару часов, используя какой-нибудь конструктор сайтов с набором шаблонов. Благо такой сервис в сети найти нетрудно: на любой кошелёк, начиная с абсолютно пустого. Но вариант конструктора всегда ограничивает полёт мысли определёнными рамками. Гибкость этих рамок сильно зависит от тарифа, но и за все деньги мира вы не получите полную свободу творчества в конструкторе. С какого-то момента приходится подрезать крылья неугомонной мысли или расширять границы своих познаний и навыков, осваивая азы программирования.

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

С этого места мы не пойдём дальше пешком, а пересядем на велосипед, изобретённый за нас добрыми людьми: то есть установим Bootstrap.
Bootstrap это — свободный набор инструментов для создания сайтов и веб-приложений (front-end framework). Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
Значит будем работать! Начнём менять атрибуты: для начала определим число колонок с картинками на странице: атрибут col определяет, сколько колонок из 12 возможных займёт объект. Присвоим col значение 2 (пишем col тире 2). Каждая картинка займёт контейнер из двух колонок - получится 6 картинок в строке. Теперь надо сделать так, чтобы ширина картинок автоматом подстраивалась под ширину контейнера: задаём в img style ширину, равную, например, 100% контейнера. Вносим изменения в стиль каждой из четырёх картинок. Получаем ожидаемый результат. При этом понимаем, что такой метод совершенно не годится, если в фильмотеке не 4 фильма, а 4000.

Вот здесь на сцену выходит script. Элемент HTML script используется для встраивания или подключения исполняемого JavaScript кода. Пока поставим наполнение фильмотеки тысячами фильмов на паузу и сделаем первый символический шаг к интерактивности сайта: превратим наконец клик мышки в видимое действие

[standarttechnology]

Прикольно. Подписался) отдельный плюс за монтаж видео)

[dimasez]

Такое ощущени, что сценарий писал человек не из IT, а, например.... из финансовой сферы

[carbonera]

Это было круто, без воды и понятно! Ждем продолжение
P.s: Можешь еще сделать видос как вот эти данные получить из бд, как работать с бд(Postgres, Mango) с помощью Vue

[realtimeuser]

Нескучный ман. В видеоуроке много анимашек - интересно