Тёмный

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

WebDesign Master
Подписаться 303 тыс.
Просмотров 38 тыс.
50% 1

Материалы урока: bit.ly/jVLyQ8
Всем привет, друзья! Сегодня мы рассмотрим создание крутого сайта слайдера от А до Я с использованием актуальных подходов и инструментов (swiper). В процессе обучения мы на реальном практическом примере задействуем все возможности Flexbox CSS, Scss, Sass, БЭМ нейминга, модульного JS и многие другие современные подходы и технологии. В дополнительных уроках мы создадим дизайн в Figma, осуществим посадку верстки на Winter CMS (бывш. October CMS), используя технику Theme Customization и разработаем форму обратной связи с возможностью работать с заявками в админ-панели Winter CMS.
Создание сайта от А до Я (комплексный курс): goo.gl/ankxq9
Создание интернет-магазина от А до Я: goo.gl/7mDqYD
Создание крутого слайдера (+посадка на CMS): bit.ly/jVLyQ8
Все курсы в одном комплекте: wd-m.ru/bundle
Таймкоды:
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 - Адаптивная верстка и кастомный курсор
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

 

10 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 23   
@wdm
@wdm 2 месяца назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@PieceOfInternet
@PieceOfInternet Год назад
Спасибо) параллакс это что-то магическое) выглядит шикарно)
@wdm
@wdm 2 года назад
Всем привет, друзья! Материалы и видеоуроки курса были переработаны и обновлены. В настоящее время мы используем (и будем использовать в дальнейшем) Winter CMS. Это Open source CMS, которая пришла на замену коммерческому проекту October. Полный курс содержит 3 блока - «Дизайн в Figma», «Вёрстка» и «Посадка вёрстки на Winter CMS». Если вы ещё не приобрели полный курс, рекомендую это сделать. Страница курса: bit.ly/jVLyQ8 Внимание! При сбросе стилей с помощью Bootstrap Reboot, а это модуль, который используется в стартере OptimizedHTML 5 по-умолчанию, следует учитывать, что ссылки - тег в последней версии Bootstrap 5 имеют подчёркивание, которое нужно убирать свойством «text-decoration: none» там, где это необходимо. В настоящее время к проекту автоматически подключается и используется Bootstrap 5. При использовании «media-breakpoint-down» следует вместо (xs) использовать (sm). В остальном рекомендую адаптивить вёрстку так, как было показано в данном видео. Материалы и уроки платного курса обновлены.
@ruslangrebennikov8342
@ruslangrebennikov8342 3 года назад
Шикарный видос!👍🏽 Как раз искал что-то подобное!
@ii3246
@ii3246 2 года назад
за 15 лет Алексей еще ни разу не разочаровал.)))
@mykhailostepanishchev6472
@mykhailostepanishchev6472 3 года назад
Ого, капец круто, спасибо!
@world_of_facts_shorts
@world_of_facts_shorts 3 года назад
Отличный урок!!!!
@shurinskiy
@shurinskiy 3 года назад
Отлично, спасибо!
@TurchynykOleksii
@TurchynykOleksii 2 года назад
Алексей, запишите пожалуйста урок где вы находите информацию для обучения, было бы крайне полезно
@user-wp4yn5rd5c
@user-wp4yn5rd5c Год назад
Классное видео! Я по твоим видео учусь и большое спасибо таким людям как ты, которые помогают в освоении новой профессии! У меня есть один вопрос. Как можно отключить прокрутку страницы на которой слайдер, пока он полностью не просмотрен? А потом прокрутка включается. Буду рад если кто-то поможет.
@user-zd1sy3mk6o
@user-zd1sy3mk6o 3 года назад
Интересные видео! Есть насущный вопрос, работаю дизайнером и часто замечаю, что фрондеры часто игнорируют тип бордера в макете и используют в верстке outside вместо inside border. Это становится проблемой, когда обводка полупрозрачная и должна лежать поверх изображения или цветного фона и благодаря этому бордер всегда остается контрастным. Но как уже и сказал, обычно на это забивают болт и ставят привычный border 1px solid... Может это из-за каких-то ограничений css или чего-то еще? Спасибо
@ii3246
@ii3246 2 года назад
зависит от разработчика. опыт то есть у всех, а вот только он не всех учит.))) иногда просто могут не заметить такой мелочи. вообще, дизайнеру лучше хотя бы 10 сайтов сверстать, разной сложности. тогда будет устоявшиеся понимание как что работает. иногда этот бордер может дать отступ, из-за этого могут быть определенные нюансы. а иногда просто забивают болт и делают как им привычнее.))) там много чего может быть. смотря как сбросили стили, оно тоже по разному себя ведет тогда.
@luksik0
@luksik0 3 года назад
Что за прога для вкладок в Explorer? Искал такую когда то. Не получилось установить.
@wdm
@wdm 3 года назад
QTTabBar. Урок по настройке: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xzz5nTioZI4.html
@luksik0
@luksik0 3 года назад
@@wdm благодарю! Попробую поставить. Удобная система с вкладками! Привыкаешь к ней в браузере, и в винде тоже охота
@ghostwineshop
@ghostwineshop 3 года назад
Сделай, пожалуйста, видео про качественный монитор для графического дизайна за 20к. В видео про рабочее место за 60 тысяч ты рассказывал про качественный не дорогой монитор, но его больше не поставляют в магазины и в интернете его почти не реально найти, а данная тема актуальна для начинающих дизайнеров...
@ii3246
@ii3246 2 года назад
вам главное чтоб все цвета выводил и был ярким. это IPS матрицы, смотрите на цвета, чато может быть написано что бит много а самих оттенков меньше чем на минимум бит и по итогу цвета такие себе. у меня лично, если много герц, сильно болят галаза, потому что долго сижу за ПК, поэтому стараюсь брать 60-75мг монитор. 2к более детальная картинка. 2-4к это для дизайнеров огонь огненный.)) чаще всего Dell хорошо подходят под подобные задачи. они и не дорогие. для супер геймеров они не подходят, поэтому цены на них доступные чаще всего. BenQ лично мне нравятся, тоже не дорогие. брал самсунга 32 разрешение, не то пальто... код пистаь на нем огонь, а вот дизайн уже не то, чуть поджирает цвета... вторым взял BenQ. остальное даже рассматривать не стал. а так iPad, MacBbook, там все цвета выводит в огне. но это уже не дешево.)))
@eugenekhristo7252
@eugenekhristo7252 Год назад
Уважаемый, WebDesign Master. Я хотел приобрести материалы для данного курса, но ЮMoney сервис не позволяет производить транзакции не с русских карт. Я из Беларуси, и пробовал оплатить с белорусской карточки, и с британской - ничего не вышло... жаль
@wdm
@wdm Год назад
Здравствуйте. Напишите на почту courses@webdesign-master.ru
@user-rp1cv1cm1s
@user-rp1cv1cm1s 2 года назад
+++
@valdog2593
@valdog2593 3 года назад
Странная фигня при правлении слайдером через кнопки prev и next. Иногда нормально срабатывают, а иногда сразу в начало пролистывает, перепрыгивает через слайды
@wdm
@wdm 3 года назад
Здравствуйте. Убедитесь, что у вас эквивалентное количество слайдов у обоих слайдеров.
@valdog2593
@valdog2593 3 года назад
@@wdm Одинаковое количество и текстовых слайдов и с изображениями. При добавлении новых счетчик и пагинация отображаются корректно. Видимо где-то карюльку какую-нибудь не поставил))))