#8 ActiveBox - Верстка сайта с нуля для начинающих | jQuery

[@СергейБуров-м7ж]

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

[@СтаниславГорячев-г1ъ]

Присоединяюсь к вышесказанному

[@lordloamanroy7757]

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

[@andriiSTV]

Смотрю этот плейлист в 2021 году - очень интересно и информативно! Отдельное спасибо за подробные объяснения и примеры разных ситуаций, которые могут попасться на практике! 8-ое видео на одном дыхании смотрю и успешно повторяю!😀

[@webit9026]

13:50 мобильная менюшка 17:50 Jquery for nav 23:07 Sllider

[@specnon1740]

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

[@easypop1345]

Было бы круто, вёрстку магазина видеть. Спасибо

[@ЕвгенийШарапанюк-ю9э]

Дошел до финиша)) огромное спасибо за Вашу работу) Курс топчик) Теперь берусь за mojo и сайт-портфолио (т.к они в свободном доступе) после них однозначно приобрету курс "сайт для транспортной компании". Ещё раз спасибо за Ваш труд!!)

[@АнастасіяГуцалюк-ы6п]

Круто! Сколько не пробовала научится верстке, но лишь по твоим урокам смогла понять саму её суть и то, как всё это работает. Спасибо большое! Смотрю, что первое видео 105 тыс. просмотров, а последнее около 7 тыс. просмотров. До конца дошел не каждый. Но я уже почти у финала!

[@mirov17]

как успехи?

[@elitech3339]

пересмотрел этот курс еще раз. Прикольное разъяснение по jQuery

[@Yakyzzza93]

10Q=) Это действительно толковые уроки, на которых ты практикуясь, понимаешь что, как, зачем и почему!) Большой респект автору за его труды!!!

[@FogDog963]

0:50 время от начала видео, ты так смешно сказал слово "Меню", я прям улыбнулся). Ну просто очень забавно это звучит. А видео уроки реально классные, тебе бы преподавателем работать)) я бы с радостью поучился)

[@iFanat_friends]

дак он вроде как и работает преподавателем, только онлайн)

[@bigdikk1975]

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

[@juraeva4103]

+++

[@zv5585]

Спасибо за курс, добавлю в закладки как шпаргалку.

[@РоманШевченко-ч4ы]

Ну как всегда... Только лучший контент, без соплей и воды.

[@ruslangorbunov1813]

Спасибо за годноту! Даже мне - тестировщику всё предельно ясно и всё получается!

[@MaksutovJunior3]

Спасибо за Ваш труд! Очень полезно и понятно. Побольше бы уроков такого формата и еще курс по javascript было бы вообще супер!

[@ИльгизШарафутдинов-ю4ц]

лайк даешь больше JS!

[@_Fantom_.]

Отличный курс, а этот урок наилучший, спасибо!

[@ildarfatakhov8254]

С JS конечно мало что понял но за урок спасибо

[@yurikosenko4833]

Согласен. Изучаю ванильный JS, там много сложностей, а тут еще и jquery сразу, тяжко)

[@ДмитрийНормов-ю6ц]

@@yurikosenko4833 как успехи?

[@qip7402]

Контент годный!) Хотелось бы увидеть от вас сайт под ключ на каком-нибудь modx, wordpress. Отдельное спасибо за разжёвку JS.

[@iFanat_friends]

есть у него под ключ видос на вордпрес, вроде раньше чем актив бокс) и вышли видосы по ДЖС

[@annapotri]

Огромное спасибо за уроки! Делаю все буква в букву, но с "прыжками на слайдере" так и не справилась. При перезагрузке все равно прогружается второй отзыв на долю секнды его видно. Раз пять все переписывала ((( Наверное, все же что-то поменялось в js. Буду искать ответа. Но не это главное, главно, что я - человек, который никогда не занимался програмированием, а 27 лет работавший юристом, с легкостью понимаю все о чем идет речь, сама делаю сайт, меняю стили и т.д.! Вы талан обьяснения! Огромное спасибо за ваш труд! Процветания! И... надеюсь, вы уже в нормальной для процветания стране ;)

[@ДмитрийКуренков-л3м]

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

[@unskeptik]

Супер! Спасибо за ваши уроки!

[@ИльясСултанов-ж7щ]

Спасибо за ваши уроки, с меня лайк. К моменту на 22:20. Сам только учусь, поправьте меня если я не прав, из-за того что весь код расположен в $(function() {...}); для переменных создаётся область видимости на уровне функции, поэтому все работало.

[@АлексейБлагой-щ1н]

Чуть более развернуто: В js есть 'поднятие переменных', те объявление переменной let nav, которая используется в функциях-обработчиках, условно поднимается на 2 строку кода и успешно захватывается в функции обработчики выше и ниже, в виде ссылки с первоначальным значением undefined, ошибки не происходит из-за того, что переменная не была использована в замыкании до того, как была инициализирована верным значением. Вообще о 'поднятии переменных' видел инфо только касательно var, но похоже для let логика та же, разница только в области видимости.

[@tanyamarushka7251]

Спасибо за курс!

[@agraiskr]

спасибо! скролл не работал с jquery подключонного локально - писал, что не имеет анимате.... подключил jq с гоогла- всё заработало.

[@lrworkaccount7079]

У меня тоже скрол не работает с jquery подключонного локально и подключил и анимате не имеет подключил jq с гоогла тоже не работает.

[@AkciaInterestingSite]

Отлично! Спасибо большое!

[@shohinsalomov6988]

Всё круто!!! Огромное спасибо!!!

[@lonelytalent4298]

Спасибо! Курс годный) Хотелось бы немного видео о wordpress. Было бы очень интересно)

[@fabasay0073]

Привет курс понравился .Продолжай дальше

[@АлексейСтупников-д4у]

Здравствуйте! Благодарю за видео!

[@АлексейСтупников-д4у]

на 29:05 про "прыжок" slidera при перезагрузке страницы

[@serene3d772]

спасибо за отличные уроки!

[@АнтонФедоринчик-г6ф]

Очень круто!

[@romanro8630]

Всё очень круто! Спасибо!

[@artem_ka3863]

Спасибо за годный контент!!!

[@NeedForHeavyMetal]

спасибо за урок!) всё работает!

[@NeedForHeavyMetal]

вродебы как интерпретатор запоминает весь js код по этому неважно где ставить removeClass navToggle . но я новичок, могу ошибаться. пишите почитаю

[@Leon-rv2zm]

22:15 - @BrainsCloud, у тебя все работает (когда переменные объявлены после функции) потому, что запуск функции происходит по браузерному событию, а события срабатывают, т. к. макротаски, в самом конце (см. как работает eventloop). т. е. сначала срабатывает все тело скрипта, включая обычные функции, потом браузер начинает слушать события. Таким образом запуск функции идет в самом конце, после объявления всех переменных. Поправьте меня, знатоки, если я не прав.

[@cryptofluxxx]

С fade: true слайдеру не нужно скрывать вылезающее (overflow: hidden), т.к слайдиться будет простой заменой одного элемента на другой, вместо привычного скролла, так что можно смело делать так: .slick-list { overflow: visible !important; } При этом важно еще убрать overflow: hidden у reviews__slider, оставить только фиксированную высоту (слайдер при этом не начинает прыгать)

[@ДмитрийНормов-ю6ц]

оставить фикс высоту? А если блоки будут разного размера?

[@cryptofluxxx]

@@ДмитрийНормов-ю6ц Уже не помню что было в проекте, поэтому не смогу помочь, извини

[@Bigfootnorm]

Все отлично даже в 22-ом году! За исключением момента с слайдером. Делаю ровно так, как Дмитрий с самого первого урока, но после подключения слайдера отзыв падает под картинку, да еще и коряво. Сами отзывы никак не получилось сделать слайдером. Они отображаются столбиком один за другим. Либо какие-то правила для js изменились, либо у меня коряво получилось что-то, хоть и делал один-в-один.

[@ДмитрийНормов-ю6ц]

просто у тебя коряво получилось...

[@evgeny_5891]

Дим здорово! Респект и важуха, начинал изучить веб 2 года назад с твоих уроков. Только вот насколько актуально в 2019 говорить о jquery? Было бы круто, если бы не jquery, а vue.js например

[@DenisBarbulat]

Чтобы картинка в reviews-ах не обрезалась можно так дописать в css: .slick-list { overflow: visible !important; }

[@jakogross2650]

Добавил, спасибо! Но почему-то при переключении отзыва, сначала появляется обрезанная картинка, а потом уже увеличивается до полного размера, не знаете в чем причина? Как бы срабатывает сначала режим hidden, а потом включается visible...

[@donvanetti4270]

Спасибо за уроки!

[@hondashadow750phantom-penn3]

Привет. Почему ты просто не передаешm id нужных блоков в атрибут href? В чем плюс использования js?

[@realshowcast1362]

Да, тоже жду ответ

[@dmitrid.317]

скорей всего чтобы задать скорость (плавность) прокрутки через JS

[@bolotkermakunov5091]

Спасибо!

[@andreev.andrey10]

22:50 почему может не убираться класс show при скролле? все писал,как в видео.

[@LuckyBobstyle]

Отличный урок , шпаргалка добавлена себе. А можно все что связано с jq повторить в нативном js ? Хотелось бы посмотреть ваше объяснение. Спасибо

[@drfreedom1824]

Еще для плавного скрола можно использовать css, scroll-behavior:smooth

[@nats8159]

Почему-то height: auto; не поправил ситуацию в слайдере. Пришлось задавать в медиа свои height для разных устройств. Причем так, чтобы ничего не прыгало во время загрузки. В конце на видео видно, как происходит прыжок с 1 экрана сайта на текущий. У меня так же. Можно ли это как-то исправить? П.С. Спасибо за этот курс (по-другому назвать не могу). Прекрасно скрасил карантинные будни!:)

[@ВиталийРябенко-з1ь]

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

[@mihavinfo]

Дмитрий, Спасибо вам за ваши труды! Подскажите пожалуйста, как сделать, что бы слайдер прокручивался автоматически?

[@BrainsCloud]

Пожалуйста. В документации есть, почитайте. autoplay: true

[@mihavinfo]

@@BrainsCloud Спасибо!

[@Hande_hoch]

12:20 можно вызывать функцию до того, как прописал эту функцию?

[@krossvayz6500]

9:00 проблема появилась. У меня работает навигация, но шапка не перемещаеться сомною. Как исправить? До этого шапка перемещалась.

[@ИгорьЦирителли]

Дмитрий спасибо огромное за курс!!! Делал сначала MOGO застрял на JS - отложил. Перешел на этот курс, все очень доступно, но застрял на слайдере, подскажите пожалуйста на сентябрь 2022 урок по слайдеру актуален, или что то изменилось?? Или я просто криворук!!??

[@BrainsCloud]

вроде ничего не менялось

[@ИгорьЦирителли]

@@BrainsCloud Не подключается слайдер через HTTPS, скачал на ноут стационарный файл slick.min.js теперь пытаюсь настроить по уроку!

[@rasloy8759]

почему когда я дублирую reviews__item Для создания слайдов, второй отзыв просто пояляется под первым, и ничего не могу с эти поделать. видимо команды для слайдов не применяются, хотя я все повторял как на видео.

[@HISTEL]

+++

[@sauronin2058]

Это божественно!!

[@gvitoss]

Привет, а как можно реализовать несколько видов слайдера? В макете вначале страницы используются один вид стрелочек и навигации по слайдеру, а в конце лендинга уже другие стрелки и отсутствует навигация (dots)

[@BrainsCloud]

точно так же, только для другого элемента инициализируете slick с настройками, а через цсс меняете внешний вид стрелок/кнопок

[@ВіталікФранцішко]

псих, в хорошом смысле слова, как так научится верстать? like1!!!

[@lesyaAsa]

Неlp😭, после того как шапку сделала, ничего не стало работать( бургер меню не открывается, слайде не убирается, так и есть 2е картинки. Как будто JS не работает вообще ( 100 раз все точки запятые и буквы проверила( может от того что я в хроме делаю, что то не срабатывает и не подключается, не пойму(

[@KPACIBO_UA]

16:29 в этом моменте подумал что у меня комп потух хД

[@core748]

Всем у кого возникают проблемы с тем или иным пунктом по JS, перепроверьте АААбсолютно все что вы дописывали в код. Расскажу на своем примере: я был уверен что у меня все написано четко и все-равно не работал Скролл --- оказалось я в html написал DATE-scroll вместо DATA-scroll. Визуально строчные "e" и "a" не сильно различаются поэтому долго не мог найти в чем дело. + не получалось прикрутить Слайдер, он у меня растягивал блок во все стороны, а второй слайд вообще был за пределами страницы, все перепроверил 10 раз.... оказалось забыл подключить слайдер в CSS(((

[@hiddenisland1165]

крутой препод)

[@ferunelli3376]

Я не знаю ответишь ты или нет, но у меня несколько вопросов. Почему везде let и нигде не используешь const? Ведь многие переменные не меняются. А еще почему ты всегда передаешь обычную функцию, вместо анонимной (() => {}). Буду благодарен, если ответишь. Разницы как бы особо и нет, но всё же сейчас так в основном пишут вроде) Спасибо

[@ДмитрийНормов-ю6ц]

у автора много косяков, увы, но это хороший стимул к самообучению и гуглению!

[@ko-games7768]

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

[@BrainsCloud]

в этом уроке есть слайдер

[@ko-games7768]

BrainsCloud хотелось бы слайдер на jquery.

[@dim3143]

На 23 минуте ошибка в логике) Когда мы нажимаем на бургер, тогда сразу появляется переменная nav и класс show. Соответственно когда мы нажимаем на элемент [data-scroll] то переменная nav уже 100% существует с классом show, т.к. без них мы просто элементы меню бы не увидели) . Выносить переменную было не обязательно)))

[@ДмитрийНормов-ю6ц]

у автора много косяков, увы, но это хороший стимул к самообучению и гуглению!

[@вупидискуп]

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

[@EaseMyMindBro]

$("[data-scroll]").on("click", function(event) { event.preventDefault(); let elementId = $(this).data('scroll'); let elementOffset = $(elementId).offset().top; console.log(elementOffset); выдает такую ошибку: Uncaught TypeError: Cannot read property 'top' of undefined at HTMLAnchorElement. (app.js:29) at HTMLAnchorElement.dispatch (jquery.min.js:2) at HTMLAnchorElement.v.handle (jquery.min.js:2) с чем может быть связано и как починить?

[@ЯнаТ-ъ7ы]

У меня такая же проблема(

[@КиноМомент-й9я]

Нашли решение?

[@Aziiim]

Точно такая же проблема

[@alexanderkas3956]

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

[@alexanderkas3956]

или где то не правильно id прописали.

[@webit9026]

чего-то у меня не с новой строки 15:40 ай ай где ж его искать ошибку

[@AnnaCherkesova]

Знаю что поздно наверняка, но те у кого такая же проблема возникла, проверьте, делали ли вы в десктопной версии .nav { display: flex; }, у меня не было, поэтому я дописала там вверху свойство, а в медиа запросе только flex-direction: column;

[@jackdoe1312]

Замучился подключать jquery + slick на Webpack, но я это сделал, все в этом вебпаке немного по-другому)

[@ИванЖуравлёв-м1щ]

Почему со слайдером вообще ничего не получается? Может библиотека не подключилась? Из-за чего она может не подключиться?

[@ЛюдмилаТимофеева-щ7ф]

У меня было из-за банальной невнимательности, я диву rewiewsSlider присвоила класс в место id. Проверьте код.

[@HISTEL]

@@ЛюдмилаТимофеева-щ7ф спасибо огромное, я уже весь код перечитал и если бы не ваш комментарий то хз что бы делал)

[@ЛюдмилаТимофеева-щ7ф]

@@HISTEL Здорово, очень рада, что вам помогло) Удачи в дальнейшей вёрстке)

[@Robbi726]

Дмитрий, а если все работает нужна ли функция checkScroll?

[@biloltuliboev3088]

У меня тоже такая ситуация

[@dim3143]

Это просто перестраховка и демонстрация возможностей джаваскрипта) Функция не обязательна

[@krabik2502]

в reviews у меня на пк и на телефоне бывали слишком большие отступы, оказалось . slick-slide { height: 100%; } просто пришлось поменять на значение "auto"

[@KirillHOMMEVeretnov]

Спасибо большое за уроки! Очень крутые. Если есть возможность, помогите, пожалуйста, у меня, почему-то, в строке "let elementOffset = $(elementId).offset().top;" проблема, в IDE все норм, ошибок не выдает, а когда в браузере начинаю проверять в консоли появляется сообщение об ошибке: app.js:29 Uncaught TypeError: Cannot read property 'top' of undefined перепроверил код, вроде все так же как у вас в уроке, попробовал загуглить, какие решения нашел в интернетах не помогают..не понимаю в чем проблема(

[@Lucasudar]

подозреваю, что ты не туда прописал ссылки в html (не здесь href="#", а здесь data-scroll="#NAME")

[@Aziiim]

У меня тоже также было, оказалось ошибка в: let elementId = $(this).data('scroll'); Слово Id написал как ID

[@xatuky9644]

подскажите пожалуйста что делать если меня на телефоне не работает? Нажимаю на кнопки в меню они вниз не делают

[@yurisamarin8200]

это конечно хорошо но зачем для простого такого скрола джаваскрипт? это все элементарно ж в html есть...

[@ДмитрийНормов-ю6ц]

а плавность и анимация?

[@6095023]

помогите с проблемой: "expected an identifier and instead saw 'let'", не могу никак решить

[@itachiychiha-----1232]

Подскажите пожалуйста почему у меня arrows: folse не скрывает кнопку. Буду очень благодарен.

[@ДенисШувалов-щ1в]

false

[@ИванВерушкин-в7ю]

Скачал вашу вёрстку. Консоль показывает у вас 11 ошибок с JQ, и горизонтальный скролл. У меня тоже горизонтальный скролл есть, при любой ширине экрана.

[@ЕвгенийКожушко-ь9ы]

Записался на курсы по фронт энд, хожу в офис слушаю уроки и т.д. но тут знаний получаю в 10 раз больше! У меня появился вопрос по скролу, в чём смысл писать его через JS если в HTML есть якорные сылки?

[@BrainsCloud]

плавность, анимации

[@ЕвгенийКожушко-ь9ы]

@@BrainsCloud точно, спасибо

[@GANGST1ER]

Переделал весь код под JS. Это не просто.

[@lesyaAsa]

Ошибка CCS2: 1, статус 400, где это искать?

[@lrworkaccount7079]

Олеся здравствуйте. Исправили ошибку?

[@DerAleksey]

ну это же возможно всё сделать только при помощи html и css?

[@osayo3324]

возможно, но выйдет криво, сложно и некрасиво. неужели не хочется учить Js?

[@DerAleksey]

@@osayo3324 ну я так считаю, что нужно стремится к простоте. Ну а вообще изучая JS конечно вижу много возможностей

[@romanro8630]

Правильно что шапку переделали, а то она при перезагрузке страницы в браузере Firefox пропадала)

[@Rasch999]

когда мы создавали li) что-то не видел)

[@Dark_Psiholog]

Мб не у меня одного такая пробелма ? Подключил слайдер , сделал всё, как делал Дмитрий, но функции слайдера не работают let slider = $("reviewsSlider"); slider.slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, fade: true, arrows:false Ничего из этого не работает при этом в консоли нет ошибок. Шо делать....

[@prikuplay]

Сделал все как на видео, все работает, кроме reviews, текст под которыми все равно скрыт под фото((( Помогите пожалуйста

[@prost_3657]

jQuery не умеет работать со стрелковыми функциями?( const checkScroll = (scrollPos, heightIntro) => { }

[@vasiliygorelov8037]

А нельзя сделать так(чтобы автоматически выравнивать наше перемещение по ссылке): let headerFH = $("#header.fixed").height(); if(headerFH == undefined){ header.addClass("fixed"); headerFH = $("#header.fixed").height(); header.removeClass("fixed"); } $("html, body").animate({ scrollTop:elementOffset - headerFH }, 700);

[@Rasch999]

Error: parsing error: Unexpected token header

[@dsim2632]

Дим привет. Знаю, ты не обязан отвечать, но я уже 3 часа не могу понять в чем дело. Я уже сделал ДОМ дерево слайдера 1 в 1 как у тебя, но чертов слайдер исчезает вверху и появляется внизу и наоборот. В итоге у меня двойная высота слайдера и ширина, так как внизу он появляется на позиции - 1170 pх. Я уже хз шо робить. Буду благодарен за хелп....

[@BrainsCloud]

Dextersium попробуйте этот вопрос задать в нашем телеграмм чате - htmlbase

[@dsim2632]

@@BrainsCloud спасибо , задам там

[@iliavasileff]

Тоже потратил очень много времени и всё чего добился -- второй блок просто исчезает, будто покрывается под другим. В элементе кода первому придаётся opacity 0, но на его место второй не появляется. До того как скрывали элементы уходящие за пределы блока, он также был где-то внизу слева. Вам удалось решить эту проблему?

[@dsim2632]

@@iliavasileff решил, напишите мне вечером, скину вам кусок кода

[@iliavasileff]

@@dsim2632 хорошо! Благодарю за столь быстрый ответ!

[@br1st538]

1

[@LegoMasterteam]

Здраствуйте уважаемый Дмитрий Валак! Я вот что подумал, если вы бы вместо jQ использовали "якоря" в html что бы изменилось? С уважением к вам от меня.

[@ДмитрийНормов-ю6ц]

а плавность как сделать? smooth в css плохо еще работает и хз когда норм будет...

[@LegoMasterteam]

@@ДмитрийНормов-ю6ц я не писал в css я писал в js так попробуй) $(function() { // Smooth scroll $("[data-scroll]").on('click', function(event) { event.preventDefault(); let elementId = $(this).data('scroll'); let elementOffset = $(elementId).offset().top; $("html, body").animate({ scrollTop: elementOffset - 70 }, 700); }); });

[@Rasch999]

скроллинга нет никакого) пролистываю страницу, жму download или еще что из этого ряда и перенаправляет в самый верх страницы))) получился скроллинг наоборот)

[@kapkan10]

Печально видеть когда верстальщик в какой-то момент забивает на макет и делает по принципу «и так сойдет». Это я про обрезанную каринку в блоке отзывов и точки. В реальном проекте на этапе дизайн-надзора по этому блоку прилетели бы правки от меня))

[@ASERIA777]

12 мин

[@anixi85]

называется для начинающих, но jquery тут не особо простой в уроке.

[@АбуЗаррФарадей]

Я вообще не понял. тупо повторял

[@doubletalk6611]

Спасибо!

[@Irina_life2022]

Спасибо!