Для тех, у кого кнопка не сработала: В видео использована устаревшая (depricated) технология обращения к элементу. По хорошему скрипт надо было начинать с объявления функции, запускаемой после завершения загрузки страницы. И потом создавать переменную по id и вещать на неё обработчик. window.onload = function() { // ждёт загрузки документа var menu = document.getElementById('menu'); // создаёт переменную по id кнопки ... и далее, уже как автор написал. Иначе получается так, что новички не понимают почему в одном случае было обращение по id, а в другом нет. Не говоря уже о программистах, которые будут на автомате искать, где переменная menu была объявлена и инициализирована. Поднимите лайком вверх, пожалуйста, чтобы другие увидели.
У меня в итоге вот так заработало. Кто шарит может подскажет что я тут неправильно сделал, хоть и работает? window.onload = function menuF() { var menu = document.getElementById('myTopnav'); menu.onclick = function myFunction() { if (menu.className === 'topnav') { menu.className += ' responsive'; } else { menu.className = 'topnav'; } } }
@@tonze916 Всё правильно ты написал. Твоя функция menuF ждёт загрузки страницы. Т.е. при обновлении страницы загружается html, стили, картинки и когда всё готово - срабатывает window.onload - он и запускает твою функцию. Она в свою очередь ищет на странице элемент myTopnav и вешает на него клик.
Я что именно есть новичок, многих пересмотрел, но именно по твоим видео добился объективного понимания HTML CSS и сдвинулся с мертвой точки. Лучшие уроки, но с псд интереснее. Спасибо за твой труд.
Чтобы лишние ветвления не расписывать js можно сократить таким образом: window.onload = function(){ let x = document.querySelector("#myTopnav"); document.querySelector("#menu").onclick = function(){ x.classList.toggle('responsive'); } } и присвоение дом элемента в переменную лучше вынести за пределы обработчика клика, чтобы каждый раз элемент не присваивать. А вообще урок отличный, вернулся чтобы освежить знания после долгого отсутствия в верстке - то что надо.
Автору спасибо за урок. Сейчас завершил обучение основ html/css/js по codecademy . По идеи надо верстать свой сайт, а дикий затуп и не могу сдвинуться с места - не могу понять в какой последовательности и как лучше делать. Открыл видео и давай по руководству - вообще норм. Практика, набивка руки и прочее. Главное что понимаю всё что делает автор, просто пока нет почти опыта не могу с нуля из головы сам воспроизвести. Единственное что урок не для новичков прямо. Что бы зашло - надо знать основы.
ОГРОМНОЕ ОГРОМНОЕ СПАСИБО !!! Я ПОДУЧИЛ ОСНОВЫ HTML, CSS КАК РАЗ НУЖНА ПРАКТИКА !!! БОЛЬШОЕ СПАСИБО !!! ЖЕЛАЮ ТЕБЕ ВСЕГО САМОГО НАЙЛУЧШЕГО !!! ОБОЖАЮ ВЕРСТКУ !!! БУДУ РАД ТАКИМ УРОКОМ В БУДУЩЕМ !!!
Огрмное спасибо тебе! Твой канал уже стал моим основным источником веб верстки! !!! Хотелось бы реально крутой гайд flex + css grid совместная верстка этих технологий учитывая нюансы каждого !
Я часто использую % для padding и mergin ну это привычка, так же для font-size использую vw чтобы текст был адаптивным. Это хорошая практика или лучше так не делать ?
я просто перед тем как добавлять медиа изменил собаку. вот этот момент @media. Как я это сделал,я написал это слово в браузере и скопировал в код и все заработало.
Планировал за эту неделю посмотреть пару видосов по верстке сайтов, чтобы исправить свои ошибки(лишние стили). И тут уведомление от тебя. Как раз твою и посмотрю :) жду продолжения! Возможно меня помнишь, я давно слежу за твоими видосами:)
Ребята, все работает. Внимательно смотрите, что напечатали. Тоже ничего не получалось, не кликалось, скрипт не присваивал класс responsive, нашел ошибку - начал присваивать, но все равно не открывается. Ошибка была в css в название класса. Полчаса убил на то, что бы исправить свои ошибки, но в итоге все отлично работает. Если у вас не работает, но вы все делаете точно как автор - значит что-то вы написали не так, где то ошибка, какая я то пресловутая лишняя буква е.
Откуда взялся класс responsive во второй части урока?=) как сделать меню по центру относительно картинки, когда скрли заначек меню визуально выглядит не по центру..
Спасибо за урок! Лично мне всё понятно и легко выполнимо из данного урока, при том что я новичок (ни чему не обучался). Не понимаю почему люди жалуются что этот урок не для новичков, в видео же не собирают адронный коллайдер...
Я переписал весь код, но когда нажимаю просмотреть код страницы и хочу изменить размер экрана ничего не пройсходит. В чем проблема? Все проверил, названия классов и id.
Ребята у кого не работает меню при изменении разрешения ниже 768px. В тег нужно вставить мета тег для работы responsive. Просто автор об этом не упомянул т.к. думает что новички должны об этом знать. Я тоже не сразу понял почему не работает потому-что только начинаю путь верстальщика. А вставить нужно вот этот тег . Еще раз говорю вставить нужно в тег
Урок годный. Спасибо за подробности. Было бы замечательно еще прикрутить гитхаб, чтобы увидеть готовый образец для определения синтаксических ошибок у себя.
Мне очень понравилось, актуально, сайт выглядит современно и живо даже в самом начале! Но мне, как новичку, хотелось бы более разжевано касательно тегов :D И БЫЛО БЫ ОООЧЕНЬ ЗДОРОВО, ЕСЛИ БЫ К ВИДЕО БЫЛИ ПРИКРЕПЛЕНЫ ЭТИ ФАЙЛЫ С КОДОМ, ЧТО ПОЛУЧИЛИСЬ В ВИДЕО
+Vladislav Yuzhakov моя идея заключается в том что б вы параллельно со мной писали код, поэтому файлы не выкладываю. Касательно тегов это если встречается какой то незнакомый то сразу хтмл бук открываешь и узнаешь в чем дело. (Если вдруг я не объяснил)
Web Developer Blog я вот пишу с вами а толку, js в данном видео не работает((( я его три раза перепечатал... ненравится ему mytopnav, меню не открывается ( я новичок вообще не понимаю что и как( был бы исходник хотя бы js у меня бы все работало, или не работало но не по моей вине. А так я не знаю что щас и делать, дальнейшее видео у вас основаны на этом коде, а он не рабочий( как учится дальше если уже не получаетчя... пойду смотреть чужие видюшки... хоть за subilme text спасибо очень приятно печатать
Спасибо за видео, но есть вопрос... Как Вы демонстрируете всё получилось, но почему когда меняешь масштаб в симуляторе toggle device toolbar(инструмент в chrome), адаптив не работает?
пересматривал пересматривал, комментарии перечитывал, пробовал всё что писали, и всё равно кнопка не реагирует, в вертикальное меню не переходит, в горизонтальное появляется
Спасибо за урок, только в js пробел перед responsive всё равно не помог. При нажатии на иконку меню по прежнему отображается горизонтально и без стилей.
Здравствуйте! спасибо за лекцию. У меня следующая проблемка: все сделал как сказано, все вроде то-же, но вот при переходе на "респонсив" ничерта не меняется в меню. При любой резолюции меню полностью остается на экране. Проверил все построчно. В чем проблема, подскажите? P.S. Редактор выдает ошибку в JS коде о нехватке ";" в двух последних строках после "}" Я знаю что JS добавляет их по умолчанию и все же стоит это отметить. Заранее спасибо!
А можно вопрос? Это что за картинка такая, что при применении к ней стилей фон самой картинки меняется, а сама надпись белая остаётся? Я сейчас в пэйнте взял фон с этой картинки, на нём сделал надпись белым цветом, сохранил её также в png и вставил за место этой - так у меня фон серый так и остался, по бокам только чёрный стал, где картина уже кончилась. А с этой картинкой всё как у вас - вся картинка чернеет.
Меню слева не открывается при нажатии на иконку, всё переписано правильно даже пробел поставлен но всё равно не работает. В коде в Elements topnav меняется на topnav responsive, но нечего не происходит. Подскажите что надо сделать как исправить.
ПОМОГИТЕ! Не понял как по началу с папками. Я создал Парки css, js, img и закинул в них файлики, но когда начал сохранять они сохранялись не в папках, а просто в общей папке. Ещё не выходит это меню. Код сверял несколько раз всё правильно, но само меню не находится под логотип, а рядом с логотипом! И ничего не происходит. В чем проблема? Пытаюсь разобраться
поставил свое лого с размерами 2560х421 пиксель, и оно выставилось по центру ну согласно justify-content: center;, но не адаптируется под изменение размера экрана, т .е. левая сторона улетала куда то, правая отображается только при прокрутке с помощью нижнего ползунка, как это поменять? что изменить? чего добавить? подскажи пожалуйста
короче привет из 2019!!! я не понял откуда взялся responive к какому тэгу его надо было привязать, подскажите. в коментах есть этот вопрос но никто не ответил на это
Почему в определении стилей для меньшего размера экрана, пишется именно .topnav a.icon, а не .topnav .icon .Проверил работает только с указанием тега , но почему, не понимаю?
Все получается при безукоризненном следовании за Вашими инструкциями. Но остается вопрос: откуда появляется класс responsive? Его назначение и логика применения?
Здравствуйте. Напишите пожалуйста, берете ли на обучение онлайн или посоветуйте пожалуйста хорошие курсы и дальнейшим трудоустройством! Заранее спасибо!
cпасибо за урок! подскажите, пожалуйста, почему у меня не отражается бургер меню ☰ и второй вопрос, подскажите, продолжение к этому уроку, а то начинаю гуглить выдает кучу всего интересного и я начинаю начинать параллельно еще кучу других( хочется этот пройти до конца
Нет нет извини я не про то что именно я новичок )) Есть более подробное видео о таких делах и углублено на столь что более понятно . Я бы что то добавил и посоветовал ...
А мне вот наоборот кажется, что именно для новичков, ну, если конечно учитывать, что слова "переменная" и "html/css" не пугают и не вводят в ступор. Наоборот, очень мотивирует сидеть и ковырять в справочнике(тот же htmlbook.ru), то что не знакомо или плохо понимаешь. Отличный урок, хотя JS для меня пока темноватый лес, но ни чего сверх непонятного я не нашел, у автора на удивление приятная и простая подача. Жду продолжение, автор молодец! Спасибо!
Спасибо за видео! Я новичок в HTML, CSS. Прочитав пару-тройню статей "слепил" примерно за дня 3-4 первый свой маленький информационный сайтик для новичков, кто хочет научиться программировать микроконтроллеры.. Верстал как умел. Все блоки создал не по правилам. Просто в создавал "content1.......6", задавал им нужные размеры, пихал в них картинки, текст, ссылки на скачивание софта по программированию, справочников и т.д. Есть простенькое меню. И вот после этого видео, понял как безграмотно я всё делал. Но как говорится - "Зато сам!" Теперь у меня будет настоящий правильный шаблон. А как найти Ваше следующее видео? Или как оно будет называться, для поисковика на TH-cam? Ещё раз спасибо Вам!
@@SuprunAlexey Благодарю! Но я как и в училище, привык к одному преподавателю. Не любил когда было - один день один преподаватель, другой день другой преподаватель. К тому-же Вы очень понятно и просто объясняете. Ещё я начинаю понимать как пользоваться "джала-скриптом" (не знаю, правильно я назвал эту фишку?). А вот может Вы мне поможете. У меня пока, для меня нерешаемая проблема!!! Я уже на трёх разных видео задавал этот вопрос, но мне почему-то ни кто не ответил. Тема - вывод изображения на страницу сайта. У меня выводится только иконка (указывающая, что это изображение), и сопровождающий текст к картинке. Писал код прямо с видео, строчка в строчку - результат "FALSE". Если вывожу картинку из нета - через ,
Урааааа!!!!! Сам допетрил - нашёл ошибку! Ошибка банальная. Я в названиях изображений указывал формат расширения. Пример: Ford_Mustang.jpg. В коде в директории так-же писал. Я вообще-то очень упрямый, сидел сейчас и перебирал ещё возможные варианты. Решил у одной из картинок убрать расширение. Пример: Ford_Mustang. И всё, СУПЕР!!!!! Во всех источниках говорилось только - главное условие, что название файла должно совпадать в точности с прописанным названием в директории в редакторе кода. А вот оказывается редактор капризный товарищ. Он любит, чтобы название было простое, типа "Вася_Пупкин" - без всяких там jpg, png, gif.
Привет, урок хороший, много узнал, но не выходит, как у вас. Я изменил лого на свой. При уменьшении экрана, значок меню уходит под ссылку Главная и ничего не открывает. Код вроде верный, никаких ошибок не подсвечивает.
Понимаю, что прошло много времени, но вот только сейчас начал учить и столкнулся с проблемой. Хоть кнопка и работает, но при сужении экрана она остаётся уже в невидимой части экрана и добраться до нее можно только горизонтальной прокруткой. Что я делаю не так? Код сверял несколько раз!
у меня не появилась графическая иконка ☰ я незная как его еше добавить пытался сделать его блочным параметры, сылку на иконку дать не получается (чтобы туда в место ☰ этого не поставил изчезает как в бермутском треугольнике )
09.23 Вы присваиваете классу лого свойство флекса justify-content,говорите что оно выравнивает элемент по горизонтали.В других источниках justify-content - это выравнивание по ГЛАВНОЙ оси(которая может быть и вертикальная),задаеться свойством flex-direction.Получаеться можно принебречь свойством flex-direction и сразу задать justify-content и это будет выравнивание по горизонтали ? Спасибо
Здравствуйте, вот такой вопрос. У меня в яваскрипте в первых двух строчках ( menu.onclick = function myFunction(){ var x = document.getElementById("myTopnav");) выводит целых 12 проблем (например, "menu is not defined.[no-undef]")/ Как решить эту проблему? Как я понял, надо что-то сделать с "menu" и "document"
Блин, я пол часа искал ошибку в том что у меня @media screen and (max-width: 768px){...} было написано вот так @media screen and (max-width: 768px;){...}. Из-за вот этой хрени ' ; ' всё не работало, автору спасибо за отличный урок))
Мне вот интересно, я задал общий стиль всем элементам на странице через *box-sizing:border-box , а не конкретному элементу. Так можно было или все таки это не совсем было верно в конкретном примере?
мы его прописали в js , то есть если у нас мы нажимаем на кнопку (а соотвественно это происхлдит когда экран маленький ), то этой кнопке мы присваиваем класс responsive, а для него уже прописаны стили, ну я так понял
Помогите пожалуйста! проблема с меню все сделал правильно по видео но вот место меню выводит просто сам код но никаких вкладок меню блог проект не выходит перепроверил много раз код написан грамотно !
Честно видео хорошее. Всё понятно и доступно, но... Верстка без макета всё равно как-то даже не знаю. Лучше показывать на живом примере когда видишь, что должно быть и что получается в процессе. Насчёт идеи уроков по фреймворкам, их уже давно куча в ютубе. Лучше развивай уроки вёрстки именно на Flexbox т.к. таких видео практически нет. Ну и про названия тоже соглашусь, что нужно называть вещи своими именами. Можно записывать уроки применяю тот же БЭМ про который все много говорят, но никто не учит))
Добрый вечер. Надеюсь поможете. Когда при нажатии на кнопку меню была ошибка, после чего вы вставили пробел перед responsive всё заработало, у меня не работает, как это исправить?
Для тех, у кого кнопка не сработала:
В видео использована устаревшая (depricated) технология обращения к элементу.
По хорошему скрипт надо было начинать с объявления функции, запускаемой после завершения загрузки страницы. И потом создавать переменную по id и вещать на неё обработчик.
window.onload = function() {
// ждёт загрузки документа
var menu = document.getElementById('menu'); // создаёт переменную по id кнопки
... и далее, уже как автор написал.
Иначе получается так, что новички не понимают почему в одном случае было обращение по id, а в другом нет. Не говоря уже о программистах, которые будут на автомате искать, где переменная menu была объявлена и инициализирована.
Поднимите лайком вверх, пожалуйста, чтобы другие увидели.
Как тогда правильно писать? Многие, в том числе и я не понимают что делать
++, вообще ничего не понял
У меня в итоге вот так заработало. Кто шарит может подскажет что я тут неправильно сделал, хоть и работает?
window.onload = function menuF() {
var menu = document.getElementById('myTopnav');
menu.onclick = function myFunction() {
if (menu.className === 'topnav') {
menu.className += ' responsive';
} else {
menu.className = 'topnav';
}
}
}
@@tonze916 Всё правильно ты написал. Твоя функция menuF ждёт загрузки страницы. Т.е. при обновлении страницы загружается html, стили, картинки и когда всё готово - срабатывает window.onload - он и запускает твою функцию. Она в свою очередь ищет на странице элемент myTopnav и вешает на него клик.
@@barakuda2475 TonZe написал тут в ответах полную версию, как должно быть :)
Я что именно есть новичок, многих пересмотрел, но именно по твоим видео добился объективного понимания HTML CSS и сдвинулся с мертвой точки. Лучшие уроки, но с псд интереснее. Спасибо за твой труд.
Стал объяснять что-зачем делаешь и какой эфект - огромная благодарочка)
Рад что вам понравилось
Чтобы лишние ветвления не расписывать js можно сократить таким образом:
window.onload = function(){
let x = document.querySelector("#myTopnav");
document.querySelector("#menu").onclick = function(){
x.classList.toggle('responsive');
}
}
и присвоение дом элемента в переменную лучше вынести за пределы обработчика клика, чтобы каждый раз элемент не присваивать. А вообще урок отличный, вернулся чтобы освежить знания после долгого отсутствия в верстке - то что надо.
можно конечно
спасибо, с твоим кодом все работает
лучший комент! С toggle работает правильно, а не только разворачивает меню.
Делал точно за Автором. Все получилось с первого раза. Большое спасибо! КРУТЫЕ УРОКИ! Все ясно и понятно!
Автору спасибо за урок.
Сейчас завершил обучение основ html/css/js по codecademy . По идеи надо верстать свой сайт, а дикий затуп и не могу сдвинуться с места - не могу понять в какой последовательности и как лучше делать. Открыл видео и давай по руководству - вообще норм. Практика, набивка руки и прочее. Главное что понимаю всё что делает автор, просто пока нет почти опыта не могу с нуля из головы сам воспроизвести.
Единственное что урок не для новичков прямо. Что бы зашло - надо знать основы.
Pavel Zakharov ну что, есть продвижение?)
Спасибо тебе огромное, вот так можно легко научиться, все обьясняешь,что зачем.
Красавец, ты лучший, смотрю после уроков хауди хо, все понятно
Спасибо большое за это видео! Все быстро, четко и очень понятно!
ОГРОМНОЕ ОГРОМНОЕ СПАСИБО !!!
Я ПОДУЧИЛ ОСНОВЫ HTML, CSS
КАК РАЗ НУЖНА ПРАКТИКА !!! БОЛЬШОЕ СПАСИБО !!! ЖЕЛАЮ ТЕБЕ ВСЕГО САМОГО НАЙЛУЧШЕГО !!! ОБОЖАЮ ВЕРСТКУ !!! БУДУ РАД ТАКИМ УРОКОМ В БУДУЩЕМ !!!
Ну чё? Прошло почти год) Как дела?)) Верстаешь уже сайтики?)
@@ALexander_Fes а как же js, jquery?
@@peregrint тоже нужны
Все отлично, но мне как новичку, маловато пояснения по командам, (что они делают?) а так очень все поучительно. спасибо
Неплохо. Особенно нравится формат уроков, нет воды - все по делу. У +Web Developer Blog мозг работает на 147% :)
Задолбалась искать продолжение.
Спасибо. Я бы сравнила тебя с богом, потому что просто и понятно все показываешь. Золотой человек
Огрмное спасибо тебе! Твой канал уже стал моим основным источником веб верстки! !!! Хотелось бы реально крутой гайд flex + css grid совместная верстка этих технологий учитывая нюансы каждого !
Очень круто и понятно обьясняешь!!!!!я думал мой частный тренер интересно и понятно объясняет,но я ошибся.
Зачёт!!!!!спасибо.
Наконец то увидил верстку быструю, как пример, ясно как усе работает , спасибо ну и подписка
Чистый JavaScript без jQuery в наше время становится редкостью. Плюсик
Стараемся
Я часто использую % для padding и mergin ну это привычка, так же для font-size использую vw чтобы текст был адаптивным. Это хорошая практика или лучше так не делать ?
Вроде все понятно, спасибо потихоньку продвигаюсь, главно ПРАКТИКА а понимание придёт)
Не получается,
когда уменьшаю экран и нажимаю на меню и ничего не происходить
у меня тоже самое хотя я код слово в слово переписывал
даааа у меня получилось
я просто перед тем как добавлять медиа изменил собаку. вот этот момент @media. Как я это сделал,я написал это слово в браузере и скопировал в код и все заработало.
Тоже самое. Кнопка не работает. Перепробовал советы к данному комментарию, но ничего не заработало...
@@РоманИльенко-р9щ пробелы смотри в style.css
Планировал за эту неделю посмотреть пару видосов по верстке сайтов, чтобы исправить свои ошибки(лишние стили). И тут уведомление от тебя. Как раз твою и посмотрю :) жду продолжения! Возможно меня помнишь, я давно слежу за твоими видосами:)
О отлично, да помню! Спасибо!
Всё работает, кроме одного: меню при уменьшении экрана не встает слева. Где-то не догоняю :(
Классный урок) От начала до конца смотрел и писал код и старался анализировать)
Ребята, все работает. Внимательно смотрите, что напечатали. Тоже ничего не получалось, не кликалось, скрипт не присваивал класс responsive, нашел ошибку - начал присваивать, но все равно не открывается. Ошибка была в css в название класса. Полчаса убил на то, что бы исправить свои ошибки, но в итоге все отлично работает. Если у вас не работает, но вы все делаете точно как автор - значит что-то вы написали не так, где то ошибка, какая я то пресловутая лишняя буква е.
Откуда взялся класс responsive во второй части урока?=) как сделать меню по центру относительно картинки, когда скрли заначек меню визуально выглядит не по центру..
"responsive" я тоже не понел в html его нету.
создали, он будет использоваться
@@SuprunAlexey создали это каааак? Это мы его самостоятельно должны создать или он сам создается или ты его прям в css коде создал?
Отличный урок, спс. С верстки нужно начинать изучения вебмастерства
Это шикарно. Я ничего не понимаю в программировании, но я тоже так хочу уметь...
Спасибо за урок! Лично мне всё понятно и легко выполнимо из данного урока, при том что я новичок (ни чему не обучался). Не понимаю почему люди жалуются что этот урок не для новичков, в видео же не собирают адронный коллайдер...
Я переписал весь код, но когда нажимаю просмотреть код страницы и хочу изменить размер экрана ничего не пройсходит. В чем проблема? Все проверил, названия классов и id.
Ребята у кого не работает меню при изменении разрешения ниже 768px. В тег нужно вставить мета тег для работы responsive. Просто автор об этом не упомянул т.к. думает что новички должны об этом знать. Я тоже не сразу понял почему не работает потому-что только начинаю путь верстальщика. А вставить нужно вот этот тег . Еще раз говорю вставить нужно в тег
Спасибо, помогло
Урок годный. Спасибо за подробности. Было бы замечательно еще прикрутить гитхаб, чтобы увидеть готовый образец для определения синтаксических ошибок у себя.
+Dimaster спасибо! Возможно
Мне очень понравилось, актуально, сайт выглядит современно и живо даже в самом начале! Но мне, как новичку, хотелось бы более разжевано касательно тегов :D И БЫЛО БЫ ОООЧЕНЬ ЗДОРОВО, ЕСЛИ БЫ К ВИДЕО БЫЛИ ПРИКРЕПЛЕНЫ ЭТИ ФАЙЛЫ С КОДОМ, ЧТО ПОЛУЧИЛИСЬ В ВИДЕО
+Vladislav Yuzhakov моя идея заключается в том что б вы параллельно со мной писали код, поэтому файлы не выкладываю. Касательно тегов это если встречается какой то незнакомый то сразу хтмл бук открываешь и узнаешь в чем дело. (Если вдруг я не объяснил)
Web Developer Blog я вот пишу с вами а толку, js в данном видео не работает((( я его три раза перепечатал... ненравится ему mytopnav, меню не открывается ( я новичок вообще не понимаю что и как( был бы исходник хотя бы js у меня бы все работало, или не работало но не по моей вине. А так я не знаю что щас и делать, дальнейшее видео у вас основаны на этом коде, а он не рабочий( как учится дальше если уже не получаетчя... пойду смотреть чужие видюшки... хоть за subilme text спасибо очень приятно печатать
Вопрос есть: Почему не работает text-align в меню? Не выравнивается по-центру.
Он выравнивает относительно контейнера, а контейнер уже надо с помощью justify-content выравнивать
@@nintek а ты решил проблему с меню у меня не выходит
@@FA-tu5ti Я в js не шарю, но там ниже в комментах правильный вариант кода написали
Чувак! Ты просто огонь! Все уроки смотрю!!!
Вот это круто)) большое спасибо что без макета фотошопа..
так проще для начинающих
Хорошее и простое решение адаптивного меню на js. Спасибо
+span4 и вам спасибо
Все работает, спасибо. Только в подключении java были ошибки. Подключил через jQuery - все идеально.
Тут вроде нет java тут JavaScript
Спасибо за видео, но есть вопрос... Как Вы демонстрируете всё получилось, но почему когда меняешь масштаб в симуляторе toggle device toolbar(инструмент в chrome), адаптив не работает?
не могу найти вторую част урока
пересматривал пересматривал, комментарии перечитывал, пробовал всё что писали, и всё равно кнопка не реагирует, в вертикальное меню не переходит, в горизонтальное появляется
тоже самое
да
Да помогите как писать?
Спасибо за урок, только в js пробел перед responsive всё равно не помог. При нажатии на иконку меню по прежнему отображается горизонтально и без стилей.
Спасибо, все получилось. Немного внимательности, чтобы не ошибиться где-то в названиях, и все ок.
Не получилось с js, помогите.
Сайт всегда получается хорошо. Все идеально,хоть делаю впервые,но уже профессионально. Единственное,что без адаптации
Алексееей, ответь пожалуйста! Меню отпадное, только почему если его делать с ul и li, то не получается потом высветить icon при медиа запросе?
Лучший ютубер по web технология, всегда смотрю твои уроки и всегда все понятно!
Спасибо!
Очень полезно!Спасибо, жду следующий урок
+Ваня Ляшук и вам спасибо! Постараюсь каждый день выпускать.
Не работает почему-то кнопка, пишу код в Brackets, выдает много ошибок. Написала всё точно как в примере, посоветуйте, как исправить
Мармок веб дизайном занялся?
The GhostHunters видно да
он им как бы и занимается 🗿
@@micsamplay7465 мармок?
@@maximnovik5917 он работает с веб и графическими дизайнами
Здравствуйте! спасибо за лекцию.
У меня следующая проблемка: все сделал как сказано, все вроде то-же, но вот при переходе на "респонсив" ничерта не меняется в меню. При любой резолюции меню полностью остается на экране. Проверил все построчно. В чем проблема, подскажите?
P.S. Редактор выдает ошибку в JS коде о нехватке ";" в двух последних строках после "}"
Я знаю что JS добавляет их по умолчанию и все же стоит это отметить.
Заранее спасибо!
А можно вопрос? Это что за картинка такая, что при применении к ней стилей фон самой картинки меняется, а сама надпись белая остаётся? Я сейчас в пэйнте взял фон с этой картинки, на нём сделал надпись белым цветом, сохранил её также в png и вставил за место этой - так у меня фон серый так и остался, по бокам только чёрный стал, где картина уже кончилась. А с этой картинкой всё как у вас - вся картинка чернеет.
почему вы используете div с a вместо ul и li?
Такой вот пример
наверное, потому, что мы вполне можем ссылкам теперь задавать display: block... O_o
откуда класс responsive взялся?
создали
@Мас Ри в css, а добавили через JavaScript
Спасибо ,что поделились знаниями.
Все получилось!!!
Скажите канал и группа в ВК на 2019г не активны????
Неа
здравствуйте а у меня не появляется кнопка меню
Спасибо. отличный урок!!!
большое спасибо за такие видео.
И вам спасибо что смотрите
Меню слева не открывается при нажатии на иконку, всё переписано правильно даже пробел поставлен но всё равно не работает. В коде в Elements topnav меняется на topnav responsive, но нечего не происходит. Подскажите что надо сделать как исправить.
Привет всем,у меня на канале есть много интересного,буду благодарен если подпишитеся...
Информации много. В голове все не укладывается!
ПОМОГИТЕ! Не понял как по началу с папками. Я создал Парки css, js, img и закинул в них файлики, но когда начал сохранять они сохранялись не в папках, а просто в общей папке. Ещё не выходит это меню. Код сверял несколько раз всё правильно, но само меню не находится под логотип, а рядом с логотипом! И ничего не происходит. В чем проблема? Пытаюсь разобраться
поставил свое лого с размерами 2560х421 пиксель, и оно выставилось по центру ну согласно justify-content: center;, но не адаптируется под изменение размера экрана, т .е. левая сторона улетала куда то, правая отображается только при прокрутке с помощью нижнего ползунка, как это поменять? что изменить? чего добавить? подскажи пожалуйста
Когда ты выпустил это видео мне было 12, сейчас мне 16, и я жалею что раньше не знал о веб-разроботке(
короче привет из 2019!!! я не понял откуда взялся responive к какому тэгу его надо было привязать, подскажите. в коментах есть этот вопрос но никто не ответил на это
Привет, его не надо ни к какому привязывать
@@SuprunAlexey но она же должна быть в html да ??
он есть в js
14:34 время видео. Я еще очень нуб в этом деле, и не могу понять, в чем разница если мы просто укажем .icon вместо .topnav .icon ?
Всё работает .Внимательнее будьте в переписывании кода .
Вот это верно написано, у меня же работает, значит и у вас должно
Привет. Без пробела в скрипте меню действительно всторону, но с пробелом при нажатие клавиши меню не выпрыгивает. Подскажи плз
Почему в определении стилей для меньшего размера экрана, пишется именно .topnav a.icon, а не .topnav .icon .Проверил работает только с указанием тега , но почему, не понимаю?
тег а с классом icon
Я не понимаю ,где ты пишешь в 2 :42 ,что это за программа ? ( скажи пожалуйста )
Sublime text
@@SuprunAlexey Спасибо )
Все получается при безукоризненном следовании за Вашими инструкциями. Но остается вопрос: откуда появляется класс responsive? Его назначение и логика применения?
какой размер лого? у меня не растянулось в узкую полоску как у вас.
а можно script подключать в head там где подключаются стили , или так нельзя?
итак, я повторил, но тоже толкнулся с проблемой не работающей кнопки меню. если что, писал в VSC.
Здравствуйте. Напишите пожалуйста, берете ли на обучение онлайн или посоветуйте пожалуйста хорошие курсы и дальнейшим трудоустройством! Заранее спасибо!
Спасибо за урок. Подскажите как задать фон не цветом, а картинкой?
Автор молодец!Лайк!
+Слава 1992 Илюшин спасибо большое!!
cпасибо за урок! подскажите, пожалуйста, почему у меня не отражается бургер меню ☰ и второй вопрос, подскажите, продолжение к этому уроку, а то начинаю гуглить выдает кучу всего интересного и я начинаю начинать параллельно еще кучу других( хочется этот пройти до конца
Всё очень круто,спасибо.Только вот media я запихнул в отдельный файл,мне кажется так лучше.
Спасибо!
Хорошо бы нумеровать уроки... Спасибо
На превью у видео есть "Часть 1"
Я так смотря на данный урок понимаю одно не для новичка данный урок ))
+ALLANIT нет-нет, вы опробуйте, все намного проще чем кажется! У вас все получится! Если будут вопросы пишите! Просто делайте как я по шагам!
Нет нет извини я не про то что именно я новичок )) Есть более подробное видео о таких делах и углублено на столь что более понятно .
Я бы что то добавил и посоветовал ...
Ну это будет самый простой урок
А мне вот наоборот кажется, что именно для новичков, ну, если конечно учитывать, что слова "переменная" и "html/css" не пугают и не вводят в ступор. Наоборот, очень мотивирует сидеть и ковырять в справочнике(тот же htmlbook.ru), то что не знакомо или плохо понимаешь. Отличный урок, хотя JS для меня пока темноватый лес, но ни чего сверх непонятного я не нашел, у автора на удивление приятная и простая подача. Жду продолжение, автор молодец! Спасибо!
спасибо!
Спасибо за видео! Я новичок в HTML, CSS. Прочитав пару-тройню статей "слепил" примерно за дня 3-4 первый свой маленький информационный сайтик для новичков, кто хочет научиться программировать микроконтроллеры.. Верстал как умел. Все блоки создал не по правилам. Просто в создавал "content1.......6", задавал им нужные размеры, пихал в них картинки, текст, ссылки на скачивание софта по программированию, справочников и т.д. Есть простенькое меню. И вот после этого видео, понял как безграмотно я всё делал. Но как говорится - "Зато сам!" Теперь у меня будет настоящий правильный шаблон. А как найти Ваше следующее видео? Или как оно будет называться, для поисковика на TH-cam? Ещё раз спасибо Вам!
На канале есть много курсов, и в разделе плейлисты есть много видео
@@SuprunAlexey Благодарю! Но я как и в училище, привык к одному преподавателю. Не любил когда было - один день один преподаватель, другой день другой преподаватель. К тому-же Вы очень понятно и просто объясняете. Ещё я начинаю понимать как пользоваться "джала-скриптом" (не знаю, правильно я назвал эту фишку?). А вот может Вы мне поможете. У меня пока, для меня нерешаемая проблема!!! Я уже на трёх разных видео задавал этот вопрос, но мне почему-то ни кто не ответил. Тема - вывод изображения на страницу сайта. У меня выводится только иконка (указывающая, что это изображение), и сопровождающий текст к картинке. Писал код прямо с видео, строчка в строчку - результат "FALSE". Если вывожу картинку из нета - через ,
Кстати когда писал код с этого Вашего видео - лого "Mirilis" мне пришлось вставлять из нета по ссылке. С компа не получилось!
Урааааа!!!!! Сам допетрил - нашёл ошибку! Ошибка банальная. Я в названиях изображений указывал формат расширения. Пример: Ford_Mustang.jpg. В коде в директории так-же писал. Я вообще-то очень упрямый, сидел сейчас и перебирал ещё возможные варианты. Решил у одной из картинок убрать расширение. Пример: Ford_Mustang. И всё, СУПЕР!!!!! Во всех источниках говорилось только - главное условие, что название файла должно совпадать в точности с прописанным названием в директории в редакторе кода. А вот оказывается редактор капризный товарищ. Он любит, чтобы название было простое, типа "Вася_Пупкин" - без всяких там jpg, png, gif.
Привет, урок хороший, много узнал, но не выходит, как у вас. Я изменил лого на свой. При уменьшении экрана, значок меню уходит под ссылку Главная и ничего не открывает. Код вроде верный, никаких ошибок не подсвечивает.
Понимаю, что прошло много времени, но вот только сейчас начал учить и столкнулся с проблемой. Хоть кнопка и работает, но при сужении экрана она остаётся уже в невидимой части экрана и добраться до нее можно только горизонтальной прокруткой. Что я делаю не так? Код сверял несколько раз!
Сверь код до каждого тега
у меня почему то меню с лева не отображается когда кликаю на иконку. Почему ?
у меня не появилась графическая иконка ☰ я незная как его еше добавить пытался сделать его блочным параметры, сылку на иконку дать не получается (чтобы туда в место ☰ этого не поставил изчезает как в бермутском треугольнике )
Может кто подскажет.
Делаю в visual code
Но у меня не становится в центр картинка и строка не заливается цветом
у меня тоже
09.23
Вы присваиваете классу лого свойство флекса justify-content,говорите что оно выравнивает элемент по горизонтали.В других источниках justify-content - это выравнивание по ГЛАВНОЙ оси(которая может быть и вертикальная),задаеться свойством flex-direction.Получаеться можно принебречь свойством flex-direction и сразу задать justify-content и это будет выравнивание по горизонтали ? Спасибо
Саша Понкратов а там же вроде по умолчанию row стоит.
Здравствуйте, вот такой вопрос. У меня в яваскрипте в первых двух строчках (
menu.onclick = function myFunction(){
var x = document.getElementById("myTopnav");) выводит целых 12 проблем (например, "menu is not defined.[no-undef]")/
Как решить эту проблему? Как я понял, надо что-то сделать с "menu" и "document"
Как называется плагин который отображает ширину и высоту картинки, при написании пути к атрибуту src у ?
Вот момент 7:13
Это AutoFileName
Блин, я пол часа искал ошибку в том что у меня @media screen and (max-width: 768px){...} было написано вот так @media screen and (max-width: 768px;){...}. Из-за вот этой хрени ' ; ' всё не работало, автору спасибо за отличный урок))
пиши свои код в Visual studio code и некогда будет тебе такая проблема. Он сам тебе покажет стилические ошибкию
У меня не работает scipt js, доп скачивать или устанавливать надо что-то?
Мне вот интересно, я задал общий стиль всем элементам на странице через *box-sizing:border-box , а не конкретному элементу. Так можно было или все таки это не совсем было верно в конкретном примере?
а где появился класс responsive?
мы его прописали в js , то есть если у нас мы нажимаем на кнопку (а соотвественно это происхлдит когда экран маленький ), то этой кнопке мы присваиваем класс responsive, а для него уже прописаны стили, ну я так понял
@@murakami374 спасибо, но уже год прошел. Я больше не занимаюсь программированием...
@@howtogetit4896 ахахаах
@@howtogetit4896 почему?
@@hmakhsudov он не нашел класс и ушел в депрессию
Огромное спасибо ! Но где следующий урок ?????
Почему не появляется кнопка меню при изменении экрана? Все идентично как в уроке, несколько раз проверял(
Помогите пожалуйста! проблема с меню все сделал правильно по видео но вот место меню выводит просто сам код но никаких вкладок меню блог проект не выходит перепроверил много раз код написан грамотно !
Честно видео хорошее. Всё понятно и доступно, но... Верстка без макета всё равно как-то даже не знаю. Лучше показывать на живом примере когда видишь, что должно быть и что получается в процессе. Насчёт идеи уроков по фреймворкам, их уже давно куча в ютубе. Лучше развивай уроки вёрстки именно на Flexbox т.к. таких видео практически нет. Ну и про названия тоже соглашусь, что нужно называть вещи своими именами. Можно записывать уроки применяю тот же БЭМ про который все много говорят, но никто не учит))
Это круто! )
Когда все получается действительно круто
Добрый день !
Не пойму почему логотип фиксируется и при уменьшении экрана не сдвигается с экраном
box-sizing: border-box;
Добрый вечер. Надеюсь поможете. Когда при нажатии на кнопку меню была ошибка, после чего вы вставили пробел перед responsive всё заработало, у меня не работает, как это исправить?
Крутое видео! И не только это!