#5 Верстка сайта для начинающих | JavaScript. Настройка попапов, скролл к элементам

No video

#5 Верстка сайта для начинающих | JavaScript. Настройка попапов, скролл к элементам

Рет қаралды 7,495

Күн бұрын

Верстаем макет сайта (лендинга) из Photoshop. Видео для начинающих, практика верстки. В уроке напишем javascript для всплывающих окон, скролл к элементам, закрепим шапку вверху страницы.
/* Материалы урока */
Код: github.com/Dmi...
Макет: drive.google.c...
/* Команды урока */
Запуск browser-sync: browser-sync start --server --files "**/*" --no-notify
Меня зовут Дмитрий Бердников, я веб-разработчик. На этом канале буду делиться знаниями по веб-разработке.
/* Соц. сети */
Мой ВК - berdnik...
♫Music By♫
●Kronicle - Another Chill Day
●Soundcloud - / the-chemist-10
#обучение #верстка

Пікірлер: 69

@user-up6es3nr6s 4 жыл бұрын

Таймкоды: 1:15 Прижимаем header-page к верху страницы 6:45 Настраиваем попапы 20:54 Делаем скролл к элементам

@Alexus1504 3 жыл бұрын

Да, эта часть для начинающих верстальщиков, которые прям так неплохо знают JS!

@user-xe6bu2wi5r 4 жыл бұрын

Спасибо за старания. Очень полезные уроки. Я знал JS и даже что-то писал самостоятельно, но до конца не понимал, что делаю и в большей степени учился использовать JQuery. С помощью твоих видео появилось понимание моего кода и более структурировались уже имеющиеся знания. Спасибо еще раз за старания)

@user-up6es3nr6s 4 жыл бұрын

Спасибо)

@mykhailobokalo6037 4 жыл бұрын

Очень круто! Для меня все понятно. Спасибо!

@mykhailobokalo6037 4 жыл бұрын

Очень интересно! жду продолжения.

@user-up6es3nr6s 4 жыл бұрын

Сегодня выложу урок

@ruslanmustafin8887 2 жыл бұрын

Интересно получилось, если не нажимать пробел когда в попапе)

@yakhyomakhmudov8794 4 жыл бұрын

бро ты супер так продолжай если так будешь продолжить я людей притащу на твой канал

@user-up6es3nr6s 4 жыл бұрын

Спасибо, обязательно продолжу, идей много

@serzhuk22 3 жыл бұрын

Привет, Дмитрий. Спасибо за классные уроки. Возник такой вопрос. VS-code ругается на e.keyCode как устаревшее свойство. Не обращать внимание или надо искать альтернативу?

@user-up6es3nr6s 3 жыл бұрын

Привет! Давно не сталкивался с ним, не знал. Если браузеры его уже не понимают, то нужно найти замену. Например, overcoder.net/q/88138/keyboardeventkeycode-%D1%83%D1%81%D1%82%D0%B0%D1%80%D0%B5%D0%BB-%D1%87%D1%82%D0%BE-%D1%8D%D1%82%D0%BE-%D0%B7%D0%BD%D0%B0%D1%87%D0%B8%D1%82-%D0%BD%D0%B0-%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B5

@user-er4bm4hk6w 3 жыл бұрын

Приветствую, Дима! ОООчень качественный и полезный контент! Спасибо огромное! Жалко что просмотров мало! У меня один вопрос- почему на данно этапе у меня выходит следующая ошибка "popup.js:10 Uncaught ReferenceError: myLib is not defined at popup.js:10 at popup.js:51" и подчеркивает вот эту строчку - "myLib.body.addEventListener('click', function(e) {" Заранее благодарю, за ответ.

@user-up6es3nr6s 3 жыл бұрын

Привет, спасибо! Ошибка в том, что переменная myLib не определена. Ее нужно подключить. Можно попробовать мой код на гитхабе скопировать и вставить, и посмотреть будет ли работать github.com/DmitryBerdnikov/pizzatime

@user-er4bm4hk6w 3 жыл бұрын

@@user-up6es3nr6s Спасибо за оперативный ответ. В конце концов я так и сделал! скопировал код из твоего popup.js но ничего не произошло.

@user-up6es3nr6s 3 жыл бұрын

@@user-er4bm4hk6w Весь код? Скрипты также подключены? Можно попробовать запустить мой код, есть ли ошибка? Если нет, значит можно постепенно копировать мой код, до тех пор пока ошибка не уйдет, а потом посмотреть в чем была ошибка

@user-er4bm4hk6w 3 жыл бұрын

@@user-up6es3nr6s Да я весь код скопировал со всеми картинками, ошибок нет, все идеально. А в чем проблема у меня так и не пойму. Вроде каждую строчку повторял как у ты учил. . . index.html полностью копировал для интереса но не помогло. Просто я твой проект переделываю под суши. Менял только названия и картинки. Тупо скопировать и поставить свое не хочу, так как цель - учится. Сейчас решил повторить точь в точь твой проект. А потом переделывать на свой... Еще раз спасибо за ответы. Выкладывай еще видосики! У твоего канала должно быть в 100 раз больше подписчиков!!!

@peterquill7120 2 жыл бұрын

Привет, спасибо за видео! Только некоторые вопросы остались, буду благодарен, если поможешь чем-то: 1. Скрипт с небольшой анимацией шапки у меня не совсем корректно работает (активный класс к шапке добавляется на любом разрешении экрана). Пришлось метод matchMedia() вставить в функцию-обработчик скролла и тогда скрипт работает вроде как надо. 2. Про скрипт с попапом. Ты делаешь два обработчика на закрытие попапа: один при нажатии на Esc, второй при нажатии на кнопку-крестик и на пустую область. Но во втором обработчике ты используешь дополнительную функцию closestItemByClass(). Но а почему мы не можем сделать так, как делали в первом обработчике, то есть находили попап с активным классом и затем через условный оператор проверяли если есть попап, то закрываем его? 3. Хочу сделать плавный скролл, можно сделать через опцию behavior: 'smooth'. В итоге вместо строки window.scrollTo(0, targetOffsetTop - headerOffset); я написал window.scrollTo({ top: targetOffsetTop - headerOffset, behavior: 'smooth' }); но теперь если делать скролл в самом начале экрана, то он немного некорректно работает для секций о нас и контакты, немного не достает до нужной секции и приходится два раза нажимать на ссылку для перехода, тогда все норм отработает. И да если сделать плавный скролл через scrollIntoView({}) то тоже не совсем корректно, но а если сделать через эту строку window.scrollTo(0, targetOffsetTop - headerOffset); то все ок, как будто что-то не так с behavior: 'smooth', не понимаю...

@user-up6es3nr6s 2 жыл бұрын

Привет! 1) Можешь напомнить про какой класс идет речь? 2) Да, ты прав, хорошо подметил. В данном случае можно было сделать единообразно. Но вообще по-хорошему, надо было предусмотреть возможность попап в попапе, и тогда если искать по активному попапу можно закрыть не тот. Но я этого не сделал 3) Не сталкивался с такой проблемой. По идее, если все работает, то оно и должно работать, а behavior: 'smooth' должно добавлять плавность. Но может есть какая-то особенность

@peterquill7120 2 жыл бұрын

@@user-up6es3nr6s 1. кажется вот этот класс .header-page.is-active .header-page__link { padding-top: 0; padding-bottom: 0; } 3. кстати, смотрел как данный скрипт отрабатывает через консоль и вроде бы все корректно работает(скролл доходит до нужной секции), а когда консоль скрыта, то происходит ровно то, что я написал в первом сообщении, странно :/

@user-up6es3nr6s 2 жыл бұрын

@@peterquill7120 Попробуй загрузить код в codesandbox.io/ и напиши, что посмотреть. Постараюсь помочь

@dudai525 4 жыл бұрын

все видео хорошо объяснял, а 5 часть сильно подкачала, лично я понял ооочченнь мало, но возможно я слишком мало знаю js и это видео не для моего уровня, но все же ты плохо объяснил

@user-up6es3nr6s 4 жыл бұрын

Соглашусь. Но я не делаю уроки с нуля, должна быть начальная база. Хотя я не использовал сложные конструкции. Какой у тебя уровень в js? Что вызвало затруднения?

@dudai525 4 жыл бұрын

@@user-up6es3nr6s js вообще не знаю, понимаю только супер примитивные вещи, типо добавить класс, убрать класс, условия самые простетские, например то что ты провернул с шапкой, как падинги убирать. Когда ты начал работать с попапами у меня вскипел мозг и я вырубил видос, ибо ничего не понял

@user-up6es3nr6s 4 жыл бұрын

Если не знаешь js, то это нормально. Я раньше смотрел уроки по js по 5-6 раз через разные промежутки времени, так как не понимал, если учишь, то понимание придет. Ставь видео на паузу, экспериментируй, используй console log для проверок

@the_funniest_fails 4 жыл бұрын

@@user-up6es3nr6s как вы изучали js до вашего уровня? С помощью книг/курсов или таких же роликов на ютубе с практикой?

@user-up6es3nr6s 4 жыл бұрын

@@the_funniest_fails Я смотрел информацию везде, в книгах, в видео, в статьях, и как можно больше практиковался. Бывает такое, что очень сложно воспринимается информация. Но через время, если продолжаешь учить, смотришь на то, что было непонятно и уже понимаешь как это работает. Главное самому практиковаться, открывать редактор кода и просто писать код, отлаживать его и смотреть почему, так происходит. Хороший сайт для js: learn.javascript.ru

@vladlompas8772 4 жыл бұрын

Здравствуйте, ругается на код var closePopup = function(target) { target.classList.remove('is-active'); }; что делать?(

@Hello_world_2020A 4 жыл бұрын

Автор мне так не удобно Ставить браузер синк. Я делаю по другому в редакторе ставлю автосохранение каждую 1 секунду затем в браузере хром качаю расширение авто обновления страницы ВОТ ТАК

@user-up6es3nr6s 4 жыл бұрын

Можно вообще без авто перезагрузки, просто вручную перезагружать, тут дело удобстве и в скорости разработки

@x-bit5193 3 жыл бұрын

Спасибо,много нового узнал о том как можно работать с DOM. А почему не сделал прокрутку плавной? Или это так задумано?

@user-up6es3nr6s 3 жыл бұрын

Привет! Я выносил отдельно, посмотри здесь, про это? github.com/DmitryBerdnikov/pizzatime/tree/master/lesson5-smooth-scroll

@x-bit5193 3 жыл бұрын

@@user-up6es3nr6s не, я про то что в scrollTo можно передать объект с настройками где указать плавное прокручивание страницы при до элемента. Типа такого window.scrollTo({ top: 1000, behavior: "smooth" });

@user-up6es3nr6s 3 жыл бұрын

@@x-bit5193Потому что, насколько помню делал поддержку ie11. caniuse.com/?search=scrollTo%20

@x-bit5193 3 жыл бұрын

@@user-up6es3nr6s Понял, спасибо за ответ.

@MaksssHome 3 жыл бұрын

Дмитрий, 23:27, а зачем кнопку оборачивать в span? Как я понял по опыту, для вставки какой-либо иконки.

@user-up6es3nr6s 3 жыл бұрын

Привет! Уже не помню. Если в кнопку ложить спан, то скорее всего на этом спане завязан какой-то эффект при наведении. Просто так не нужно добавлять спан.

@MaksssHome 3 жыл бұрын

@@user-up6es3nr6s спасибо большое

@qwu___1058 4 жыл бұрын

Здравствуйте,у меня почему-то не происходит скрол в шапке,хотя делаю всё как в видео:( не понимаю в чём причина,работаю в гугл хроме

@user-up6es3nr6s 4 жыл бұрын

Здравствуй, можно попробовать вставить код отсюда github.com/DmitryBerdnikov/pizzatime/tree/master/lesson5 и если получилось, то проанализировать, где были ошибки. Если ошибка сохраняется, то можно загрузить сайт и прислать мне ссылку, я посмотрю эту ошибку

@FaYrUsinc 4 жыл бұрын

В конце как-то вообще медленно пошло. Уже скорость на 2х поставил, а всё равно медленно. Как будто для начинающих сделано, что-ли. Ну ничего, и на том спасибо!

@Sports-bo9lc 3 жыл бұрын

Почему var а не let?

@user-up6es3nr6s 3 жыл бұрын

Потому что относительно давно писал урок и не использовал babel для урока. Чтобы больше браузеров поддерживало без транспайлинга. Я лично всегда использую const и, если где-то меняется переменная, то let.

@jbsharan2189 3 жыл бұрын

Не работает scrollTo.js все переписал не работаело потом решил заного переписать сного не рабоатет,я могу както показать код ?

@user-up6es3nr6s 3 жыл бұрын

Привет! Код есть на гитхабе, он не работает? Если работает, нужно искать ошибку.

@vvkk3423 4 жыл бұрын

спасибо за видео, не подскажешь как сделать так,что бы скрол происходил более плавно,спасибо

@user-up6es3nr6s 4 жыл бұрын

Это посложнее задача, поэтому я ее не стал разбирать. Я добавлю код и пришлю сюда ссылку

@user-up6es3nr6s 4 жыл бұрын

Я добавил реализацию плавного скролла по ссылке github.com/DmitryBerdnikov/pizzatime/tree/master/lesson5-smooth-scroll В гугле можешь найти много информации про это, например, kzfaq.info/get/bejne/pbuDqc-jqbqwmWg.html В разработке, плавный скролл вряд ли придется писать с нуля. Можно использовать уже готовые решения, например, в jQuery, плавный скролл можно сделать так. $('html, body').animate({ scrollTop: $('.my-class').offset().top }, 1000); Это полезно самому реализовывать функционал и понимать, как это работает. Но когда делаешь реальные проекты, в большинстве случаев берешь готовые решения. В курсе хотел сделать больше практики и понимания базовых вещей, как это работает, поэтому не стал использовать готовые решения. Но далеко решил не заходить, плавный скролл для начинающих может ввести в ступор.

@vvkk3423 4 жыл бұрын

@@user-up6es3nr6s спасибо большое

@user-by4sz6is2h 4 жыл бұрын

@@user-up6es3nr6s можно ещё было легче сделать, в 2 строчки, к элементу к которому нужно плавно скролить написать element.scrollIntoView({behavior: 'smooth' })

@user-up6es3nr6s 4 жыл бұрын

@@user-by4sz6is2h Да, это хорошее решение, но вроде на IE11 не работает

@user-jd3nf4yq9b 3 жыл бұрын

Дмитрий, подскажите пож-ста как сделать так, чтобы скролл к элементам работал плавно одновременно с учетом высоты шапки? Дело в том, что у Вас на Github есть решения, но все отдельно, пример с smooth scroll реализован без учета высоты шапки, а пример где высота учитывается нет плавности. Пробовала совместить, но я новичок и уже долго не могу разобраться. Буду благодарна за помощь! Спасибо

@user-up6es3nr6s 3 жыл бұрын

Привет! В функции скролла нужно найти шапку, взять у нее высоту и отнять от скролла. Псевдокод Скроллим до (оффсет элемента по оси y - высота шапки)

@user-jd3nf4yq9b 3 жыл бұрын

@@user-up6es3nr6s работает, только когда по навигации переходишь вниз на следующий блок то видимая часть отскакивает от шапки на расстояние ее высоты. То есть, до этого был плавный переход от предыдущего блока к следующему, а сейчас предыдущий блок отскакивает прежде чем перейти к следующему

@user-up6es3nr6s 3 жыл бұрын

@@user-jd3nf4yq9b не совсем понял, вот эта строчка же все решает. github.com/DmitryBerdnikov/pizzatime/blob/master/lesson5/js/scrollTo.js#L10 Пробовали код из урока скачать? Разве не работает? Плавный скролл здесь github.com/DmitryBerdnikov/pizzatime/tree/master/lesson5-smooth-scroll Но можно еще легче сделать, поставить behavior: "smooth" developer.mozilla.org/ru/docs/Web/API/Window/scrollTo

@bramka580 2 жыл бұрын

зачем ставить ; перед (function)?

@user-up6es3nr6s 2 жыл бұрын

Чтобы если перед ;(function)() будет код, ничего не сломалось

@user-by4sz6is2h 4 жыл бұрын

А не легче было сделать так : при нажатии на btn-menu к popup-menu добавлять класс is-active. А при нажатии на btn-close убирать класс is-active?

@user-up6es3nr6s 4 жыл бұрын

Не совсем понял. Сейчас же так и работает, что при нажатии на кнопку у нас добавляется к попапу класс is-active, а при закрытии убирается

@user-by4sz6is2h 4 жыл бұрын

@@user-up6es3nr6s имею ввиду, что вы использовали дата атрибут, и target, потом проверяли, что точно нажат button, а не span. А можно же было просто взять сразу по классу btn - menu и при клике на него для popup menu добавлять класс is active

@user-up6es3nr6s 4 жыл бұрын

@@user-by4sz6is2h Да так можно, в будущем будет понятно, где и как лучше использовать для конкретной ситуации. Когда мы используем, например, data атрибут, так мы не привязываемся к конкретному классу и мы можем использовать этот функционал на разных кнопках.

@Alexus1504 3 жыл бұрын

Это уже не верстка, а какое то программирование!