HTML верстка. Креативная шапка сайта с Swiper слайдером на Gulp сборке
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- 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 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 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
Спасибо вам огромное вот мастхев ваш канал, столько нового узнал хотя и так неплохо верстал, однозначно лайк и подписка. Желаю вам удачи и вашему каналу, спасибо огромное 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥😎😎
Юрій добрий вечір. Дуже вдячний за срім . Дуже гарна інформація.
Привет!Сегодня закончил верстать по видео!Узнал массу интересной и новой информации!Спасибо за такой контент!С меня лайк и подписка!
Спасибо за дополнительные знания и отличную практику. Я на вашем канале уже почти год и каждый стрим жду как новый сезон отличного сериала! Смотерть и учится ВСЕМ!
Отличный мастер-класс! Спасибо большое! Много интересных фишек! Как глоток свежего воздуха! Очень понравилось!😀
Спасибо вам большое, многое понял благодаря вашему контенту
Спасибо. Отличный урок и учебник. Отдельное спасибо за код
Отличный мастер-класс, спасибо Вам за такой большой труд
Спасибо большое за работу! Благодаря этому уроку я узнал много чего полезного и интересного😉
Отличный урок. Только что закончил, не без затыков, но прошел. Узнал много нового.
Спасибо за урок, особенно за решение багов, очень важно !important
Юрий, я нахожусь под полным впечатлением от вашего поучительного подхода к изложению материала. И понятно, что за этим стоит мастерство и большой кропотливый труд. Пусть и дальше бьёт ключом Ваше желание провести такие обучающие уроки.
Неля, спасибо за комментарий!) Очень приятно.
Спасибо за интересный мощный и познавательный урок. Закончил делать проект. Все понравилось. Много знаний и фишек узнал новых. Теперь чуть-чуть проще будет работать с данным плагином. Всем рекомендую посмотреть этот материал. И ВебКадеми рекомендую курсы пройти. Юрий лучший. И кураторы на курсах отличные.
Получилось офигенно!
Жду с нетерпением)
Благодарю сэнсэй за ваш труд - отличный контент!!!
Спасибо Юрий ,вы гений
Отличная подача!)
сделал не все до конца понятно, но хотя бы общее впечатление получил хорошее😄
Очень классное видео, жалко, что сразу не посмотрел. В итоге уже на сборке сверстал 2 сайта, подключал все через cdn, а оказалось все очень легко импортом сделать. И также затронули важную тему с адаптацией по высоте. Я так до конца это не понял, но делал сам также, старался все устройства популярные потыкать, НО тоже не всегда работает, жаль, что там ноубуков маленьких нет. Вообще, было бы классно соорудить какой то гайд из 10-15 устройств по ширине и высоте, чтобы сразу под них делать составные медиа. Потому что нет нет, да вылезает что то неадаптированное.
Топчик
Отличная практика для структурирования типа атом в реакте.
Доброй ночи. Юрий, у меня разница текста и фоновой картинки на localhost и docs. Как бы меняется размер. Это браузер так отображает? А вообще классная работа. Особенно паралакс и свайпер. Отлично!!! Спасибо, Юрий. Классная школа, отличные курсы.👌👍
Юрий, приветствую, спасибо огромное за крутой урок! В моменте, когда see more вылез за пределы header__content вроде как можно в transform-origin написать left top вместо left bottom, всё также отображается как и в Вашем решении. Вопрос в том, что мб так не очень делать, просто я не знаю о каких-то последствиях?
P.S. За уроки реально огромный респект и спасибо! Мало кто выпускает настолько качественный контент сейчас.
Спасибо за комментарий!) transform-origin отвечает за точку трансформации, в данном случае высота элемента небольшая, поэтому левый верхний или левый нижний угол - разница не особо большая и еле заметна.
Стрим будет сохранен?
Запись останется
Здравствуйте, подскажите, пожалуйста, как Вы точно рассчитываете line-height для текста? У меня Фигма прописывает "line-height: normal" в режиме разработчика, а в обычном режиме "auto"...
Доброе время суток у меня появилось желание сверстать адаптивный магазин nft, но не знаю что для этого использовать. Не могли посоветовать сборку. Сложность макета figma - нереальная. В интернете советовали делать на react. Но я не знаю его одного будет достаточно или нужна сборка?
React - для SPA. Gulp сборка - для верстки. Я бы выбирал инструменты исходя из задачи.
а подскажите пожалуйста, а как мы выдернули градиент текста для тайтлов,а то у меня чтото не получилось с фигмы его выцепить
Слайдеры , Как это все напоминает плагины (модули) для Joomla
Старая добрая Joomla)) 1.5 была лучшей)
Подскажите , а что у вас за тема стоит в vsc ?
PaleNight (MildContrast)
здравствуйте, можете написать какую тему вы используйте для vscode
в комментах есть ответ PaleNight (MildContrast)
Добрый день! Огромное спасибо! Скажите, пожалуйста, как сделать так, чтобы слайдер корректно подгружался, а не так, чтобы сначала отображался только первый слайд на весь экран?
Добрый день. Спасибо за комментарий. Что значит корректно? В данном проекте сделали согласно дизайну. В других проектах, в записи стримов, делали другие слайдеры, например с карточками товаров.
@@WebCademy У меня слайдер (в моем проекте) из 3 объектов (3 блока на странице), но при загрузке сначала отображается только один объект на весь экран и через некоторое время только все три. Т.е..я как я понимаю, очень долгая загрузка.
Не срабатывает кнопка закрытия меню. В чем может быть проблема.
У меня вопрос смотрю ваши старые уроки по вёрстке , как сделать также как и у вас что бы писать английскими символами а оно изменялось автоматически на рус слова? ,просто не удобно каждый раз язык менять
Программа punto switcher
Спасибо огромное !@@WebCademy
Почему у меня иконок с социальными сетями нет, даже на готовом исходнике?
Стоит блокиратор рекламы.
А как добавить 0 к счетчику слайдов? как в макете....
swiperjs.com/swiper-api#param-formatFractionCurrent и formatFractionTotal
stackoverflow.com/questions/56044414/change-the-digit-format-pagination-in-the-slider
Если не заморачиваться на js, то можно вот так сделать: .swiper-pagination-current:before {
content: "0";
}
.swiper-pagination-total:before {
content: "0";
}
А если на 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;
},
},
Почему Sass лучше Less?
Популярнее.