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

Друзья, начинаю серию контента по верстке сложного пакета, использую сборку на gulp 4 и препроцессор scss. Макет нарисован в figma, дизайнер постарался с интерактивными элементами, так что нам будет что делать и над чем подумать. Велком и приятного просмотра.
Макет:
bit.ly/2B1bkom
Gulp сборка: drive.google.com/open?id=1lEB...
Видосы по Gulp:
ч1 - • Gulp 4
ч2 - • Gulp, рабочая сборка д...
Видос по препроцессору:
• Препроцессоры SCSS/SAS...
Телеграм канала:
bit.ly/telegram-kanal-0-1
ссылка на канал если в ваше стране блочат телеграм:
bit.ly/vpn-telegram-kanal-0-1
Телеграм чат по верстке:
bit.ly/chat-from-0-to-1
ссылка на чат если в ваше стране блочат телеграм:
bit.ly/vpn-from-o-to-1
Вк канала:
bit.ly/vk-from-0-to-1
Мой instagram:
bit.ly/insta-vadimprokopchuk
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@vadymprokopchuk]

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

[@user-yp8rv9cm6b]

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

[@vadymprokopchuk]

благодарю

[@mrBurlaka1]

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

[@33mika777]

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

[@anatoliiv9098]

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

[@Nomad-mf9pn]

++

[@F1rsTMusse228]

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

[@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]

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

[@user-ig8pk4vo5z]

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

[@dmitryvarnavskikh5648]

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

[@user-bm5ge3mr9u]

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

[@dmitryvarnavskikh5648]

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

[@user-sd1rv9mz8k]

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

[@user-ij8rm5yx5n]

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

[@andrew.RBD11]

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

[@vadymprokopchuk]

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

[@ndreiorekhov777]

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

[@italik3883]

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

[@varfolomeiq]

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

[@aumfox]

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

[@ARuslan80]

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

[@user-ho9fn3lp8l]

Невероятно круто! Спасибо тебе большое за такие полезные уроки. Тебя интересно и приятно слушать :)

[@ravinna_]

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

[@user-vo7sm5sz7p]

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

[@vadymprokopchuk]

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

[@dimatsyhanenko9503]

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

[@it400]

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

[@noname-nj4gk]

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

[@user-hp3hr7jf1n]

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

[@ORIGENAL26]

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: надеюсь кому то будет полезная инфа

[@user-hp3hr7jf1n]

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

[@olgareschetilo3253]

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

[@mcbood1st831]

@@ORIGENAL26 Спасибо!

[@atler9865]

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

[@alexandersalkov5334]

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

[@GDiak]

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

[@user-um5vx4ez1p]

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

[@user-rn5tp2vu7g]

Вечеринка просто супер! Большое тебе спасибо и большой волны!

[@dzmitrykubarski1462]

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

[@serhiidolhanov5994]

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

[@andrussian]

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

[@evgeniybudaev1690]

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

[@user-xn4yy6yv7h]

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

[@xlopok188]

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

[@mikxwaep]

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

[@marina-ej4qd9kc1wh]

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

[@it_-hasagi_3244]

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

[@forwok8454]

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

[@yuragrivicki5272]

Побольше таких работ! Огромное спасибо!

[@artsiom450]

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

[@user-hw3xr8ts8t]

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

[@user-oj5fj3yz1x]

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

[@elberethgilthoniel5053]

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

[@user-lp5zg3xv5r]

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

[@MaraZzzMShow]

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

[@d3d1t43]

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

[@aleksey7386]

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

[@beck6208]

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

[@user-ff3lc1et3u]

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

[@andrii4164]

Отличная подача материала и видео! Спасибо!

[@little_fox3617]

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

[@victorbalocan]

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

[@user-gz6wv5rx4d]

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

[@markantony8983]

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

[@user-wy8kb3hf5h]

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

[@user-yl5xn4si7k]

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

[@igr3943]

Офигенский макет, бомбезный план (поделиться работой над ним с нами) и топовый контент! 1 млн лайков под всеми сериям (но из-за правил ютабчика могу поставить только один) Большое спасибо за этот труд!!!!!!

[@user-yv4tn5ll9z]

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

[@infernal95mailru]

Этот макет просто ОГОНЬ!! Вечеринка начинается! :)

[@stasalexandronets9394]

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

[@user-em2zl1lp3z]

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

[@annagardt2360]

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

[@meirambekzhussipov7412]

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

[@Mykhailo_Vdovychenko]

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

[@user-vj8is3li3f]

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

[@neveroff6018]

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

[@Romzec1]

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

[@user-gc2ez7zb1f]

Я когда смотрю на этот макет, меня аж тилипать начинает от одной только мысли что-то подобное мне нужно будет верстать по работе. Респект за такой труд🦾🦾🦾

[@sheraabdurakhmanov9631]

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

[@lozovink]

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

[@eXacT9090]

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

[@oleksiik4473]

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

[@user-oh4uj1fu1v]

Крутой макет, крутая подача) Узнал много нового) Пошел смотреть второй видос

[@alekspopov2217]

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

[@user-vo7sm5sz7p]

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

[@user-kh7fv5rn1g]

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

[@user-vo7sm5sz7p]

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

[@shevchuk21]

​@@user-vo7sm5sz7p можешь ссылку скинуть

[@user-vo7sm5sz7p]

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

[@shevchuk21]

@@user-vo7sm5sz7p хорошо

[@silverpunk7518]

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

[@vadymprokopchuk]

Silver Punk спасибо

[@aleksandrkhabarov6026]

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

[@Artem-bt1cx]

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

[@Vetergaming]

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

[@user-ml8lg7fl1c]

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

[@strangechannel4589]

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

[@user-ur7vc7er3b]

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

[@user-nc1fn3fo6y]

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

[@miroslavsirenko3605]

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

[@user-qk4gh8cn6t]

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

[@user-be9vd1jm7e]

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

[@fobianka2131]

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

[@user-wk3sz3zz7t]

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

[@kudryaxa]

Поддерживаю, макет классный. Видео понравилось. Отдельная благодарочка, что макет тоже можно скачать и повторять. От меня 👍🏻

[@user-mo1db9he8t]

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

[@niceman5890]

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

[@exclusive6275]

Просто бомба, много интересного и нового узнал! Лайк, подписка!

[@user-fi4eh3un9i]

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

[@hennadiikhudolieiev2198]

Макет очень крутой! Побольше бы таких!

[@user-it4bb7jz4z]

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

[@user-tc9ju1wi8f]

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

[@vadymprokopchuk]

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

[@GTWY303]

Доделал первую часть. Кайф! Спасибо!!!

[@Denis-pu4bt]

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

[@vadymprokopchuk]

спасибо

[@alexles5003]

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

[@grim9217]

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

[@Vikosha123]

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

[@vadymprokopchuk]

спасибо

[@nikolasoliynyk9728]

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

[@user-xg3er7dw8y]

крутейший ролик, суперский макет, решение про анимацию ваще огонь. Спасибо.

[@KrasavchikSelivan]

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

[@denstiller3606]

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

[@eduardgrigoryan6052]

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

[@user-eo4rp8fd8n]

Вадим ты молодец. Действительно интересный макет . Уважуха тебе)

[@vepr6129]

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

[@user-yq7tj2xv3p]

Макет - голову сломать))) Подача материала суперская! Спасибо за видос. Не останавливайся. У тебя появились свои фанаты. Я уже в их числе. Жду продолжения твоих уроков.

[@vadymprokopchuk]

спасибо