HTML верстка сайта слайдера и посадка на CMS. Джедай верстки #8 (HTML CSS JavaScript)

Сегодня мы рассмотрим создание крутого сайта слайдера от А до Я с использованием актуальных подходов и инструментов (swiper). В процессе обучения мы на реальном практическом примере задействуем все возможности Flexbox CSS, Scss, Sass, БЭМ нейминга, модульного JS и многие другие современные подходы и технологии. В дополнительных уроках мы создадим дизайн в Figma, осуществим посадку верстки на Winter CMS (бывш. October CMS), используя технику Theme Customization и разработаем форму обратной связи с возможностью работать с заявками в админ-панели Winter CMS.

Таймкоды:
00:00 Урок 1 - Знакомство с проектом, подготовка к верстке
19:02 Урок 2 - Верстка блока «top-line»
53:16 Урок 3 - Верстка сайдбара
1:30:26 Урок 4 - Верстка слайдера изображений
1:45:06 Урок 5 - Верстка второго слайдера и синхронизация
2:06:48 Урок 6 - Элементы управления слайдером
2:29:45 Урок 7 - Верстка и анимация шестерни, стилизация цифр
2:58:00 Урок 8 - Смена и анимация цифр
3:18:10 Урок 9 - Модальное окно с формой обратной связи
3:43:54 Урок 10 - Адаптивная верстка и кастомный курсор

[wdm]

Всем привет, друзья! Материалы и видеоуроки курса были переработаны и обновлены. В настоящее время мы используем (и будем использовать в дальнейшем) Winter CMS. Это Open source CMS, которая пришла на замену коммерческому проекту October. Полный курс содержит 3 блока - «Дизайн в Figma», «Вёрстка» и «Посадка вёрстки на Winter CMS».

Если вы ещё не приобрели полный курс, рекомендую это сделать.

Внимание! При сбросе стилей с помощью Bootstrap Reboot, а это модуль, который используется в стартере OptimizedHTML 5 по-умолчанию, следует учитывать, что ссылки - тег <a> в последней версии Bootstrap 5 имеют подчёркивание, которое нужно убирать свойством «text-decoration: none» там, где это необходимо.

В настоящее время к проекту автоматически подключается и используется Bootstrap 5. При использовании «media-breakpoint-down» следует вместо (xs) использовать (sm). В остальном рекомендую адаптивить вёрстку так, как было показано в данном видео. Материалы и уроки платного курса обновлены.

[PieceOfInternet]

Спасибо) параллакс это что-то магическое) выглядит шикарно)

[ruslangrebennikov]

Шикарный видос!👍🏽 Как раз искал что-то подобное!

[TurchynykOleksii]

Алексей, запишите пожалуйста урок где вы находите информацию для обучения, было бы крайне полезно

[eugenekhristo]

Уважаемый, WebDesign Master. Я хотел приобрести материалы для данного курса, но ЮMoney сервис не позволяет производить транзакции не с русских карт. Я из Беларуси, и пробовал оплатить с белорусской карточки, и с британской - ничего не вышло... жаль

[luksik]

Что за прога для вкладок в Explorer? Искал такую когда то. Не получилось установить.

[ghostwineshop]

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

[Стастю-нп]

Классное видео! Я по твоим видео учусь и большое спасибо таким людям как ты, которые помогают в освоении новой профессии! У меня есть один вопрос. Как можно отключить прокрутку страницы на которой слайдер, пока он полностью не просмотрен? А потом прокрутка включается. Буду рад если кто-то поможет.

[Евгений-гщу]

Интересные видео! Есть насущный вопрос, работаю дизайнером и часто замечаю, что фрондеры часто игнорируют тип бордера в макете и используют в верстке outside вместо inside border. Это становится проблемой, когда обводка полупрозрачная и должна лежать поверх изображения или цветного фона и благодаря этому бордер всегда остается контрастным. Но как уже и сказал, обычно на это забивают болт и ставят привычный border 1px solid... Может это из-за каких-то ограничений css или чего-то еще? Спасибо

[valdog]

Странная фигня при правлении слайдером через кнопки prev и next. Иногда нормально срабатывают, а иногда сразу в начало пролистывает, перепрыгивает через слайды