Simple Starter - простой стартер для верстки сайтов
Vložit
- čas přidán 1. 06. 2024
- Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Сегодня мы поговорим о новом стартере для HTML верстки, который я подготовил для будущих уроков и проектов на CMS. Современная коммерческая разработка, на мой взгляд, стала слишком перегружена различными инструментами, сборщиками, менеджерами задач, зависимостями, пакетами и так далее. Думаю, пришло время упростить рабочий процесс. Действительно ли так важны те инструменты, к которым мы уже привыкли? Давайте разбираться.
Страница урока: webdesign-master.ru/blog/tool...
Таймкоды:
00:00 Начало урока
03:06 Скачиваем стартер для верстки
04:13 Размещаем стартер в редакторе кода
04:54 Краткий обзор стартера
06:48 Работа с CSS (переменные, методология БЭМ, адаптив, будущее CSS)
13:11 О шрифтах
13:23 Об изображениях
13:58 Работа с JavaScript
16:48 Установка плагинов и JS-библиотек
18:49 Обзор файла index.html
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
БЭМ.
По человечески, это ФИО.
Иванов Сергей Петрович: блок элемент модификатор.
Иванов Николай Иванович - блок "Иванов" у него другой элемент "Николай" и модификатор "Иванович".
title__text {
color: red;
}
(title - блок,
__text - элемент блока,
color red - модификатор)
(Если вдруг кто не понимает что такое БЭМ)
Крутая аналогия! )
тогда уж title__text--red
Спасибо, жду верстку большого проекта. Сам занимаюсь версткой и посадкой на wordpress и Битрикс уже много лет, но не пропускаю твои ролики, так как всегда есть чему поучится или убедится в правильности своего подхода. Всегда топил за нейтив, а теперь убеждаюсь в собственной правоте.
Все верно, большие проекты потом поддерживать просто нереально другими людьми, зато писать sass очень удобно и быстро)
Ролик мне очень понравился просто тем что всё рассказано простыми словами сидел, понимал, кайфовал посмотрел другие ролики и понял что это то канал который мне нужен, лучший ❤❤❤
Алексей, не пропадай, всегда приятно смотреть твои видосы, хоть и все это знаю)
Спасибо, всегда пользуюсь твоими стартерами, очень удобно)
Только закончил про галп, сразу годнота подъехала! Спасибо!
За jquery и отказ от минификации изображений и кода плюсую. Сам пришёл к этой мысли пару месяцев назад. А вот от препроцессоров пока не могу отойти, привык разбивать код на кусочки с нормальным импортом. Но подтверждаю всем своим многолетним фрилансерским опытом, что никто, кроме тебя scss потом заморачиваться и пересобирать не будет
Очень крутые у тебя уроки! Прохожу курс со слайдером очень нравиться!
Cпасибо за твои старания, все очень круто и довольно просто для понимания!
Это движение в правильную строну... )) Спасибо!
Огромное спасибо за стартер!!!
Ого, новый стартер! Балдёж
Как же хорошо, что я в числе этих 17 тысяч человек) Супер,мне очень понравилось,спасибо!😘
Спасибо за Ваш Труд. Всё доходчиво и понятно. Лайк и подписка.
Даже не знал о такой проге 😮, побегу скачивать)
Очень круто, всегда хотел такой.
Благодарю, Алексей.
В целом очень хорошая и минималистичная сборка. Для цмс идеально. Я пользуюсь только parcel, у него все что надо уже из коробки и настраивать почти не надо. Но использовать сегодня чистый цсс без postCSS я бы не стал. Слишком сыро, на одних переменных не уехать, все таки нестинг и разделение на файлы бэм-блоки это мега удобно, даже для мелких проектов, так-как это поможет поддерживать твой код другими людьми без труда. Ну и функции/миксины это удобно. Хотя все на вкус и цвет как говорится 😉
В теории, да. В реальности разделение файлов усложняет процесс поддержки. То, о чём вы написали нехило так экономит время на этапе разработки. Но поддержка потом превращается в ад. Нужно настроить окружение, разобраться в том, как предыдущий автор видел разработку, как использовал nesting, перекомпилировать, выполнить деплой. Возвращаясь к некоторым проектам я понимаю, что даже я, как автор, не всё могу запомнить, какая-либо методология не особо помогает и лучше бы открыть один единственный файл и найти стиль по прямому запросу из DevTools. Я сейчас говорю о коммерческих проектах на CMS. Когда я топил за препроцессоры, их ещё путём не внедряли, это было в диковину. Я делал материал, так сказать, на будущее. Здесь, в общем-то, та же история.
Просто спасибо)
Алексей, приветствую! Можешь приложить ссылки на сайты, которые показываешь в превью, интересно посмотреть каким образом там реализована огромная поляна с фотками, которая плавно перетекает в слайдер, я его что то не нашел? И подскажи пожалуйста, где ты смотришь все нововведения в css?
Только начинаю веб разработку. Ничего не понял, но было интересно)
Спасибо
Да , будет круто ! =)
Какую CMS для интернет-магазина используете?
Алексей, подскажи, пожалуйста. Можно ли интегрировать в данную сборку include html файлов (parts) как в OptimizedHTML 5 или есть другие способы работы?
gist.github.com/agragregra/bc76e49070a1d743914d00151f8b939e
Очень лаконичная сборка - все самое необходимое. Спасибо. Будем пользоваться и ждем анонсируемую верстку ). P.s. Bower можно не ставить? - пока не знакома с ним, можно же ведь ручками собирать libs?
Можно ручками, это так, для удобства)
Звучит как: "Чел, помнишь свой первый сайт на HTML с кучей подключений CSS и JS файлов. Так вот, он просто охyeNeN. Лучше него уже ничего не придумают!". И, знаете, мне это нравится. Сброка - топчик!
Привет! Когда-то начинал верстать по твоим урокам, спасибо за труд 🙌
Почему не используешь reset стилей? Не считаешь нужным, или просто не включил в стартер?
в бутстрапе есть
Использую bootstrap-reboot.css
Теперь все уроки будут со сборкой на чистом CSS или старый сборщик на gulp с Sass останется тоже?
Останется. Для каждого проекта инструмент подбирается индивидуально. Здесь история про кейсы с CMS.
@@wdm Понял, спасибо)
Евангелисты аплодируют стоя
зачем в body прописан min-width: 320px?
Здравствуйте. Это необходимо для того, чтобы ограничить минимальную ширину сайта. Если этого не сделать, сайт может отражаться некорректно на мобильных дисплеях. Это необходимо для контроля именно минимальной ширины, которая будет занимать все доступное пространство экрана, если физическое разрешение или разрешение после масштабирования менее 320px.
а что делать с терминалом если у меня винда 10 и нету терминала
wsl включи, будет терминал
Или так: webdesign-master.ru/blog/docs/webdev-without-wsl.html
@@ZvyaginSlava нету wsl