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

[@Александр-ч9б1х]

сначала лайк ставлю, а потом видос смотрю. Спасибо за видосы!

[@ЕкатеринаКутовая]

Позывной 903 ставьте лайки после просмотра видео, иначе ютуб скрутит лайк, посчитав что это накрутка

[@Mykhailo_Vdovychenko]

@@ЕкатеринаКутовая верное замечание, но поидее если вначале просмотра ставишь лайк и просматриваешь видео, то не будет накрутки, ютуб зачтет как норм.

[@zaurelmanovich]

такая же фигня )

[@donvanetti4270]

За год ни одного дизлайка, впервые такое вижу! Контент действительно качественный, спасибо!

[@arcticsnow4847]

сглазил

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

хороший урок! теперь ждем уроки по JQuery и Js )

[@ulugbekkorakhanov547]

Идеальный урок, все разжевано, все ясно и понятно. Никаких вопросов даже нет. Спасибо огромное за труд.

[@Ahmed__123j]

Лучшие уроки кокда либо видел Дмитрий Валак желаю успеха счастья во всем !

[@ksupetrusenko]

Дорогой, Дмитрий! Ваши видео смотрю 100500 раз, уже делаю 10-й сайт. Мой муж программист, но когда он начинает мне что-то объяснять, меня начинает трясти, потому что я ничего не понимаю) Ваши уроки для меня находка. Оказывается все не так страшно) Желаю процветания во всех делах и знайте, Вы супер-человек )

[@BrainsCloud]

Ксения Петрусенко спасибо за добрые слова ) желаю успехов!

[@Aziiim]

Как успехи

[@Sav_agE-c9r]

@@Aziiim у всех всё супер) продолжай!)

[@maga_frank]

Ксения как успехи? Надеюсь не бросили

[@ko-games7768]

Самые лучшие уроки по вёрстки во всём KZbin. По больше бы ещё уроков по Jquery.

[@yevheniidodiak3644]

Подписаны все кто уверены в Вас и на Вас надеяться ☝️ спасибо за время, и практическое понимание чуточку JQuery✅

[@МиколаСвятий]

Смотрю тебя в 2021 году и просто в ШОКЕ, на сколько ты круто рассказываешь. Хотя когда начал писать код на ДЖ, вообще ничего не понятно было(саму логику написания кода, т.к. знакомства и с синтаксисом языка у меня не было). Спасибо тебе большое.

[@agraiskr]

2021 . декабрь - я здесь научился большему чем на очных курсах по месту. Благодарствую!!

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

@@agraiskr уже работаешь?

[@ruslan36ya1]

Для тех у кого событие "load" тоже не работает, автор в следующем видео разбирает эту проблему.

[@alexeymaranin5755]

Я дошел до этого урока и просто в восторге от этого курса! я скину его всем друзьям кто хочет начать верстать, настолько все ясно и понятно, чистейший код

[@antonlashuk2764]

Спасибо, лучший канал на ютубе! Ждем ещё больше контента!

[@АлексейНовосельцев-щ6з]

Ребят, у кого появляются ошибки в js скрипте после подключение, либо дело в последовательности, либо в Brackets. У меня писало $ is not defined, всё перепробовал, все форумы пересмотрел, решил установить visual code и всё заработало.

[@hirdle2103]

@ksixenа он вообще не работает

[@Anastasia-oe1sw]

Здравствуйте! Спасибо Вам огромное за Ваши уроки!!! Прекрасное обьяснение, очень доступно и понятно! Ну и голос приятный, что немаловажно))))

[@Юлия-ю1ф7ш]

Все очень понравилось! Спасибо! Особенно понравился подход к работе с классами: отдельно для css, отдельно для js.

[@tai_sawfly791]

Привет из 2021) смотрю ваши уроки и пытаюсь писать и это действительно получается но у меня Канешн и с костылями)))) потому что не осознаю что и как в каких то моментах работает , а потом озарение) благодарю Дмитрий за ваш профессиональный преподавательский труд) у вас я действительно учусь))

[@georgybakharev4645]

Впервые имею дело с jquery и вообще с JS. Тяжелова-то воспринимать синтаксис. Как бы всё понятно разжевано, понятно что делает каждая строка кода, но сомневаюсь, что смог бы такое сделать, просто прочитав книжку, пусть и хорошую, типа Выразительный JavaScript. В общем спасибо за науку. Приятно видеть человека, который выкладывается на 100%.

[@yuliyapakidzka630]

Спасибо большое за такой подробный , понятный материал!

[@vovave88]

спасибо что объясняете очень доступно. до сегодняшнего дня я ничего не знал о jquery. в итоге какое-то понимание как это работает уже есть)

[@Spectrum.Luxury]

Этот урок был для меня мало понятным так как я незнаком с js но тем не менее я понял как это все работает, очень хорошо изложено, как всегда на высоте. От меня 540-й лайк зашел против 0 дизлайков. Не каждый может похвастаться таким результатом! Продолжай снимать!

[@АндрейГерасимов-ч3у]

Заметил, что при перезагрузке страницы шапка все равно появлялась только после прокрутки. Исправил это, добавив следующий код перед событием: scrollPos=$(window).scrollTop(); introH = intro.innerHeight(); if(scrollPos>introH){ header.addClass("fixed"); } else { header.removeClass("fixed"); } P.s. спасибо за видео!

[@minutes210]

Спасибо дружище, без этого не работало

[@sigvist6228]

там проблема в самом методе load. Он почему-то срабатывает через раз или вообще может не срабатывать 5 раз подряд. Я пока что не понимаю поведения этого события load. Ведь по идее он должен срабатывать каждый раз как ты перезагружаешь страницу, а у него будто бы сбой в системе случается. Возможно это баг

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

@@sigvist6228 ну что, разобрался с load ?

[@lonelytalent4298]

Спасибо большое! Познавательно и без лишних слов. А то на ютубе как начнут из пустого в порожнее))

[@romanro8630]

Большое спасибо! Очень круто всё! Дизы ставят завистники))

[@EUC_Novak]

🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟

[@maga_frank]

Незнаю jQuery но знаю js, и я продолжаю делать на нём. И это круто)

[@наталиворон]

Благодарю тебя за то что ты делаешь!!!

[@РоманСавосько-х1к]

И на этом уроке начали кипеть мои мозги!))))) А так курс бомба!

[@shubor1091]

Надо продвигать сей канал! Побольше комментов господа.

[@andreystepanov982]

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

[@BrainsCloud]

Возможно, время покажет

[@НискемкромеСовести]

Отличный ролик. Наконец JS.

[@Димитрий-п1к]

0 дизлайков. Профессионализм,ничего лишнего.

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

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

[@Lets_Play_Chess]

Дякую , за корисні уроки) Все зрозуміло пояснюєш.

[@domovikx_by]

Одно НО. вместо let желательно указывать const. Есть правило: вначале везде использовать const и только при необходимости писать let. В итоге код можно привести примерно к такому виду: $(() => { const header = $('#header') const intro = $('#intro') /** header--fixed */ $(window).on('scroll load resize', () => { const introH = intro.innerHeight() const scrollTop = $(window).scrollTop() if (scrollTop > introH) { header.addClass('header--fixed') } else { header.removeClass('header--fixed') } }) })

[@AlDAan17]

А не знаешь из за чего jquery выдает ошибку srollTop is not a function? как раз из за let? ибо код 1 в 1 как в видео:(

[@Олег-з3с7г]

Все круто! Идем дальше)

[@SatUluBah]

Просто Лайк и Коммент в придачу)))

[@StoryForgeArts]

*Cпасибо за урок. Буду дальше изучать JS что бы лучше понимать логику кода*

[@yardcsgo2428]

Ты лучший, самый лучший ютубер

[@BrainsCloud]

хе, спасибо )

[@aleksandrsrudkevics6384]

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

[@ichelsea]

Спасибо большое за обучающие ролики)

[@Даниилданилов-ы3б]

Огромное спасибо за помощь!

[@_Fantom_.]

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

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

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

[@regi_volf3631]

продолжайте буду смотреть с первой части и делать сайт

[@sergstrue362]

лайк!!!! без тени сомнения!

[@lemonchik3905]

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

[@ДмитроРубець-ж4в]

У меня такая же проблема. Когда обновляешь ниже intro, появляется, скролишь вверх не исчезает(

[@serene3d772]

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

[@artem_ka3863]

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

[@vladubiriya8497]

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

[@kirillkononov5094]

Добрый день! Спасибо за подробный урок. Посмотрел до донца и сейчас буду еще раз просматривать и повторять. Но, не избавился от вопроса: в CSS есть Position: fixed. Почему использовали JQuery а не решили эту задачу при помощи CSS? еще пожелание: у Вас получается очень хорошо объяснять, может быть вы к ActiveBox доделаете еще несколько уроков - "как "натянуть" на CMS"? WP или October (Ваш BrainsCloud.ru ведь на October CMS.

[@ДмитрийДенисенко-ъ7ю]

Не ожидал два видео сразу)

[@ВаняПереседов-ы4ы]

Первый раз вижу чтобы за 15 к просмотров не было ни одного диза:)

[@lesyaAsa]

Все ок, нашла сама как подключить файл js, проблема в этом была)

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

Конечно подписался. На такой годный контент не подписатся невозможно.

[@dsim2632]

Смотрю твое видео, 22:00 минута и у меня только один вопрос - Да откуда он все это знает, что и когда нужно применить ? Есть видос где ты рассказываешь свою историю, с чего начал, где и как учил, сколько ушло времени. Мне было интересно узнать.

[@BrainsCloud]

Такого видео нет

[@dsim2632]

@@BrainsCloud Может как то время стримчика расскажешь ? Думаю всем интересно будет.

[@BrainsCloud]

@@dsim2632 Если такой вопрос будет, то да

[@dsim2632]

@@BrainsCloud А когда следующий стрим ? Я задам )

[@BrainsCloud]

@@dsim2632 еще не знаю, может в пятницу

[@hotDelights_]

Thank you for the lesson) 🔥

[@Nikkkant]

Всем привет подскажите на ошибку. В теги head поместил тег script src=" " положил ссылку а потом в конце написал путь к папке app.js через тот же script src=" " всё сохранил и перехожу в app.js пишу $(function() { console.log("rabotaet"); }); сохраняю и появляется ошибки подскажите что не так, если это мало информации напишу в личка. Буди благодарен за помощь.

[@BKLG]

Привет, решил проблему?

[@AkciaInterestingSite]

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

[@ivanovivan3681]

Чтобы команда load работала в firefox, нужно переписать код так - $(window).bind("scroll load", function(). Заменить on на bind. В хроме новый код также рабоает)

[@Артур-х5ы9щ]

Спасибо!

[@megafyrnd]

Дмитрий, в предыдущих видео ты сказал, что мы будем скролить шапку. Я тогда решил сразу попробовать, и сделал это через css, единственное в чем я тогда не разобрался, как background тоже тянуть за собой. Вопрос. Ты показываешь это в js просто чтобы показать, как работать в js? Или это оптимизация ненужных телодвижений в css? Т.е. можно ли сделать это в css физически и если да не будет ли это считаться детским лепетом тратой времени в глазах опытных фронт энд разработчиков?

[@ГригорийБородин-н2к]

То что уже некоторые моменты апдейтнулись, это 100%.У меня без прописи load, шапка не исчезала при обновлении страницы ни в одном из 4-х браузеров.

[@kostyalopuh955]

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

[@walterlexxx]

527 лайків 0 дизлайків - це показник якості і потрібності відео. Дякую!

[@kpn9536]

Помогите Что делать, если при написании конструкции $(function() { }) ; Выскакивают ошибки 1. '$' was used before it was defined. 2. Expected exactly one space between 'function' and '('. 3. Missing 'use strict' statement.

[@ФедяУглов]

разобрался ?

[@dmitrycathari3607]

такой же фейл. в чем проблема?

[@bloodywulf626]

Та же ошибка, разобрался кто?

[@egoraizer2792]

@@bloodywulf626 Да, необходимо было сохранить HTML файл

[@PierreDunnio]

Сохранение не решило проблему. Кто-то может помочь?

[@inkidgd5988]

Здраствуйте, Дмитрий! Очень качественные и полезные уроки, спасибо! Есть вопрос, как называется плагин, который вам даёт подсказки для javascript? А то я скачал JavaScript Completions, но он даёт много бесполезных подсказок, и скорее мешает, чем помогает.

[@BrainsCloud]

Для js я ничего не ставил кроме brackets-eslint

[@inkidgd5988]

@@BrainsCloud Понял, спасибо!

[@slava_po]

Браво!

[@Yakyzzza93]

не, ну смотреть этот канал и не подписаться... это не комильфо, товарищи!=)

[@РафаэльБ-ш4в]

Крутотааа!

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

6:48 И тут мне Brackets выдал много ошибок и в браузере (console) не было надписи ... Вывод: в отличии от *css и *html , перед просмотром *js надо сохранять и тогда brackets не будет выводить ошибок и в console будет отображаться корректно )

[@ВікторКозак-щ1л]

спс чувак, спас ) я то думал хули не так у меня:/

[@itsmine5288]

Не работает

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

Егор Никитин возможно ошибка у тебя в коде, ищи, сверяй, проверяй и да прибудет с тобой сила 💪

[@itsmine5288]

@@СергейБуров-м7ж главное высоту 750 не пишет написано undefined ,а scroll 0 выдает

[@itsmine5288]

@@СергейБуров-м7ж вы продолжаете заниматься?

[@denvudd4492]

Подскажите почему при скролле там где фото на весь экран(блок works) и когда доходит до фото с блока reviews хэдер опять пропадает и появляется после того как проскролил эти участки?

[@KanalReal]

спасибо!

[@elitech3339]

охренеть какой урок прикольный

[@netmoemail]

Чувак ты крут!

[@dsim2632]

А что лучше тогда использовать для больших проектов, вместо JQuery ?

[@BrainsCloud]

чистый js

[@dsim2632]

@@BrainsCloud спасибо )

[@romadzzzn]

хорошие уроки.(лайк)

[@АндрейГалкин-ш8х]

Дмитрий, здравствуйте! Вопрос: При перезагрузке страницы без последующего скролла (значение 0) шапка видоизменяется. Далее при любом скролле (меньше 750 px ) выполняется скрипт и js возвращает шапку в первоначальный вид. Подскажите пожалуйста, как в условии исключить выполнение скрипта в значении 0 ( при первоначальной загрузке страницы) . Надеюсь изложил понятно! Курс замечательный!

[@dim3143]

А почему в CCS создаются селекторы .header .fixed{ position: fixed; } Не правильнее было бы их напрямую из JSa присваивать элементам?

[@LiveAkaLive]

Посмотрел до момента 12:33 Выдает при сохранении и попытке посмотреть в коде сразу 5 ошибок: 1 '$' was used before it was defined. $(function() { 1 Expected exactly one space between 'function' and '('. $(function() { 3 Missing 'use strict' statement. let jsheader = $("#jsheader"); 3 Expected an identifier and instead saw 'let'. let jsheader = $("#jsheader"); 3 Stopping. (30% scanned). let jsheader = $("#jsheader"); ESLint (1) 3 ERROR: Parsing error: Unexpected token jsheader let jsheader = $("#jsheader");

[@ЕрасылШаймуратов-щ5в]

Так же

[@ЕрасылШаймуратов-щ5в]

Смог решиттт?

[@LiveAkaLive]

@@ЕрасылШаймуратов-щ5в взял в сети другой пример скрипта

[@СергейСидоренков-ш4д]

Я подписался!)))

[@tahirgarayev6224]

почему то Файрфокс не воспринимает load после scroll и не показывает ленту навигации

[@kabelardoditensio7802]

код пишу в app.js на в первых 2х строчках 9 ошибок и ничего не работает( Видимо версии уже другие jquery и нужно по другому как то писать код(

[@lesyaAsa]

Привет! Код проверила, все правильно. Библиотеки JQ в разных вариантах подключила, ничего не работает(. Может надо как то файл app. js eще в HTML подключить сначала? Всю голову сломала, не получается😭

[@BrainsCloud]

конечно надо, после jq

[@Ahmed__123j]

Дмитрий здравствуйте можно Адаптировать сайт добавляя медиа запросы от себя, но тоесть задавать свои breakpoint ?

[@BrainsCloud]

да

[@eeddeellwweeiiss]

Ты крут!

[@DerAleksey]

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

[@osintervalproject5636]

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

[@dim3143]

Если сначала загрузится скрпит, то на строчке header.addClass("fixed"); возникнет ошибка, т.к. элемента header еще физически не существует и присваивать класс пока что нечему. И только после прогрузки всех элементов можно будет выполнять с ними какие-то манипуляции.

[@АлексейФедоров-я4ц]

Почему то у меня после добавления события "load" ничего не пожелало меняться ((. И местами менял, и кавычки другие ставил, даже отдельно блок копировал. Так и не разобрался в итоге))

[@darklight7167]

У меня вообще через раз работает, то есть раз перезагрузил - вышло, второй раз перезагрузил - нет, потом раз на 5 опять выходит...

[@ЕрасылШаймуратов-щ5в]

Возможно нужно писать add class а toggleClass

[@nenuasho905]

Как сделать плавное отображение шапки при скролле? И можно ли вообще так сделать?

[@aisultanzhaksytayev9002]

Этот коментарий создан в качестве уважения автору и для продвижения его канала.

[@ДаниилЧернавин-ь1о]

Поставил 748-ой лайк. Еще нет ни одного дизлайка!

[@POLUKOROB]

не одного дизлайка....ты что , бог ?

[@helios8567]

А если без переменной? if(scrollPos > $('#header').innerHeight()) В таком случае отпадают ошибки из за перезаписывания переменных.

[@okitax9780]

Если у кого-то не работает скрипт, попробуйте подключить его в header после подключения библиотеки jquery (а не в body как показано в видео)

[@krossvayz6500]

Здраствуйте. Можно с вами как-то св"язатись ?

[@AntonBoroda762]

Круто 👍🏽. Но ничего не понятно 🙈

[@exerdverser1616]

Все сделал как у вас, но почему-то команда load просто игнорируется и при перезагрузке страницы шапка не появляется, пока не начнешь скролить. В чем может быть проблема? Причем в гугл хроме такого нет, а вот в опере почему-то так

[@Max-ye9lg]

у меня тоже самое в хроме

[@ДмитрийТерзинов-б6о]

Ребята, помогите! Выдает ошибку $ was used before it was defined, какрешить, сохранение и подключение к новым библиотекам не помогает

[@Nalesc]

забей на ошибки, в браузере все равно работает

[@ilyaponomarev9279]

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

[@TheBaurak]

Можно этот шаблон к себе в портфолио положить?

[@BrainsCloud]

Почему нет

[@ЕвгенийШершов]

А у меня шапка при обновлении страницы даже без скролла остается висеть? это нормально? Даже без добавления load?

[@alexlisouski4069]

так должно быть - класс fixed работает