Верстка сайта, Gulp 4, препроцессор scss, анимация. Часть 1

Подписаться 85 тыс.

Просмотров 132 тыс.

50% 1

Друзья, начинаю серию контента по верстке сложного пакета, использую сборку на gulp 4 и препроцессор scss. Макет нарисован в figma, дизайнер постарался с интерактивными элементами, так что нам будет что делать и над чем подумать. Велком и приятного просмотра.
Макет:
bit.ly/2B1bkom
Gulp сборка: drive.google.c...
Видосы по Gulp:
ч1 - • Gulp 4
ч2 - • Gulp, рабочая сборка д...
Видос по препроцессору:
• Препроцессоры SCSS/SAS...
Телеграм канала:
t.me/from0to1com
Телеграм чат по верстке:
bit.ly/chat-fro...
ссылка на чат если в ваше стране блочат телеграм:
bit.ly/vpn-from...
Вк канала:
bit.ly/vk-from-...
Мой instagram:
bit.ly/insta-va...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

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

26 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 674

@vadymprokopchuk 2 года назад

Полезные ссылки: Бонусы на patreon - www.patreon.com/from0to1 Курс по верстке - from0to1.com.ua/ Телеграм канал - t.me/from0to1com Подпишитесь на канал, если вам понравилось данное видео: bit.ly/2IFzwBZ

@АлександрПогребняк-ф9ы 5 лет назад

Топовый ролик, главное не останавливайся, у тебя очень крутое будущее на ютубе, спасибо за ррлик

@vadymprokopchuk 5 лет назад

благодарю

@mrBurlaka1 4 года назад

У меня на навигационной карусели, та которая с границей вверху, слик перебивает мои стили?? Что делать?

@33mika777 4 года назад

@@mrBurlaka1 посмотри порядок подключения стилей.

@anatoliiv9098 5 лет назад

Суперский макет! Побольше таких уроков делай с подобными современными макетами с нестандартными фишками.

@Nomad-mf9pn 5 лет назад

@MusseYT 4 года назад

@Дмитрий Самарин Скачай фигму и макет , запусти на ПК

@danzino21 2 года назад

У КОГО НЕ РАБОТАЕТ, ЧИТАЕМ 1. в package.json, строку :18 заменить эту строку "gulp-sass": "^4.1.1", 2. Затем пишем в консоль: npm i npx gulp P.S.К автору: Сейчас твою сборку зритель-новичёк никогда в жизни не запустит. Вместо этого поставит дизлайк. Добавь, пожалуйста, в описание этот кусок кода.

@ORIGENAL26 2 года назад

4.1.1 не поддерживается последней версией Node.js, лучше написать: "gulp-sass": "^5.0.0", Но если установить пятую версию, то выпадет ошибка: Error in plugin "gulp-sass" Message: gulp-sass 5 does not have a default Sass compiler; please set one yourself. Решается она так: 1) Устанавливаем sass: npm install --save-dev sass 2) В gulpfile.js меняем третью строчку sass = require('gulp-sass'), на sass = require('gulp-sass')(require('sass')); Также может появиться следующее предупреждение: "Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file." Это не ошибка, это просто предупреждение и работе оно не мешает. Но это легко фиксится: -меняем 20-ю строчку в gulpfile.js browsers: ['last 8 versions'] на overrideBrowserslist: ['last 8 versions'] ps: надеюсь кому то будет полезная инфа

@danzino21 2 года назад

@@ORIGENAL26 Спасибо за ответ. Я не учёл версию NodeJS. Я дополню тогда свой ответ: Перед всеми действиями установите Node JS 14-ой версии. Найболее просто вариант: npm install -g node@14.17.6

@olgareschetilo3253 2 года назад

@@danzino21 У меня после команды gulp выходит This: command not found

@mcbood1st831 2 года назад

@@ORIGENAL26 Спасибо!

@Евгений-х4л2щ 5 лет назад

Просто охренительный макет, прям глоток свежего воздуха! Спасибо, Вадим, ты делаешь просто топовый контент, так держать! Если можно, немного критики: 1. Очень во многих местах повторяется color: #fff, у нас все шрифты на странице белые, так что можно это сразу прописать в body; 2. Вертикальную надпись в левом верхнем углу и зелёный прямоугольник лучше было сделать просто текстом и псевдоэлементом; 3. Для содержимого блока aside я бы задал display: flex и пусть они там танцуют, как им заблагорассудится. С жёстко заданным марджинами адаптивить будет неудобно; 4. Для body нужно задать чёрный фоновый цвет, чтобы у печальных чуваков с медленным инетом страница была черной ещё до появления фоновой картинки

@vadymprokopchuk 5 лет назад

спасибо, и критика крутая, во время верстки на камеру стараюсь мало думать, за всем уследить сложно

@dimatsyhanenko9503 5 лет назад

@@vadymprokopchuk Смотрю как ты мучаешься с ctrl+v и хочу тебе подсказать одну фишку) В windows 10 есть такая функция как расширенный буфер обмена. чтобы начать его использовать просто нажми "пуск" + "v", при первом включении надо поставить галочку и готово) Теперь у тебя есть возможность выбирать из буфера какие части кода или текста надо вставить. Удачи тебе, крутые видео)

@italik3883 5 лет назад

Не ну это топ Побольше бы таких видео где объясняют как делать сложные макеты

@xlopok188 5 лет назад

Видео супер, макет вышка, вечеринка классная, мне эта движуха нравится)

@mikxwaep 4 года назад

Чисто его стиль

@andrew.RBD11 7 месяцев назад

Макет бомба, я просто тащусь от твоих уроков, прям то что надо, то что я так долго искал и наконец-то нашел.

@vadymprokopchuk 7 месяцев назад

круто, у меня много крутого материала

@ndreiorekhov777 4 года назад

когда сказал, что теперь на стрелочку, как она двигается будем смотреть часика пол 2:00:55 ...заржал просто, лайк за классный юмор в сочетании с прикольным обучением.

@marina-ej4qd9kc1wh Год назад

Какая приятная верстка. Прямо какое-то эстетическое наслаждение. Спасибо!!!

@ARuslan80 5 лет назад

Мы снова в ритме танца на новой вечеринке))) Макет - огонь!

@alexandersalkov5334 4 года назад

Лучше поздно. чем никогда! Вадим, спасибо, что не удалил видосы по этому макету. Я только начал его верстать (потому что до этого делал более простые макеты для начинающих у тебя на канале), но мне жутко интересно. Спасибо!!! Я в поросячем восторге от того, что вижу на своём экране. =))) Это супер!!! Мчу дальше...

@andrussian 4 года назад

Очень нравится подача. Ваши уроки необходимо смотреть

@it_-hasagi_3244 4 года назад

Боже мой Ты лучший братан! Глоток свежего воздуха. По чаще бы такое

@forwok8454 4 года назад

вот для этого я интернет и подключал, макет просто бомба, реализация еще лучше. Спасибо за все эти 6 видео, уже шестой час сижу верстаю с тобой параллельно

@Romzec1 4 года назад

Здравствуй Вадим! Ты супер! Очень классный урок, все понятно, доходчиво, а самое главное, очень сложный макет. На просторах ютуба, не встретишь уроков по верстке таких макетов. Так держать! Хотелось бы уроков по CSS и JS для новичков.

@dmitryvarnavskikh5648 3 года назад

У кого после написания "npm i" вылезает куча ошибок в консоле и ниче не работает, удалите файл package-lock.json из сборки и запустите "npm i" заново. Там проблема из-за несовместимости версий ноды. Долго тупил с этой фигней. Может поможет кому.

@МиронД-э4ш 3 года назад

Спасибо тебе! Ты спас мое обучение)

@dmitryvarnavskikh5648 3 года назад

@@МиронД-э4ш Приятно читать, что кому-то это помогло) Всегда пожалуйста)

@ДарьяСавченко-т6ф 3 года назад

большое спасибо!

@DmKz7 3 года назад

Спасибо тебе, человечище!!!

@Евгений-х4л2щ 5 лет назад

Для тех, кто хочет немного посложнее: 1. Рисуем в фигме еще три дороги, чтобы к каждой точке был отдельный путь. Далее с помощью ивента beforeChange из слик-слайдера определяем активный слайд, отображаем и анимируем соответствующую дорогу. Получается при перелистывании слайдера у нас анимируется каждый раз разная дорога. Также активная зеленая точка становится большой, и рядом появляется название. 2. Дату меняем на актуальную с помощью new Date(). 3. Определяем местоположение и отображаем актуальный город вместо California 4. По наведению мыши на пункты меню делаем так, чтобы текст отъезжал на пару пикселей вниз, а иконка вверх, получится отзывчивое меню с понятной реакцией на наведение. По поводу второй секции тоже есть интересные мысли, как только доделаю оставлю коммент ко второму видео

@m_mariya_mari 5 лет назад

Вау! можно в коде? Шикарный интерактив получится 👍

@Евгений-х4л2щ 5 лет назад

@@m_mariya_mari завтра если не забуду выложу на гитхаб и скину

@shevchuk21 4 года назад

@@Евгений-х4л2щ можешь ссылку скинуть

@Евгений-х4л2щ 4 года назад

@@shevchuk21 завтра скину. Сейчас занимаюсь реальным проектом, поэтому этот пока забросил на блоке с самолётиком

@shevchuk21 4 года назад

@@Евгений-х4л2щ хорошо

@АлександрЗарочинцев-ф7о 4 года назад

Вадим! Знание - сила! И этот ролик тому доказательство! Большое тебе спасибо за твои труды!

@d3d1t43 4 года назад

Макет классный. Люблю такие активные сайты. Они не скучные никогда. Одним словом - охренительно!

@ДаниярСадыков-м1т Год назад

Отдельное спасибо за материлы в описании)) Просто лучший!!!

@СергейТроян-у5й 3 года назад

Верстаю в ноябре 2020 года, очень крутой проект. Спасибо за работу !!! Как всегда лайк...

@lozovink 4 года назад

Абалдеть в каком я восторге от этого stroke-dashoffset свойства!!! Раньше и не слышал о нём! Сразу же в башке 100500 идей на счет него:))) Спасбо, Вадим!!!

@Виктор-о9м 4 года назад

Просто космос!) Макет супер, не то что на просторах ютуба все пишут однотипные макеты в одном измерении, в одном направлении. Здесь реально польза от 2 часов просмотра. + .class по БЭМ сразу пишешь (что каждый раз напоминает о чистоте кода и о уровне верстальщика ) Если конечно я не ошибаюсь. Вообщем лайк и подписка.

@evgeniybudaev1690 4 года назад

Доходчиво всё объяснил. Всё просто супер! Отдельный ролик про анимацию очень хочется увидеть!

@yehorich1975 4 года назад

Бомба! Огромное спасибо. Кстати, может кому надо, чтобы линия трассы прорисовалась один раз и остановилась, нужно для .line-animation убрать infinite и добавить animation-fill-mode: forwards.

@ni4egonepridumal 3 года назад

Спасибо, я это искал !!

@МишаПогориский-ц1ч 2 года назад

огромное тебе спс, никак не мог понять как застопорить линию

@KrasavchikSelivan 5 лет назад

Ну всё братва, играем на тромбоне, топ контент подъехал)

@alekspopov2217 2 года назад

Aleks Popov Вадим, привет! С удовольствием смотрю Ваши видео,спасибо большое. Поражает изящество изложения и доступность для понимания Ваших действий для новичков (вроде меня). Спасибо!!!

@noname-nj4gk 4 года назад

Такого контента ОЧЕНЬ не хватает на ютубе. Спасибо огромное!

@serhiidolhanov5994 5 лет назад

Ролик информативный. Подача материала интересная, не унылая, с юморком)) Молодец!

@eXacT9090 5 лет назад

Круто, больше анимаций

@GDiak 4 года назад

Всё нравится, всё подходит! Смотрю и делаю. Всё получается легко. Спасибо, Вадим, за твою работу!

@silverpunk7518 4 года назад

Интересный макет, да и в целом интересные у вас уроки, а также отлично обьясняете. Так держать!

@vadymprokopchuk 4 года назад

Silver Punk спасибо

@atler9865 5 лет назад

Жесть. макет огонь! Побольше таких!

@elberethgilthoniel5053 5 лет назад

Опа, топовый контент. Заслуженный лайк не глядя. (но и глядя тоже 🌚)

@niceman5890 2 года назад

Спасибо большое за такое прикольное видео!

@ТатьянаХарсеева-ж2ц 5 лет назад

Ура! У меня всё получилось красотища и разрыв кабины, а с анимациями надо разобраться подробнее))) Спасибо!

@varfolomeiq 5 лет назад

Макет довольно интересный, ждём продолжения! Спасибо за твою работу!

@СветланаТюкавина-х2б 4 года назад

Вечеринка супер, жду с нетерпением продолжения завтра), про Дашу новое для себя открыла, благодарю за полезные фичи...

@victorbalocan 5 лет назад

Когда увидел макет, подумал, что его в принципе нереально заверстать. А тут ещё и анимации всякие... Не видео, а бомба! Лайк однозначно!!!

@it400 4 года назад

Как же приятно Вас слушать, бодренько, весело и все по делу)

@meirambekzhussipov7412 5 лет назад

Вадим продолжай , все супер пупер.

@aumfox 4 года назад

Сколько ж позитива и пользы от твоих видео )))) Огонь прям!

@ВикторКоролев-й3э 5 лет назад

Крутой макет, давай ещё про анимацию

@АндрейМаркин-н5р 4 года назад

Я в шоке, урок супер!!! Такой сложный макет и так все просто... Спасибо, больше не могу подобрать слов.

@sashayagodinets6165 Год назад

Для тих хто використовує цю збірку зараз package.json - на 18-тій стрічці міняємо на "gulp-sass": "^5.0.0", gulpfile.js - другу стрічку міняємо на sass = require('gulp-sass')(require('sass')); в терміналі почергово вводимо: npm i sass --save-dev npx npm-check-updates -u npm install npx gulp Сервер запускається але з помилками(до кінця не розібрався) Працювати не заважає.

@sanjo6465 Год назад

Хто ти , воїн? А якщо серйозно, то неймовірно дякую. Цей коментар найкорисніший на даний момент, Слава Україні!!!

@ЮлияАлимова-х8и Год назад

Спасибо огромное) Только команда gulp после всего прописанного не запускает проект( C:\Users\work\surf\gulpfile.js:7 del = require("del"), ^ выбивает ошибку здесь

@ДаниилКочкин-ж8у 5 лет назад

Вначале поставил лайк, после начал смотреть видео. Касательно макета, не буду лукавить, мне он показался - реально классным! Из него много чего можно подчеркнуть для себя. Особенно хорошо, что я только недавно начал проходить анимации и на тебе, видео где анимаций будет похоже много.

@vadymprokopchuk 5 лет назад

да, тут с анимациями постарался диз, и круто получится

@nik12p 5 лет назад

Привет. Ролик "зашел", мне как раз предстоит верстать макет, где нужно связать два слайдера вместе. Жму палец вверх, и жду продолжения!

@alexles5003 3 года назад

Просто офигенно. Концентрированная вечеринка с шоколодом.

@TheKramerJohn 5 лет назад

Сходу закусенец вверх. И колокольцев. И приступаем к просмотру и верстке.)) Спасибо Вадос)) ПэСэ. Быстрее бы тебе уже подпищиков под лям, что бы ты выпускал видосы почаще ))) ПэСэСэ. Да очень хочу видосов по анимации и работе с svg))

@vadymprokopchuk 5 лет назад

спасибо

@Denis-pu4bt 5 лет назад

Дай тебе бог здоровья. Все круто)

@vadymprokopchuk 5 лет назад

спасибо

@ВладимирАнтоненко-д5й 4 года назад

Только начал смотреть твой видос, сразу понял что досмотрю все выпуски и конечно же подписка)) Спасибо за урок! Макет бомба!

@ВикаАндреева-б1ъ 3 года назад

Спасибо , за отличную серию уроков

@ВикторКашин-е9р 5 лет назад

Наконец то ! ))) Макет просто пушка 👍

@ravinna_ 5 лет назад

это просто потрясающе) спасибо за верстку этого макета, понятно и интересно) и узнать еще об анимации было бы супер)

@SergDes-j2w 5 лет назад

Спасибо, Вадим! Это лучшее, что мне доводилось смотреть!!!

@vadymprokopchuk 5 лет назад

спасибо, очень круто

@ЗапасЗнаний 4 года назад

Спасибо тебе товарищ за крутой урок, который позволяет всем нам прокачать свои навыки на пути к еще большим целям. Успехов каналу в целом.

@vepr6129 4 года назад

вот это мощь, особенно концовка про анимацию, даже не думал что так возможно анимировать svg

@grim9217 4 года назад

Верстка взрыв. По анимации вообще круто. Реально крутая вечеринка. :)

@СергейСуворов-ч7ъ 3 года назад

Для анимации стрелок вниз: class="animate__animated animate__fadeInDown animate__infinite animate__slower" Для точек: class="animate__animated animate__fadeIn animate__delay-1s"

@AleksanderSheyko 3 года назад

чет ни как в уроке, ни как вы написали, не работает у меня(

@fobianka2131 Год назад

спасибо, всё заработало)

@aleksey7386 5 лет назад

Макет огонь ! Очень интересно будет посмотреть! Лайк !

@КириллДанилов-у6ы 2 года назад

Шикарный макет. Как раз для разбора и практики верстки через предпроцы и галпуню =)

@MaraZzzMShow 5 лет назад

Как всегда, красавчик! Отличный макет!

@АлександрПогребняк-ф9ы 5 лет назад

Макет крутой, очень много того, что я еще не делал, круто круто круто

@Mykhailo_Vdovychenko 4 года назад

Макет - бомба! А урок вообще ОГОНЬ! =)

@krikotik 4 года назад

Ну футер, конечно, тяжелее всего, придется попотеть. Спасибо за ахуенное видео!

@tanakovasabi4090 4 года назад

ПростоПроизведения Искусства👍👍👍👍

@little_fox3617 3 года назад

Спасибо за видео! Подача как всегда на высоте!! Очень много новых фишек узнала) Ну и дизайн потрясающий, очень стильный сайт получается

@Vikosha123 5 лет назад

Макет пушечный просто! Спасибо за очередной офигенный видос лайк, подписка, колокольчик

@vadymprokopchuk 5 лет назад

спасибо

@artsiom450 5 лет назад

Спасибо за видео, очень познавательно. Ждём вторую часть.

@miroslavsirenko3605 4 года назад

спасибо за серию уроков! +1 за ролик про анимации

@markantony8983 4 года назад

Отличное видео, спасибо за ценные знания) я не пожалел, что прошел твой курс по верстке) буду рад увидеть новые видео с более сложными макетами и более интересными задачами не для новичков))

@картес-ж7ж 4 года назад

Макет просто шикарен и офигенен!! Мне прям твои видеоуроки заходят на 100%

@Artem-bt1cx 4 года назад

Начинаем вечеринку, макет зачётный!))

@ЕвгенийХроменков-ь5ш 4 года назад

Макет обалденный, урок, как всегда, шикарный =)

@ЮрВлад 4 года назад

на скорости просмотра Х2 вполне даже. Спасибо. Интересно и полезно

@sergeylavrinenko4488 4 года назад

Да этол вообще лучшее что я виде на ютуб!!!

@beck6208 4 года назад

Вадим это просто бомба! Огромное спасибо за такой информативный видос!!!!

@maximbarishov4120 3 года назад

Макет просто гениальный, мне очень понравился, хочется сверстать его.

@stasalexandronets9394 4 года назад

Только начал смотреть видос - предвкушаю супер классный контент! Огромный ЛАЙК!!!!

@oleksiik4473 4 года назад

Долго, но Божествено!!!! Огромное спасибо!

@СнежаннаКупцова 4 года назад

Спасибо, макет просто супер, давай по больше таких работ!!!!

@АлександрФримен-п7ж 3 года назад

Вадос, красавчик! столько годного контента, спасибо тебе огроменное! хороший ты мужик!)

@neveroff6018 5 лет назад

Макет бомба! Продолжай! Подписка однозначно!

@ВиталийКабаков-ф5э 4 года назад

Макет и подача материала на высоте! Спасибо!

@aleksandrkhabarov6026 4 года назад

Прикольный макет, прикольная подача материала!!! Подписан и учусь!!! Добра и успехов тебе 🙌

@sheraabdurakhmanov9631 4 года назад

Замечательно!!!!! Обязательно про анимацию видосик спасибо за ваш титанический труд!!!

@it_-hasagi_3244 4 года назад

Господи, это шедевр )

@npc6110 5 лет назад

Полезный контент. Особенно как анимацию сделал.

@vadymprokopchuk 5 лет назад

благодарю

@eduardgrigoryan6052 3 года назад

Vladim Ты лучший! Макет шикардосный

@MrChesy47 5 лет назад

Очень ждём продолжения !!!

@strangechannel4589 4 года назад

Мне не хватало этого видео в моей жизни! Спасибо тебе!!!

@nikolasoliynyk9728 4 года назад

Просто крутяк )) мне очень нравится буду советовать друзьям всем

@powered8473 Год назад

Прикольный буду пробовать верстать с вами.

@vadymprokopchuk Год назад

супер

@annagardt2360 4 года назад

Спасибо большое! Крутой материал!!! Анимация - вообще огонь!

@Vetergaming 3 года назад

крутотень!) набираю опыт благодаря Вадиму, спасибо тебе!

@denstiller3606 5 лет назад

Топовый макет больше бы таких )

@sananrahimli_21 4 года назад

Это крутая верстка и крутой чувак! Удачи тебе! Но я бы родителю левым блокам задал flex column и что бы он автоматически расширялся по высоте

@kenshikamuro 5 лет назад

Макет огонь! Продолжай, буду верстать вместе с тобой

@makssmeinarts8832 3 года назад

Для тех, у кого второй СЛАЙДЕР крутится... Укажите в .slider-dots .slick-track (Тоесть, Если в slider-dots есть класс slick-track) И вот туда пишем transform: none !important; Вот как всё должно выглядеть .slider-dots .slick-track { transform: none !important; } Должно помочь

@PieceOfInternet 2 года назад

Спасибо большое, очень выручило) пол дня сидел тыкал, менял свойства, пересматривал видос, думал может где-то косяк с позиционированием или еще что) чертов трекер просто смещает слайды за границу блока и делает их невидимыми и при этом слайды крутятся) фухххххх шикос!

@makssmeinarts8832 2 года назад

@@PieceOfInternet Пожалуйста! Учись дальше ))

@Yura-lg3vr Год назад

@@makssmeinarts8832 Супер!

@vadimstukalov4873 10 месяцев назад

Спасибо! Была эта проблема, нижний слайдер .slider-dots уезжал. Вот только интересно почему у автора все заработало без этих костылей? И самое главное, если бы не было добрых людей, как я должен был вообще понять в чем проблема? На сайте slick в инструкции я об этом ничего не нашел.