Тёмный

HTML верстка. Креативная шапка сайта с Swiper слайдером на Gulp сборке 

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 22 тыс.
50% 1

HTML SCSS верстка для креативной шапки сайта на Gulp сборке. Swiper слайдер с параллакс эффектом. Мобильная адаптация. Прелоадер. Онлайн урок по HTML верстке.
Урок по Gulp сборке: • Gulp сборка - полная и...
Готовый код и графика для урока: t.me/+9XtDDNBdHAk4Yjhi (пост за 15 Июля 2023)
Макет в Figma: www.figma.com/file/CSZzjKrayS...
Чат верстальщиков ВебКадеми: t.me/+QAxmsKj2HyWfEKzz
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
00:00 Что мы сделаем
00:40 Курс по Frontend разработке
01:23 Обзор макета
04:10 Gulp сборка
05:36 Графика
06:19 Разметка для шапки
10:56 Стили для шапки
18:20 Контент для навигации
22:55 Стили для навигации
29:04 Hover эффект лдя ссылок
31:57 Позиционирование блоков внутри шапки
38:46 Соц сети
41:48 Ссылка SEE MORE
48:40 Контролы для слайдера
01:00:40 Отдельный файл для header__content
01:02:58 Верстка слайда
01:08:19 Стили для слайда
01:17:49 Заголовок слайда
01:27:40 Блок locations
01:37:22 Несколько блоков location
01:40:39 Подключение Swiper слайдера
01:48:24 Настройка Swiper слайдера
01:54:51 Стили для scrollbar элемента swiper
02:00:30 Параллакс эффекты в Swiper слайдере
02:04:20 Разные слайды
02:09:47 Текст с градиентом
02:16:52 Мобильная адаптация
02:27:05 Мобильная навигация
02:42:24 Прелоадер
02:51:16 Дополнительные секции
02:52:30 Правка багов. Пути к изображениям
02:55:22 Правка багов. Текст с градиентом
03:10:15 Финал
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews

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

 

30 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 53   
@soldaygames4347
@soldaygames4347 3 месяца назад
Спасибо вам огромное вот мастхев ваш канал, столько нового узнал хотя и так неплохо верстал, однозначно лайк и подписка. Желаю вам удачи и вашему каналу, спасибо огромное 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥😎😎
@Igorbodnari
@Igorbodnari 10 месяцев назад
Юрій добрий вечір. Дуже вдячний за срім . Дуже гарна інформація.
@VideosFromNorway
@VideosFromNorway 9 месяцев назад
Привет!Сегодня закончил верстать по видео!Узнал массу интересной и новой информации!Спасибо за такой контент!С меня лайк и подписка!
@user-rw8wi3sq9e
@user-rw8wi3sq9e 8 месяцев назад
Спасибо за интересный мощный и познавательный урок. Закончил делать проект. Все понравилось. Много знаний и фишек узнал новых. Теперь чуть-чуть проще будет работать с данным плагином. Всем рекомендую посмотреть этот материал. И ВебКадеми рекомендую курсы пройти. Юрий лучший. И кураторы на курсах отличные.
@Dobroe_Utr0
@Dobroe_Utr0 6 месяцев назад
Отличный урок. Только что закончил, не без затыков, но прошел. Узнал много нового.
@yuriykolomytsyn2352
@yuriykolomytsyn2352 10 месяцев назад
Спасибо за дополнительные знания и отличную практику. Я на вашем канале уже почти год и каждый стрим жду как новый сезон отличного сериала! Смотерть и учится ВСЕМ!
@khushbakht.shoymardonov
@khushbakht.shoymardonov 10 месяцев назад
Спасибо вам большое, многое понял благодаря вашему контенту
@sergejchap62
@sergejchap62 10 месяцев назад
Спасибо. Отличный урок и учебник. Отдельное спасибо за код
@looking_at_the_sky
@looking_at_the_sky 10 месяцев назад
Спасибо большое за работу! Благодаря этому уроку я узнал много чего полезного и интересного😉
@chilibean6152
@chilibean6152 8 месяцев назад
Спасибо за урок, особенно за решение багов, очень важно !important
@giorgiagdgomelashvili423
@giorgiagdgomelashvili423 10 месяцев назад
Отличный мастер-класс, спасибо Вам за такой большой труд
@foxy_view
@foxy_view 10 месяцев назад
Отличный мастер-класс! Спасибо большое! Много интересных фишек! Как глоток свежего воздуха! Очень понравилось!😀
@Anatoli-bq1pe
@Anatoli-bq1pe 10 месяцев назад
Жду с нетерпением)
@asg5511
@asg5511 10 месяцев назад
Получилось офигенно!
@neleaonila2191
@neleaonila2191 10 месяцев назад
Юрий, я нахожусь под полным впечатлением от вашего поучительного подхода к изложению материала. И понятно, что за этим стоит мастерство и большой кропотливый труд. Пусть и дальше бьёт ключом Ваше желание провести такие обучающие уроки.
@WebCademy
@WebCademy 10 месяцев назад
Неля, спасибо за комментарий!) Очень приятно.
@user-rw5gn7ub9e
@user-rw5gn7ub9e 9 месяцев назад
Благодарю сэнсэй за ваш труд - отличный контент!!!
@alEL321
@alEL321 10 месяцев назад
Отличная подача!)
@vaspurakavdalian1133
@vaspurakavdalian1133 9 месяцев назад
Спасибо Юрий ,вы гений
@nicegeekspb
@nicegeekspb 10 месяцев назад
Очень классное видео, жалко, что сразу не посмотрел. В итоге уже на сборке сверстал 2 сайта, подключал все через cdn, а оказалось все очень легко импортом сделать. И также затронули важную тему с адаптацией по высоте. Я так до конца это не понял, но делал сам также, старался все устройства популярные потыкать, НО тоже не всегда работает, жаль, что там ноубуков маленьких нет. Вообще, было бы классно соорудить какой то гайд из 10-15 устройств по ширине и высоте, чтобы сразу под них делать составные медиа. Потому что нет нет, да вылезает что то неадаптированное.
@user-wm5wk8pe9o
@user-wm5wk8pe9o 9 месяцев назад
сделал не все до конца понятно, но хотя бы общее впечатление получил хорошее😄
@Vladimir-lx7fv
@Vladimir-lx7fv 9 месяцев назад
Доброй ночи. Юрий, у меня разница текста и фоновой картинки на localhost и docs. Как бы меняется размер. Это браузер так отображает? А вообще классная работа. Особенно паралакс и свайпер. Отлично!!! Спасибо, Юрий. Классная школа, отличные курсы.👌👍
@repaprika
@repaprika 9 месяцев назад
Топчик
@eternalluminous9186
@eternalluminous9186 10 месяцев назад
Отличная практика для структурирования типа атом в реакте.
@hpbulbasaur8946
@hpbulbasaur8946 4 месяца назад
а подскажите пожалуйста, а как мы выдернули градиент текста для тайтлов,а то у меня чтото не получилось с фигмы его выцепить
@MaryGor_
@MaryGor_ 7 месяцев назад
Здравствуйте, подскажите, пожалуйста, как Вы точно рассчитываете line-height для текста? У меня Фигма прописывает "line-height: normal" в режиме разработчика, а в обычном режиме "auto"...
@daxter5060
@daxter5060 8 месяцев назад
Юрий, приветствую, спасибо огромное за крутой урок! В моменте, когда see more вылез за пределы header__content вроде как можно в transform-origin написать left top вместо left bottom, всё также отображается как и в Вашем решении. Вопрос в том, что мб так не очень делать, просто я не знаю о каких-то последствиях? P.S. За уроки реально огромный респект и спасибо! Мало кто выпускает настолько качественный контент сейчас.
@WebCademy
@WebCademy 8 месяцев назад
Спасибо за комментарий!) transform-origin отвечает за точку трансформации, в данном случае высота элемента небольшая, поэтому левый верхний или левый нижний угол - разница не особо большая и еле заметна.
@user-wq3po9si9i
@user-wq3po9si9i 2 месяца назад
Не срабатывает кнопка закрытия меню. В чем может быть проблема.
@konstantinkuznecov5585
@konstantinkuznecov5585 9 месяцев назад
Доброе время суток у меня появилось желание сверстать адаптивный магазин nft, но не знаю что для этого использовать. Не могли посоветовать сборку. Сложность макета figma - нереальная. В интернете советовали делать на react. Но я не знаю его одного будет достаточно или нужна сборка?
@WebCademy
@WebCademy 9 месяцев назад
React - для SPA. Gulp сборка - для верстки. Я бы выбирал инструменты исходя из задачи.
@MrKulikonch
@MrKulikonch 2 месяца назад
Добрый день! Огромное спасибо! Скажите, пожалуйста, как сделать так, чтобы слайдер корректно подгружался, а не так, чтобы сначала отображался только первый слайд на весь экран?
@WebCademy
@WebCademy 2 месяца назад
Добрый день. Спасибо за комментарий. Что значит корректно? В данном проекте сделали согласно дизайну. В других проектах, в записи стримов, делали другие слайдеры, например с карточками товаров.
@MrKulikonch
@MrKulikonch 2 месяца назад
@@WebCademy У меня слайдер (в моем проекте) из 3 объектов (3 блока на странице), но при загрузке сначала отображается только один объект на весь экран и через некоторое время только все три. Т.е..я как я понимаю, очень долгая загрузка.
@shedzurus6117
@shedzurus6117 10 месяцев назад
Стрим будет сохранен?
@WebCademy
@WebCademy 10 месяцев назад
Запись останется
@user-kb4ei6fh7q
@user-kb4ei6fh7q 9 месяцев назад
здравствуйте, можете написать какую тему вы используйте для vscode
@Dobroe_Utr0
@Dobroe_Utr0 6 месяцев назад
в комментах есть ответ PaleNight (MildContrast)
@oldchicken3633
@oldchicken3633 9 месяцев назад
Подскажите , а что у вас за тема стоит в vsc ?
@WebCademy
@WebCademy 9 месяцев назад
PaleNight (MildContrast)
@denmatvienko1398
@denmatvienko1398 8 месяцев назад
Слайдеры , Как это все напоминает плагины (модули) для Joomla
@WebCademy
@WebCademy 8 месяцев назад
Старая добрая Joomla)) 1.5 была лучшей)
@user-vg5oi6mg4z
@user-vg5oi6mg4z 9 месяцев назад
У меня вопрос смотрю ваши старые уроки по вёрстке , как сделать также как и у вас что бы писать английскими символами а оно изменялось автоматически на рус слова? ,просто не удобно каждый раз язык менять
@WebCademy
@WebCademy 9 месяцев назад
Программа punto switcher
@user-vg5oi6mg4z
@user-vg5oi6mg4z 9 месяцев назад
Спасибо огромное !@@WebCademy
@tonyarch2590
@tonyarch2590 9 месяцев назад
Почему у меня иконок с социальными сетями нет, даже на готовом исходнике?
@WebCademy
@WebCademy 9 месяцев назад
Стоит блокиратор рекламы.
@saivengo
@saivengo 10 месяцев назад
А как добавить 0 к счетчику слайдов? как в макете....
@WebCademy
@WebCademy 10 месяцев назад
swiperjs.com/swiper-api#param-formatFractionCurrent и formatFractionTotal stackoverflow.com/questions/56044414/change-the-digit-format-pagination-in-the-slider
@stasalsakhanov435
@stasalsakhanov435 9 месяцев назад
Если не заморачиваться на js, то можно вот так сделать: .swiper-pagination-current:before { content: "0"; } .swiper-pagination-total:before { content: "0"; }
@stasalsakhanov435
@stasalsakhanov435 9 месяцев назад
А если на js, то вот так можно сделать через тернарный оператор в одну строку: pagination: { el: '.slider-controls__count', type: 'fraction', formatFractionCurrent: function (number) { return number < 10 ? '0' + number : number; }, formatFractionTotal: function (number) { return number < 10 ? '0' + number : number; }, },
@StonHenge
@StonHenge 10 месяцев назад
Почему Sass лучше Less?
@WebCademy
@WebCademy 10 месяцев назад
Популярнее.
Далее
Learn CSS Positioning IN 5 MINUTES || CSS Position
5:07