Очень качественное объяснение каждого шага, спасибо. Все просто и понятно. До этого натыкался на ролики где совсем нет понятных обьяснений, а тут прямо идеально. Много нового для себя выделил. Спасибо!
Редко, когда бывает возникает намерение просмотреть все доступные материалы на интересующие темы какого-то конкретного лектора. Это тот редкий случай. Не первое видео, которое с удовольствием "прорешиваю", вернее проверстываю с вами. Спасибо большое.
Боже, это видео просто находка. У автора дар объяснять, пересмотрел видео по верстке в сумме часов на 20, но за эти 2 часа понял раз в 10 больше моментов. За анимации отдельный лайк, не думал, что это так просто)
Автору большое спасибо за такое подробное видео! Совсем недавно начал верстать и делать это в vscode. Задавался вопросом как быстро скопировать строку. Хотел уже коммент с этим вопросом написать. Но автор как - будто услышал мой вопрос. Вообщем всё очень очень понятно и по горячим клавишам и по вёрстке в целом)) Здоровья и удачи! 🤝
Это очень крутой урок. Понравилось что было немного про JS,про то как подгрузить картинку другова размера при мобильном разрешении и о том как делается анимация блоков в конце ролика. Спасибо было очень познавательно.
Отличный урок без лишней воды! Смотрю вас впервые и заметил что не используете фишки самого ЕМЕТА! Как по мне, если знаете что будет находиться внутри внутри определенного дива или секции, какие классы будете применять то можно сократить время и написать так, как пример секция для первого портфолио (section.portfolio>div.container>div.portfolio-title>h2.title-1 и нажав клавишу табуляции емет создаст автоматически полноценную структуру) в виде
Урок хороший, есть ряд вопросов. Почему вы ставите h2 ниже, чем h3, везде советуют не ломать порядок заголовков? Чем сolumn-gap лучше not-last-child? И чем лучше project+ project, чтобы задать верхний маржин каждому проекту, кроме первого, почему не not first child, это чем-то обусловлено или вы показывали возможности css? Также интересно почему именно верхний маржин, а не паддинг, везде пишут, что маржины лучше только нижний и правые. Зачем на 1:18:20 в пути файла ./ а не просто /, зачем точка перед слэшем? Возможно много вопросов, но я очень хочу разобрать в верстке до мелочей, заранее благодарю
1) Ставлю по важности, а не по порядку. 2) Проще задать. Ним легче управлять. Не надо отменять нижний или крайний правый отступы. 3) Не понял о каком margin-top вы спрашиваете. Обычно его не прописываю, только в особых случаях. 4) Чтобы указать путь от текущей директории. Просто "/" это путь от корня домена. Приходите на курс 🙂, там будет много практики, разборов и каждый день ответы на вопросы в чате от меня и кураторов.
Объясните пожалуйста почему в адаптиве меню, когда вы раскрываете меню на весь екран на 1:24:19 у вас в стилях по прежнему для .nav-button указан стиль display:block, но кнопка почему то не видна. Делаю тоже самое как у вас, у меня кнопка остается видимой. И потом когда вы кнопку делаете видимой она появляется в правом верхнем углу, хотя у меня она расположена внизу под ul. Тут же вы говорите что z-index у nav-list на ее отображение не влияет. И в дальнейшем при скроле в мобильной версии у вас бургер постоянно виден, у меня при прокрутке он уходит вверх, хотя стиль для бургера такой же как у вас фиксед. И еще, при добавлении aos анимации есть проблема, когда нажимаешь на бургер и открывается мобильное меню, то картинка c челом hero остается на своем месте, не перекрывается фиксированным меню. Спасибо
а у меня проблема нету плавной анимации кнопки top все делаю как в видео но плавности элемента не как не добьюсь ,цвет меняет, но смещения вниз с плавной анимацией нет то есть смещение есть плавности нет
Тоже новичок, сама задалась этим вопросом. Через position: sticky получалось не то, что хотелось. В итоге вынесла из header всю навигацию выше в отдельный div с классом container. И в ещё один новый div, которому прописала bg-color, height, position: fixed, top и left 0, width 100% и z-index (в моем случае 8). В саму навигацию дописала padding-top: 40px, и также это свойство изменила у header. Плюс "бургеру" поменяла position на relative. Может кому-то понадобится еще😄
Здравствуйте, помогите пожалуйста с кнопкой навигации, открытие работает а закрывать иконка исчезает и не возможно закрывать пока не обновить страничку,я заметил что main.js не подключился.
Неверно был найден элемент для которого пытаетесь задать onclick. Посмотрите что лежит в этой переменной, проверьте селектор по которому делали его поиск.
Здравствуйте, Юрий! Уроки ваши отличные, занимаюсь с удовольствием, но с макетом возникла проблема, в меню фигмы нет вкладки плагины, причем занималась по другим вашим макетам, все было в порядке, вкладка была, с таким сталкиваюсь впервые
Наталья, приветствую! Если вы открываете макет по ссылке, то сделайте копию макета к себе в черновики (Duplicate to drafts) и тогда у вас появится возможность редактировать макет и использовать плагины.
Юра спасибо за урок решил вспомнить что такое вёрстка, т.к. давно не занимался таким, в основном сейчас работаю на react.js Хотел выразится по поводу css библиотеки AOS : мне кажется при адаптиве, будет заламываться сайт, поэтому лучше отключить её для девайсов и оставить только для широкоформатных экранов, по крайней мере у меня так. Проблема возникла при разрешении 992 и ниже, начался overflow-x только при свайпе влево - экран уполз, навигационное меню уползло, в общем балаган, поэтому disable: 'mobile';
написал проект, запустил на болльшом экране, получилось хорошо. потом запустил на телефоне, и тут случился баг, при открытии сайта, справа появляется белая полоса от шапки до подвала, но заметил, что при нажатии менюшки, полоса исчезает, при обновление страницы, снова появляетя. помогите пожалуйств решить эту проблему, пробывал многое, к сожалению не получилось p.s. получилось решить проблему, вся проблема была в картинке, после того, как удалил её всё стало на свои места:)
Здравствуйте, Юрий! У меня такой вопрос. Сколько вам понадобилось времени на изучение HTML и CSS, чтобы научиться верстать сайты любой сложности? Хотя бы примерно.
Я версткой занимаюсь довольно давно, со времен когда сайты были на таблицах и . В целом скажу что 2-х месяцев активного обучения достаточно чтобы ознакомиться и попрактиковать приемы базовой верстки типового сайта или лендинга. В той же верстке постоянно можно придумывать сложные варианты дизайна и их реализации и развиваться бесконечно. А если совмещать все это с анимациями и 3D - то это вообще отдельный вид искусства. (тут должна быть ссылка на сайты с awwwards.com)
Здраствуйте, не подскажите что делать если при анимации то что вы в конце показывали происходит баг т е при нажатии на бургер анимированный объект остаётся поверх навигации бургер меню.
Он уже deprecated - то есть устарел и не рекомендуется к использованию. Это Bracket Pair Colorizer 2. Сейчас эта возможность встроена в VS Code. Настройка: Editor > Guides: Bracket Pairs - установите на active или true.
Блин я не понимаю в чем проблема, я повторял весь код точь в точь но, у меня адаптив сломан, картинки в портфолио не уменьшаются как на видео, есть предположение в чем может быть дело?
Можно вопрос? При создании адаптива, когда я меняю размер шрифта у элемента ul, у меня меняются расстояния между li элементами, а сам шрифт остаётся такой же, что это такое вообще?
Добрый вечер, смотрю и восхищаюсь вами, наконец то нашёл нормальный канал! А не подскажите что делать если у сайта нет "Контейнером"? Я всех блогеров смотрю у всех все сайты с "Контейнером", что делать? Может если вам угодно ссылку на ютуб ролик дадите, ну или сами объясните.
Тут зависит от макета, но даже при ширине контента на 100% экрана все равно стоит добавлять контейнер для отступов слева и справа, чтобы контент не прилегал к краям экрана.
@@WebCademy Спасибо вам, я аж забыл что написал вам))) Ну понял тут дело в дизайне) Кстати почему бы вам не сделать урок по Прелодеру?) Будет прикольно)
Чтобы был порядок в стилях. Воспринимайте тег заголовка как разметку и семантику. А CSS класс как стилевой элемент оформления. Соответственно, мы можем стиль заголовка прописанный на класс применить к любому html элементу.
column gap прекраснейшее свойство , которое ты мне показал дружище
полностью согласен с вышесказанным,облегчило мне жизнь)
Очень качественное объяснение каждого шага, спасибо. Все просто и понятно. До этого натыкался на ролики где совсем нет понятных обьяснений, а тут прямо идеально. Много нового для себя выделил. Спасибо!
Редко, когда бывает возникает намерение просмотреть все доступные материалы на интересующие темы какого-то конкретного лектора. Это тот редкий случай. Не первое видео, которое с удовольствием "прорешиваю", вернее проверстываю с вами. Спасибо большое.
Одно из самых лучших видео которых я видел по теме верстки, отличные объяснение, приятный голос, много нового для себя подчеркнул.
просто до дрожи! Юра вы Талантище в плане преподавания!!! Я свами заверстался на одном дыхании! ДАЙ ВАМ БОГ ВСЕГО И ПО БОЛЬШЕ)))
Боже, это видео просто находка. У автора дар объяснять, пересмотрел видео по верстке в сумме часов на 20, но за эти 2 часа понял раз в 10 больше моментов. За анимации отдельный лайк, не думал, что это так просто)
Я очень много материалов перелопатил, удивлён что раньше мне не встретился настолько качественный контент. 👍👍👍
Спасибо огромущее! Сделала и получилось просто класс. Обьясняете круче всех!☺
Спасибо автору за это видео. Отличная вёрстка без лишней воды. Также особо понравились пояснения по вёрстке. Будем ждать новых видеороликов!
Один из лучших блогеров!Такого понятного объяснения еще не видел)И теги нужные и свойства к ним, подписываюсь!)
Автору большое спасибо за такое подробное видео! Совсем недавно начал верстать и делать это в vscode. Задавался вопросом как быстро скопировать строку. Хотел уже коммент с этим вопросом написать. Но автор как - будто услышал мой вопрос. Вообщем всё очень очень понятно и по горячим клавишам и по вёрстке в целом)) Здоровья и удачи! 🤝
Ты просто лучший кого я смотрел за эти пол года!!! Многое для себя открыл!
Это очень крутой урок.
Понравилось что было немного про JS,про то как подгрузить картинку другова размера при мобильном разрешении и о том как делается анимация блоков в конце ролика.
Спасибо было очень познавательно.
Присоединяюсь,это самое лучшее объяснение.Спасибо огромное.
Огромное спасибо, Юрий, что делаете такие полезные обучающие ролики. Благодаря вашим роликам я достаточно продвинулся во фронтенде.
Здравствуйте , можно задать вам вопрос
очень хороший урок, максимально подробный и понятный для новичка. Спасибо
Здравствуйте , можно задать вам вопрос ?
Доходчиво и крапотливо к каждой детали,продумано. Программный пианист
Очень крутой видео урок , спасибо большое! Не все готовы в одном видео всё и сразу рассказать, а у Вас очень много полезного
Блин, Юрий, Вы просто красавчик! Супер видеоурок! Я столько всего узнал... Всем рекомендую! Парень - профи своего дела!
Огромное спасибо автору за ролик, очень познавательно и доходчиво! Подписка и лайк!
Спасибо за урок.Мне понравилась и подача и информативность.
Спасибо за урок! Очень нравится Ваш канал! И по java script уроки тоже хорошие!
Верстка, адаптивная верстка - все ясно, доступно, понятно. Лайк и подписка.
Спасибо за видео, все очень информативно и познавательно! Смотрится очень легко, сайт заверстала)
Жаль что не могу поставить 2 лайка. Очень грамотно и доходчиво объясняете.
Ура! Я сделал его) благодарю за урок! С вами плюс сто к усидчивости.))))
Замечательный урок ! Спасибо за труды !
Отличный урок без лишней воды! Смотрю вас впервые и заметил что не используете фишки самого ЕМЕТА! Как по мне, если знаете что будет находиться внутри внутри определенного дива или секции, какие классы будете применять то можно сократить время и написать так, как пример секция для первого портфолио (section.portfolio>div.container>div.portfolio-title>h2.title-1 и нажав клавишу табуляции емет создаст автоматически полноценную структуру) в виде
Спасибо) Насчет emmet я в курсе, и даже подскажу больше, что не обязательно писать div.portfolio, достаточно просто написать .portfolio
@@WebCademy Ну я так привык) но спасибо за контент, приятно слушать, спокойно и понятно рассказываете а не как все гуру тараторят))
привет есть вк?
@@WebCademy Добрый день. Подскажите, какую тему в vs cоde вы используете в данном уроке ? хочу себе такую установить.
спасибо большое вы так понятно обьясняете
Благодарствую. Все сверстал, все получилось очень даже годно. Разве что сам макет не очень сложный.
Спасибо большое за ролик. Много нового узнал благодаря вам + работа в портфолио
Спасибо за урок, обязательно попробую.
57:23 у меня не работает colum gap что делать?
спасибо за прекрасное видео, все очень понятно объясняете, узнал много нового)
Спасибо. Поверстал с удовольствием с вами
Офигенно было! от души спасибо!)
Спасибо за урок! Всё было круто!
Очень круто, спасибо за урок))
Спасибо большое за проделанную работу!
Спасибо за урок!!! Было интересно и полезно.
Спасибо за урок.🙋♂
это видео идеально!
Афигенный видос, спасибо
заверстал вместе с тобой, спасибо тебе большое!
Благодарю за урок!
Хороший hands-on урок
с удовольствием подписался - спасибо за видео
Друг спасибо тебе большое, классный урок
Урок хороший, есть ряд вопросов.
Почему вы ставите h2 ниже, чем h3, везде советуют не ломать порядок заголовков?
Чем сolumn-gap лучше not-last-child? И чем лучше project+ project, чтобы задать верхний маржин каждому проекту, кроме первого, почему не not first child, это чем-то обусловлено или вы показывали возможности css? Также интересно почему именно верхний маржин, а не паддинг, везде пишут, что маржины лучше только нижний и правые.
Зачем на 1:18:20 в пути файла ./ а не просто /, зачем точка перед слэшем?
Возможно много вопросов, но я очень хочу разобрать в верстке до мелочей, заранее благодарю
1) Ставлю по важности, а не по порядку.
2) Проще задать. Ним легче управлять. Не надо отменять нижний или крайний правый отступы.
3) Не понял о каком margin-top вы спрашиваете. Обычно его не прописываю, только в особых случаях.
4) Чтобы указать путь от текущей директории. Просто "/" это путь от корня домена.
Приходите на курс 🙂, там будет много практики, разборов и каждый день ответы на вопросы в чате от меня и кураторов.
Секцию сервис можно же сделать через списки же
Подача 100%🥨🍳🍟🍧🤯
Еееее, мой лайк юбилейно 900ый
Объясните пожалуйста почему в адаптиве меню, когда вы раскрываете меню на весь екран на 1:24:19 у вас в стилях по прежнему для .nav-button указан стиль display:block, но кнопка почему то не видна. Делаю тоже самое как у вас, у меня кнопка остается видимой.
И потом когда вы кнопку делаете видимой она появляется в правом верхнем углу, хотя у меня она расположена внизу под ul.
Тут же вы говорите что z-index у nav-list на ее отображение не влияет.
И в дальнейшем при скроле в мобильной версии у вас бургер постоянно виден, у меня при прокрутке он уходит вверх, хотя стиль для бургера такой же как у вас фиксед.
И еще, при добавлении aos анимации есть проблема, когда нажимаешь на бургер и открывается мобильное меню, то картинка c челом hero остается на своем месте, не перекрывается фиксированным меню.
Спасибо
Я кайфанул))) спасибо тебе
супер. верстал с Вами. спасибо
спасибо за данное обучающее видео !
классный урок, спасибо большое!
Можете исправить на reset там другие команды
а у меня проблема нету плавной анимации кнопки top все делаю как в видео но плавности элемента не как не добьюсь ,цвет меняет, но смещения вниз с плавной анимацией нет то есть смещение есть плавности нет
здравствуйте. можно ссылку на макет , пожалуйста
Здравствуйте, можно ли как-то зафиксировать шапку сайта при скролинге?
Я конечно новичок, но можно вроде через position: sticky, можешь ещё инфы нагуглить
Тоже новичок, сама задалась этим вопросом. Через position: sticky получалось не то, что хотелось. В итоге вынесла из header всю навигацию выше в отдельный div с классом container. И в ещё один новый div, которому прописала bg-color, height, position: fixed, top и left 0, width 100% и z-index (в моем случае 8).
В саму навигацию дописала padding-top: 40px, и также это свойство изменила у header.
Плюс "бургеру" поменяла position на relative.
Может кому-то понадобится еще😄
position: fixed
у меня проблемы с секцией services-row, display: flex не работает, как можно исправить ?
Здравствуйте, помогите пожалуйста с кнопкой навигации, открытие работает а закрывать иконка исчезает и не возможно закрывать пока не обновить страничку,я заметил что main.js не подключился.
почему то в навигации у меня не сработало column-gap, он не реагирует вообще.
Подскажите почему у меня может не работать замедления btn? transition: background-color 0.2s ease-in, top 0.2s ease-in;
Ребят, такая ошибка.
main.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onclick')
что делать?(
Неверно был найден элемент для которого пытаетесь задать onclick. Посмотрите что лежит в этой переменной, проверьте селектор по которому делали его поиск.
а софт нужно купить,что бы всё как на видео отображалось?
Спасибо за урок!
Здравствуйте, Юрий! Уроки ваши отличные, занимаюсь с удовольствием, но с макетом возникла проблема, в меню фигмы нет вкладки плагины, причем занималась по другим вашим макетам, все было в порядке, вкладка была, с таким сталкиваюсь впервые
Наталья, приветствую! Если вы открываете макет по ссылке, то сделайте копию макета к себе в черновики (Duplicate to drafts) и тогда у вас появится возможность редактировать макет и использовать плагины.
Юра спасибо за урок решил вспомнить что такое вёрстка, т.к. давно не занимался таким, в основном сейчас работаю на react.js
Хотел выразится по поводу css библиотеки AOS : мне кажется при адаптиве, будет заламываться сайт, поэтому лучше отключить её для девайсов и оставить только для широкоформатных экранов, по крайней мере у меня так. Проблема возникла при разрешении 992 и ниже, начался overflow-x только при свайпе влево - экран уполз, навигационное меню уползло, в общем балаган, поэтому disable: 'mobile';
я уже вас люблю
Автор пояснює зрозуміло і чітко, для новачків свме те. Дякую.
Спасибо вам большое
Отличный урок, благодарю
AOS почему то не работает. А при записи картинка hero.png вообще пропала. Все делал буква в букву.
Проверьте с готовым кодом с урока. Он есть на странице с материалами, ссылка в описании под видео.
@@WebCademy Исчезают объекты почему-то при подключении AOS
как подключить media.css к html файлу?
Спасибо большое, очень полезно
написал проект, запустил на болльшом экране, получилось хорошо. потом запустил на телефоне, и тут случился баг, при открытии сайта, справа появляется белая полоса от шапки до подвала, но заметил, что при нажатии менюшки, полоса исчезает, при обновление страницы, снова появляетя. помогите пожалуйств решить эту проблему, пробывал многое, к сожалению не получилось
p.s. получилось решить проблему, вся проблема была в картинке, после того, как удалил её всё стало на свои места:)
Здравствуйте, Юрий! У меня такой вопрос. Сколько вам понадобилось времени на изучение HTML и CSS, чтобы научиться верстать сайты любой сложности? Хотя бы примерно.
Я версткой занимаюсь довольно давно, со времен когда сайты были на таблицах и .
В целом скажу что 2-х месяцев активного обучения достаточно чтобы ознакомиться и попрактиковать приемы базовой верстки типового сайта или лендинга.
В той же верстке постоянно можно придумывать сложные варианты дизайна и их реализации и развиваться бесконечно. А если совмещать все это с анимациями и 3D - то это вообще отдельный вид искусства. (тут должна быть ссылка на сайты с awwwards.com)
Здравствуйте! Я не могу найти именно ваш макет фигма. Где искать? Подскажите, кто знает?
Кайф! Спасибо :)
Хочу задать вопрос:
- В чем разница между картинкой и текстовым вариантом логотипа? Ведь наверное проще добавить картинку и не париться ( наверное)) )
Текстовый логотип можно поменять изменив текст. Картинку надо пересохранять. Да, добавить картинку было бы проще.
@@WebCademy вы забыли отметить то, что предпочтительнее использовать для логотипов SVG, он быстрее рисуется во время загрузки графического контента
Здраствуйте, не подскажите что делать если при анимации то что вы в конце показывали происходит баг т е при нажатии на бургер анимированный объект остаётся поверх навигации бургер меню.
Доброго времени суток. Ссылка на макет фигмы неправильная, там совсем другой макет. Скиньте пожалуйста актуальную ссылку
Проверил. На странице с материалами к уроку макет верный.
Материалы к уроку: webcademy.ru/blog/855/
@@WebCademy Да, я только заметил. Но последние две ссылки в описании были неверны
@@WebCademy Урок невероятно полезный, повезло что нашел ваш сайт, спасибо
я думал что не получаеться заголовок выровнять по линий оказывается див от контейнера идет с хедер роу вместе))
спосибо болшое скажите пожалюста почему иногда h2 иногда h3 написали
Здравствуйте , подскажите пожалуйста , когда я скачиваю svg , он у меня скачивается как Microsoft Edge
Норм. Просто edge открывает его как программа по умолчанию.
Спасибо братец!
Круто, спасибо !
Спасибо . Подскажите пожалуйста , что за плагин стоит который отвечает за желтые направляющие между скобками ?
Он уже deprecated - то есть устарел и не рекомендуется к использованию. Это Bracket Pair Colorizer 2. Сейчас эта возможность встроена в VS Code. Настройка: Editor > Guides: Bracket Pairs - установите на active или true.
@@WebCademy ага уже разобрался , но все равно спасибо вам.
Блин я не понимаю в чем проблема, я повторял весь код точь в точь но, у меня адаптив сломан, картинки в портфолио не уменьшаются как на видео, есть предположение в чем может быть дело?
Круто!
Можно вопрос? При создании адаптива, когда я меняю размер шрифта у элемента ul, у меня меняются расстояния между li элементами, а сам шрифт остаётся такой же, что это такое вообще?
Странно. Как будто у вас отступы основаны на пробелах, а размер текста задан где то дальше в li или в поэтому он не меняется.
@@WebCademy действительно! я установил размер шрифта для , здесь и была ошибка) Спасибо за помощь!
Добрый вечер, смотрю и восхищаюсь вами, наконец то нашёл нормальный канал!
А не подскажите что делать если у сайта нет "Контейнером"?
Я всех блогеров смотрю у всех все сайты с "Контейнером", что делать?
Может если вам угодно ссылку на ютуб ролик дадите, ну или сами объясните.
Так называют блоки, которым ограничивают ширину
Тут зависит от макета, но даже при ширине контента на 100% экрана все равно стоит добавлять контейнер для отступов слева и справа, чтобы контент не прилегал к краям экрана.
@@WebCademy Спасибо вам, я аж забыл что написал вам)))
Ну понял тут дело в дизайне)
Кстати почему бы вам не сделать урок по Прелодеру?) Будет прикольно)
1:55:33 а как исправить этот баг?
Почему я не могу скрыть видимость обьекта на фигме? На левой части экрана не могу найти кнопку "глазика".
Дублируйте макет к себе в черновики, тогда будет доступно редактирование макета.
Сверстал вместе с вами макет. Коплю деньги на курсы у вас.
Зачем заголовку h1 присваивать класс, если на веб-странице допускается согласно правилам и так располагать лишь один h1 заголовок?
Чтобы был порядок в стилях. Воспринимайте тег заголовка как разметку и семантику. А CSS класс как стилевой элемент оформления. Соответственно, мы можем стиль заголовка прописанный на класс применить к любому html элементу.
@@WebCademy Спасибо огромное за быстрый и развёрнутый ответ ❤
опечатка в название канала, надо ВебКомеди
Так и должно быть?