Какие платные уроки какие отговорки и оправдание если есть вот такие хорошие информационные и бесплатные видеоуроки где все доходчиво объясняют, спасибо за такую работу
Я нашел твой канал и ты молодец, это один из самвх немногих каналов, где действительно рассказываются полезные вещи. Спасибо, жду еще видео про верстку настоящих интернет магазинов
Вообще четкая верстка , с объяснениями что да почему... аплодирую! Нового ничего конечно для себя не узнал но для новичков этот контент на вес золота).
Очень понравилось! На фоне "курсов", где для верстки LP в 3 экрана 45 минут настраивается окружение (понты - понты), все по делу.Коротко и ясно. Согласен с комментарием автора, что любая задача в верстке имеет несколько решений и какой способ выбрать в конкретном случае решает верстальщик (например в верстке под CMS будет логичным один подход, в другом случае - другой) Успехов!
Спасибо) Про сборку проектов я в будущем сделаю, так как это полезная штука, ускоряет разработку. Хорошо, когда понимаешь как это работает, а не просто черная коробка, которая что-то делает)
Для тех у кого нет в PS шрифтов Roboto и Monserrat: Заходите в Google Fonts, выбираете их и все их вариации, как в этом видео (все также) далее в верхнем правом углу есть иконка загрузки (стрелка вниз) вот ее нажимаете и у вас качается в загрузки зипованный файл. Распаковываете его где-то и потом когда зайдете в эту (распакованную) папку просто мышкой кликаете по каждому шрифту он открывается и там сверху должна быть кнопка "Установить" (нужны права админа). далее перезагружаетесь и заново открываете PS. Шрифты должны автоматом заработать.
@@Фронтендер-з6о Поставьте на Вордпресс пожалуйста, и если есть возможность показать варианты подключения рабочих кнопок к примеру вацап,ВК и т.д. то это будет просто огонь!!!!
@@Фронтендер-з6о Да,открылся вацап и клиент мог сразу писать в нем.Про телефон тоже слышал ,можно сделать чтобы при нажатии на номер когда зашел с телефона на сайт идет набор.
Спасибо! Жду новые видео! Было бы интересно узнать про натяжку вёрстки карточки товара в Woocommerce. То есть как изменять карточку товара в соответствии с макетом/вёрсткой.
Привет! Скажи пожалуйста на 1:04:00 зачем делать такую разметку у кнопки, не совсем понимаю, я знаю метод через button и внутри просто 3 span а и мы к ним потом к каждому обращаемся, чтобы поменять расположение, а вот тут, как я понял, btn-menu__box мы делаем для того чтобы область нажатия была 40px или область нажатия делается в стилях самой кнопка btn-menu, указав padding 15px, а сами полоски это уже btn-menu__inner, верно?
Привет! Да, точно не помню. Но один и тот же функционал можно по-разному реализовать. Поэтому, если знаешь как проще и лаконичнее, то делай как проще) Сейчас я бы скорее всего делал по-другому. Например, можно было бы положить один спан. Сам спан был бы полоской + два псевдоэлемента у спана можно было сделать полосками.
Привет! Спасибо за материал! :) Просьба: я сижу за ноутом и одновременно повторяю за тобой. Но очень тихий звук, прям напрягает сильно, уже хочется подключить наушники. Было бы здорово, если звук будет погромче. Из сильных сторон: твой урок - это редкий случай, когда не то чтобы 1,25 или 1,5 не хочется ставить, а наоборот, иногда думал притормозить. ))) Очень хороший контент, много решений. Ставлю на паузу и экспериментирую)) Думаю, название не соответсвует, это не для новичков, а для тех, кто уже достаточно «поковырялся в коде. Например, новичку не реально влезть в Настройки VS Code и настроить GIT и Bush. C Photoshop будут тоже трудности. (А почему ты не стал использовать Figma? ) Например, как включить сетку, как приближать картину итд. Надеюсь, и дальше будет также ))
Привет! Спасибо за комментарий) 1. Со звуком я только разобрался где-то только после 4 урока, поэтому вначале с этим были проблемы 2. Да, я согласен это не для тех кто первый раз открыл редактор кода. Но все же по опыту, это больше для начинающих, можно было назвать без подписи начинающих, но уже как есть) 3. Figma отличный инструмент, в следующих курсах макеты буду делать в нем. Фотошопом пользовался просто для разнообразия, его для верстальщика тоже желательно знать
Спасибо большое за видео! Классный формат, уместные и понятные комментарии 👍 Возник вопрос на 53:30 - здесь используются стили top: 50%; transform: translateY(-50%). Почему нельзя применить просто top: (-50%)?
Привет! Потому что нам нужно сместить элемент относительно своей оси на 50% Здесь описано medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e
Привет, да с padding это сделать легче. Здесь я намудрил, как альтернативный вариант. В уроках по wp пришлось переделать на padding, так как там меню генерируется без span внутри ссылки. Отличие в том, что если делать это через padding, то высота шапки будет зависеть от ссылок, так как мы хотим, чтобы при наведении фон был от верхнего края до нижнего. Если мы удалим меню, то логотип и телефон прижмутся к краям шапки. Если мы делаем через before, то ничего не изменится, так как в этом случае мы задаем шапке свои отступы. На практике я не встречал, чтобы нужно было удалить меню. Поэтому можно делать через padding
А в чем разница между добавлением svg картинки в иллюстратор и тем, что можно нажать на кнопку экспортировать как, и тоже на выходе получишь svg изображение?
Будет формат svg и там, и там. Но если через фотошоп, то в svg все равно будет растровое изображение. Можно попробовать так сделать и открыть эти два файла в редакторе, там будет сразу видно разницу. Лучше это не в теории знать, а на практике проверить
@@КамильМиникеев-г5ъ svg точно не нужно экспортировать через photoshop, для этого нужно пользоваться иллюстратором или другим редактором, где есть поддержка svg. Да, илюстратор это отдельное
@@Фронтендер-з6о чувак, продолжай пилить видосы, ты красава, благодаря тебе я узнал про трансформ скейл)) Верстаю уже с месяц, уже могу верстать макеты, но пока без адаптивности, вот твоими видосами учусь адаптивности)
Привет! Лучше section-top__text и section-top__title. Так мы не привязываемся к тегам, а то будет странно, если это кнопка, а у нее например будет класс section-top__p
Инструментов большое количество. live server не пробовал и каждый чем-то отличается. Например, в browser-sync есть синхронизация бразуеров, если открыть страницу на двух браузеров, то при прокрутке в одном браузере будет работать прокрутка в другом. Возможно, это есть и в live server
Спасибо, пока не разобрался как лучше. Я бы для эксперимента сделал тестовое видео с 2-3 разными настройками микрофона, но нужна будет обратная связь. Посмотри 3 урок, там вроде по-другому звук, хотя я ничего не менял
Привет! А если ты хочешь стилизовать элемент, то как хочешь дотянуться по селектору тега? Лично мне удобнее по классу, тег может поменяться, а класс можно добавить любому элементу. Да и вообще в привычку вошло
@@OlechkaZay26 Если что-то не получается, можно взять исходники и вставить код. Исходники есть в описании. Если проблема решится, значит была допущена ошибка. После этого добавлять свой код или стирать код исходника (в зависимости с какой стороны решать проблему). Если вставить section-top.css не применяются стили? github.com/DmitryBerdnikov/pizzatime/blob/master/lesson1/css/section-top.css Проблема либо в css, какое-то свойство перекрывает, либо неправильно написано свойство. Проблем всегда может быть очень много. Поэтому точно сказать как решить не получится.
Если вдруг еще актуально. Я обернул в container все элементы внутри section-top (а не как автор ). .container { display: flex; justify-content: center; padding: 0 15px; width: 1200px; max-width: 100%; margin: 0 auto; }
У меня вопрос? ? Я к примеру не совсем новичок Знаю плохо html и css и все Подойдут ли такие видео для меня?? А пока жду ответа, буду смотреть все эти видео
здравствуйте, а что если в другом макете не получается открыть картинку(к примеру, логотип) в иллюстраторе таким способом как вы показываете? Это значит, что она была сделана не в иллюстраторе, а в фотошопе? И тогда ее просто нужно экспортировать в растровом формате?
@@Фронтендер-з6о спасибо за ответ, а вы не знаете случайно что за баг в хроме может быть с горизонтальным скроллом? делаю адаптив и на разрешении где-то 400px с чем-то, начинает он появляться. На форумах советует решение body {overflow-x: hidden;} но это к сожалению не решило мою проблему... Самое интересное, что я проинспектировал в firefox и там вроде бы все хорошо, не понимаю в чем может быть дело...
Привет, застрял на фотошопе. Как сделать так чтобы в фотошопе ничего не двигалось? Например когда ты тянешь картинку он у тебя обратно встает на место. Еще не могу найти как экспортировать несколько изображений. Пытался сделать как ты, но не получается.
Привет, я бы посоветовал уроки по фотошопу посмотреть, понять как это все работает. Достаточно знать базовый функционал. Вернуть прошлое действие ctrl+z. Горячие клавиши подсвечиваются. Выделить несколько изображений и нажать экспортировать как. Должно экспортироваться сразу несколько
Можно вместо картинки поставить цвет фона. Посмотреть работает ли цвет фона, если работает, значит проблема в изображении (либо оно не загрузилось, либо еще что-то). Если фона нету, то значит проблема в размерах, нужно задать правильные размеры фону
@@Фронтендер-з6о Проблема именно в самой картинке. типо большая (1920), в интернете пишут что не редкая проблема...решения только особо не нашёл. Картинка везде работает, но именно на айфонах, не видит.
не подскажите почему логотип в свг не отображается, а в пнг отображается.Экспортировал не как Вы,просто правой кнопкой и экспортировать как, может из-за этого?
Надо понять проблема в загрузке файла или svg. 1. Посмотреть загружается ли svg, можно открыть консоль и посмотреть нету ли там ошибок по загрузке. 2. Если svg грузится, но не отображается, значит проблема в svg. Открыть svg в браузер и посмотреть, работает или нет. Если экспортировать через Illustrator ошибок не должно быть, через photoshop не пробовал экспортировать
у меня такая же проблема. Решение: в коде самой картинки есть строчка: xlink:href="data:img/png; это неверный MIME-тип, его надо поменять на xlink:href="data:image/png; и все работает:) svg картинку открываешь с помощью блокнота и там меняешь и готово:)
@@YevhenKhreptun Да, я тоже так попробовал и получилось. Но, насколько я знаю, фотошоп не умеет правильно экспортировать svg. Если открыть полученный svg, то это будет png в base64. Пользы в масштабировании нету (можно попробовать увеличить размеры в коде), при увеличении теряется качество. И размер файла получается больше, чем если просто в png. Поэтому с фотошопа лучше в svg не экспортировать. Может есть плагины какие-то для этого, я экспортирую через illustrator
Привет! Вроде Monokai стояла marketplace.visualstudio.com/items?itemName=gerane.Theme-Monokai Сейчас пользуюсь marketplace.visualstudio.com/items?itemName=sdras.night-owl
1:12:55 Кто придумал этот тренд в web-дизайне, всегда делать фиксированную шапку... оно ж реально сжирает область видимости. Особенно на мониторах с 16:9, и тем более на 21:9. Ну это кошмар какой-то. И чуть ли не на каждом втором сайте эта хрень.
Привет! видео классные, пока все получается. Но пока обновляю страничку вручную, не могу установить browser-sync. Установил нод, вроде все норм запускаю команду и выходит ошибка npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 =4
Прошел всё по шагам, Browser-sync не работает, может ты что то упустил в инструкции, например, как установить git bash, может нужно что то установить через командную строку? удаляю короче всю эту хрень Git и Node.js не работает ни хера этот браузер синк
Это урок не по установке browser-sync 1. Нужно установить node.js 2. Перезагрузить комп 3. Если на windows можно поставить консоль от git или использовать cmd 4. Установить browser-sync через npm 5. Запустить в консоли browser-sync В разработке, очень много деталей, чем дальше, тем намного сложнее. Поэтому некоторые моменты будут непонятными и их нужно уметь самостоятельно решать
Ты, скорее всего, не установил Browsersync, как и я ))) Надо в консоле винды прописать это npm install -g browser-sync А потом запустить терминал в VisualStudio
Чувак кровь из носа как нужна верстка при помощи сборщика gulp 4 и всех нужных плагинов и препроцессоров!!! Я просто уже наверно 10 макет верстаю для нащинающих но никак немогу найти видосы про реальную верстку с gulp или webpack*(((. Но лайк не глядя!
Спасибо. Я буду делать верстку со сборкой проекта, сейчас делаю уроки по wordpress. После этого сделаю верстку посложнее, хотелось бы быстрее это делать, но время трудно распределять
43:25 ... в хедер одни дивы )))), вэм типа применяем а html5 не обращаем внимания. почем нельзя использовать секшен, артикл или иннер как оббертку, номер теле тоже нало своим тэгом, чтобы на сотке смотреть и набирать.... может вам рановато учить других? на 8 уроков столько ошибок. На продакшен пойдет, заказчик и так не шарит, но если это для начинающих надо давать строго по правилам... незнаю, так кажись правильно )))
Привет! Не совсем понял, что значит "в хедер одни дивы", "номер теле тоже нало своим тэгом" Буду рад посмотреть на правильный вариант разметки шапки, в текущей реализации не вижу ошибок. Уроки делал такими, какими я хотел бы их видеть, когда сам начинал. Если выпустите лучше уроки, то я только за, больше качественного контента будет.
@@Фронтендер-з6о Вы большой профи !Попробовал за Вами сделать,до 18 мин. все получилось ,а как ушли из редактора,увы,стало не просто.Согласен ,нужны базовые знания.Думал ,а вдруг смогу)
Таймкоды:
1:08 Что сделаем в уроке
1:35 Создаем структуру папок для проекта
2:34 Подключаем шрифты
4:00 Нарезаем изображения
9:06 Подключаем normalize css
10:08 Базовые стили CSS
13:00 Разбираем section-top
13:52 Верстаем section-top
16:02 Установка browser-sync
16:40 Запускаем browser-sync
18:10 Стили для section-top
36:25 Адаптив для section-top
39:42 Разбираем header-page
41:04 Верстаем header-page
44:58 Стили для header-page
01:01:04 Адаптив для header-page
великолепно, как жаль что Вы перестали выкладывать новые видео((
@@fresh_wind87 Привет! Да, к сожалению, до сих пор не выделил на это время
Какие платные уроки какие отговорки и оправдание если есть вот такие хорошие информационные и бесплатные видеоуроки где все доходчиво объясняют, спасибо за такую работу
Я нашел твой канал и ты молодец, это один из самвх немногих каналов, где действительно рассказываются полезные вещи. Спасибо, жду еще видео про верстку настоящих интернет магазинов
Очень круто и пошагово рассказываешь) продолжай в том же духе)
Чувак, ты просто красава! Легко, без затяжной интонации, быстро и понятно.
Спасибо
Спасибо!!! Круто, толково и системно. Мало кто умеет так точно определить и объяснить самые важные моменты. 👌👍
Спасибо)
Мне начало нравится уже,очень круто рассказываешь и приятно слушать, продолжай в том же духе и жду новые видео с продолжением!
Вообще четкая верстка , с объяснениями что да почему... аплодирую! Нового ничего конечно для себя не узнал но для новичков этот контент на вес золота).
Спасибо)
Очень понравилось! На фоне "курсов", где для верстки LP в 3 экрана 45 минут настраивается окружение (понты - понты), все по делу.Коротко и ясно. Согласен с комментарием автора, что любая задача в верстке имеет несколько решений и какой способ выбрать в конкретном случае решает верстальщик (например в верстке под CMS будет логичным один подход, в другом случае - другой)
Успехов!
Спасибо) Про сборку проектов я в будущем сделаю, так как это полезная штука, ускоряет разработку. Хорошо, когда понимаешь как это работает, а не просто черная коробка, которая что-то делает)
Как спокойно просто и понятно все комментируете, спасибо большое подчерпнула для себя новые знания.Удачи в развитии♥
Спасибо
Спасибо большое за данные уроки. Делать сайты это хорошо, мне одному нравится что это кайф)?
Отдельное спасибо за горячие клавиши
Спасибо Зема! Красиво все и подробно, годнота! Респектище тебе!
Очень интересно!!! Желаю Удачи!!!
Спасибо большое за урок. Узнала много нового, отдельное спасибо за гамбургер :)
Спасибо)
Комментарий в поддержку автора! Так держать
Спасибо!
30:00 Box-shadow для кнопки
31:00 styles :hov посмотреть hover в браузере
эффект нажатия: transform: scale(0.95)
Для тех у кого нет в PS шрифтов Roboto и Monserrat: Заходите в Google Fonts, выбираете их и все их вариации, как в этом видео (все также) далее в верхнем правом углу есть иконка загрузки (стрелка вниз) вот ее нажимаете и у вас качается в загрузки зипованный файл. Распаковываете его где-то и потом когда зайдете в эту (распакованную) папку просто мышкой кликаете по каждому шрифту он открывается и там сверху должна быть кнопка "Установить" (нужны права админа). далее перезагружаетесь и заново открываете PS. Шрифты должны автоматом заработать.
Очень качественно. Каждая строчка объясняется, в описании материалы урока и полезные ссылки... Мечта, а не канал
Спасибо!
Очень качественный урок, лайк.
Удачно зашел сюда!Первое видео отличное!Подписка ,буду дальше смотреть!Только не пропадай,делай дальше такие видео)
Спасибо, обязательно продолжу
@@Фронтендер-з6о Поставьте на Вордпресс пожалуйста, и если есть возможность показать варианты подключения рабочих кнопок к примеру вацап,ВК и т.д. то это будет просто огонь!!!!
@@dobrMAV посадку на ВордПресс скоро сделаю. Можешь объяснить про кнопки? Чтобы при нажатии открылся WhatsApp с номером?
@@Фронтендер-з6о Да,открылся вацап и клиент мог сразу писать в нем.Про телефон тоже слышал ,можно сделать чтобы при нажатии на номер когда зашел с телефона на сайт идет набор.
@@dobrMAV Для мессенджеров ru.stackoverflow.com/questions/607412/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8-%D0%BD%D0%B0-viber-whatsapp-telegram
Спасибо большое! Жду ещё видео.
Спасибо за труд, все круто!
Спасибо!
Спасибо! Жду новые видео! Было бы интересно узнать про натяжку вёрстки карточки товара в Woocommerce. То есть как изменять карточку товара в соответствии с макетом/вёрсткой.
*Классно, практически все понятно*
Молодец. Крутой урок!
Урок не совсем для новичков. Эта верстка учитывает многие аспекты для работы высокого качества. Объяснение супер и сам макет интересный!
Привет! Скажи пожалуйста на 1:04:00 зачем делать такую разметку у кнопки, не совсем понимаю, я знаю метод через button и внутри просто 3 span а и мы к ним потом к каждому обращаемся, чтобы поменять расположение, а вот тут, как я понял, btn-menu__box мы делаем для того чтобы область нажатия была 40px или область нажатия делается в стилях самой кнопка btn-menu, указав padding 15px, а сами полоски это уже btn-menu__inner, верно?
Привет!
Да, точно не помню. Но один и тот же функционал можно по-разному реализовать. Поэтому, если знаешь как проще и лаконичнее, то делай как проще)
Сейчас я бы скорее всего делал по-другому. Например, можно было бы положить один спан. Сам спан был бы полоской + два псевдоэлемента у спана можно было сделать полосками.
Молодец, спасибо за видео, только мало объясняешь то, что пишешь.
Привет! Спасибо за материал! :)
Просьба: я сижу за ноутом и одновременно повторяю за тобой. Но очень тихий звук, прям напрягает сильно, уже хочется подключить наушники. Было бы здорово, если звук будет погромче.
Из сильных сторон: твой урок - это редкий случай, когда не то чтобы 1,25 или 1,5 не хочется ставить, а наоборот, иногда думал притормозить. )))
Очень хороший контент, много решений. Ставлю на паузу и экспериментирую))
Думаю, название не соответсвует, это не для новичков, а для тех, кто уже достаточно «поковырялся в коде. Например, новичку не реально влезть в Настройки VS Code и настроить GIT и Bush. C Photoshop будут тоже трудности. (А почему ты не стал использовать Figma? )
Например, как включить сетку, как приближать картину итд.
Надеюсь, и дальше будет также ))
Привет! Спасибо за комментарий)
1. Со звуком я только разобрался где-то только после 4 урока, поэтому вначале с этим были проблемы
2. Да, я согласен это не для тех кто первый раз открыл редактор кода. Но все же по опыту, это больше для начинающих, можно было назвать без подписи начинающих, но уже как есть)
3. Figma отличный инструмент, в следующих курсах макеты буду делать в нем. Фотошопом пользовался просто для разнообразия, его для верстальщика тоже желательно знать
Спасибо большое за видео! Классный формат, уместные и понятные комментарии 👍 Возник вопрос на 53:30 - здесь используются стили top: 50%; transform: translateY(-50%). Почему нельзя применить просто top: (-50%)?
Привет!
Потому что нам нужно сместить элемент относительно своей оси на 50%
Здесь описано medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e
@@Фронтендер-з6о Спасибо!)
Спасибо! Отличный урок! Жаль что мне не попался когда я только вёрстку осваивала, сейчас смотрю ради WP)
Но качество видео и звука печалька(
Привет! Звук в следующих уроках будет лучше
Я только одно не понимаю, почему многие макету сделаны на 1200-1300px, почему не 1920 как на большинстве экранов ?
Круто) давай натяним на водпресс после верстки 👍
Окей, сделаем
Спасибо!
Привет. на 55 минуте делаешь плашки для меню с помощью before. Подскажи, не проще ли сделать с помощью paddinga? и в чем отличие?
Привет, да с padding это сделать легче. Здесь я намудрил, как альтернативный вариант. В уроках по wp пришлось переделать на padding, так как там меню генерируется без span внутри ссылки.
Отличие в том, что если делать это через padding, то высота шапки будет зависеть от ссылок, так как мы хотим, чтобы при наведении фон был от верхнего края до нижнего. Если мы удалим меню, то логотип и телефон прижмутся к краям шапки. Если мы делаем через before, то ничего не изменится, так как в этом случае мы задаем шапке свои отступы.
На практике я не встречал, чтобы нужно было удалить меню. Поэтому можно делать через padding
почему не на основе bootstrap вёрстка построена? Где грань когда нужен bs, а когда вручную проще?
Привет!
С опытом будет понятно нужно ли его использовать в конкретном проекте или нет. Разделение когда его использовать у каждого будет свое.
А в чем разница между добавлением svg картинки в иллюстратор и тем, что можно нажать на кнопку экспортировать как, и тоже на выходе получишь svg изображение?
Будет формат svg и там, и там. Но если через фотошоп, то в svg все равно будет растровое изображение. Можно попробовать так сделать и открыть эти два файла в редакторе, там будет сразу видно разницу. Лучше это не в теории знать, а на практике проверить
@@Фронтендер-з6о а как понять, когда надо в иллюстратор вставлять, а когда нет? И иллюстратор как я понял это отдельное приложение?
@@КамильМиникеев-г5ъ svg точно не нужно экспортировать через photoshop, для этого нужно пользоваться иллюстратором или другим редактором, где есть поддержка svg.
Да, илюстратор это отдельное
@@Фронтендер-з6о хорошо, спасибо за ответ)
Очень понравилась подача материала. Спасибо за проделанную работу. С вами можно как-нибудь связаться?
Спасибо, да, vk.com/berdnikovdmitry
имхо проще скачать расширение в vsc называется LiveServer
Не пробовал LiveServer, может классная штука для простых сайтов. Но когда я использую сборку, то browser-sync не хочется менять
@@Фронтендер-з6о чувак, продолжай пилить видосы, ты красава, благодаря тебе я узнал про трансформ скейл)) Верстаю уже с месяц, уже могу верстать макеты, но пока без адаптивности, вот твоими видосами учусь адаптивности)
Юзайте @import в main.css для подключения файлов, чтобы не копить все css файлы в .
Здравствуйте,подскажите,какой версией фотошопа пользуетесь?
Здравствуй! Сейчас стоит CC 2017
Спасибо,ок.
а нормальной ли практиков будет писать названия классов типа section-top__p или section-top__h1 или это будет считаться не очень правильно?
Привет!
Лучше section-top__text и section-top__title. Так мы не привязываемся к тегам, а то будет странно, если это кнопка, а у нее например будет класс section-top__p
но есть же live server :)
Инструментов большое количество. live server не пробовал и каждый чем-то отличается. Например, в browser-sync есть синхронизация бразуеров, если открыть страницу на двух браузеров, то при прокрутке в одном браузере будет работать прокрутка в другом. Возможно, это есть и в live server
Не понимаю, как у Вас получается в один class, что в html, вложить два разных контейнера и все нормально работает? Прошу объяснить
Приветствую!
А можете подсказать на таймкод видео. Или показать код на гитхабе?
Добрый день) Урок крутой, подскажите можно пожалуйста макет в фигме?
Буду очень благодарна
Здравствуй! К сожалению я делал тогда макеты еще только в фотошопе
Курс очень интересный , но пожалуйста подумай над микрофон . Басс перевешивает уровень и долго слушать больно.Заранее спасибо )
Спасибо, пока не разобрался как лучше. Я бы для эксперимента сделал тестовое видео с 2-3 разными настройками микрофона, но нужна будет обратная связь. Посмотри 3 урок, там вроде по-другому звук, хотя я ничего не менял
Спасибо за видео.Вопрос: Зачем там много классов к элементам (я про классы page-li, img logo, phone и т.д.) разве это не считается дурным тоном?
Привет! А если ты хочешь стилизовать элемент, то как хочешь дотянуться по селектору тега? Лично мне удобнее по классу, тег может поменяться, а класс можно добавить любому элементу. Да и вообще в привычку вошло
Дурной не дурной. Это всё относительно. Как говорит автор, заказчик например захочет поменять тег, придётся и css переделывать.
Добрый, подскажи пож, почему в инспектор кода для section-top__container width: 520px; перечернкуто, в чем проблема?
Привет! Без контекста не понять.
@@Фронтендер-з6о Лучшая пицца в Москве у меня одной строчкой у вас переносится, для section-top__container width: 520px у меня не применилось(
@@OlechkaZay26 Если что-то не получается, можно взять исходники и вставить код. Исходники есть в описании. Если проблема решится, значит была допущена ошибка. После этого добавлять свой код или стирать код исходника (в зависимости с какой стороны решать проблему).
Если вставить section-top.css не применяются стили?
github.com/DmitryBerdnikov/pizzatime/blob/master/lesson1/css/section-top.css
Проблема либо в css, какое-то свойство перекрывает, либо неправильно написано свойство. Проблем всегда может быть очень много. Поэтому точно сказать как решить не получится.
@@Фронтендер-з6о проблема в подключении css файлов, видимо нарушена очередность)
Если вдруг еще актуально. Я обернул в container все элементы внутри section-top (а не как автор ).
.container {
display: flex;
justify-content: center;
padding: 0 15px;
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
У меня вопрос? ?
Я к примеру не совсем новичок
Знаю плохо html и css и все
Подойдут ли такие видео для меня??
А пока жду ответа, буду смотреть все эти видео
В данном курсе, нужно знать css, js, html на базовом-среднем уровне, чтобы понимать что происходит. Попробуй, а там уже сам решишь
@@Фронтендер-з6о Попробовал вроде пока понятно
здравствуйте, а что если в другом макете не получается открыть картинку(к примеру, логотип) в иллюстраторе таким способом как вы показываете? Это значит, что она была сделана не в иллюстраторе, а в фотошопе? И тогда ее просто нужно экспортировать в растровом формате?
Здравствуй, если она сразу не открывается в иллюстраторе, скорее всего она не векторная.
Тогда остается только экспортировать в растровом формате.
@@Фронтендер-з6о спасибо за ответ, а вы не знаете случайно что за баг в хроме может быть с горизонтальным скроллом? делаю адаптив и на разрешении где-то 400px с чем-то, начинает он появляться. На форумах советует решение body {overflow-x: hidden;} но это к сожалению не решило мою проблему... Самое интересное, что я проинспектировал в firefox и там вроде бы все хорошо, не понимаю в чем может быть дело...
@@peterquill7120 Можно топорным способом убрать горизонтальный скролл, сделать доп обертку для всего сайта и для нее сделать overflow: hidden
Привет, застрял на фотошопе. Как сделать так чтобы в фотошопе ничего не двигалось? Например когда ты тянешь картинку он у тебя обратно встает на место. Еще не могу найти как экспортировать несколько изображений. Пытался сделать как ты, но не получается.
Привет, я бы посоветовал уроки по фотошопу посмотреть, понять как это все работает. Достаточно знать базовый функционал.
Вернуть прошлое действие ctrl+z. Горячие клавиши подсвечиваются.
Выделить несколько изображений и нажать экспортировать как. Должно экспортироваться сразу несколько
попробуй на www.markupeasy.ru/ закинуть, бесплатный аналог avocode
Такой вопрос. Фоновая картинка не отображается на Iphone ?Как можно исправить ?
Можно вместо картинки поставить цвет фона. Посмотреть работает ли цвет фона, если работает, значит проблема в изображении (либо оно не загрузилось, либо еще что-то). Если фона нету, то значит проблема в размерах, нужно задать правильные размеры фону
@@Фронтендер-з6о Проблема именно в самой картинке. типо большая (1920), в интернете пишут что не редкая проблема...решения только особо не нашёл. Картинка везде работает, но именно на айфонах, не видит.
бро все хорошо! ну когда начал стилизовать H1 развалилась верстка! и не пойму почему сижу голову ломаю! все делаю как по видео все так же!!
Как именно ломается? Есть хостинг? Можешь ссылку прислать на сайт?
не подскажите почему логотип в свг не отображается, а в пнг отображается.Экспортировал не как Вы,просто правой кнопкой и экспортировать как, может из-за этого?
Надо понять проблема в загрузке файла или svg.
1. Посмотреть загружается ли svg, можно открыть консоль и посмотреть нету ли там ошибок по загрузке.
2. Если svg грузится, но не отображается, значит проблема в svg. Открыть svg в браузер и посмотреть, работает или нет.
Если экспортировать через Illustrator ошибок не должно быть, через photoshop не пробовал экспортировать
@@Фронтендер-з6о спасибо за ответ
у меня такая же проблема. Решение: в коде самой картинки есть строчка: xlink:href="data:img/png; это неверный MIME-тип, его надо поменять на xlink:href="data:image/png; и все работает:) svg картинку открываешь с помощью блокнота и там меняешь и готово:)
@@YevhenKhreptun Да, я тоже так попробовал и получилось. Но, насколько я знаю, фотошоп не умеет правильно экспортировать svg. Если открыть полученный svg, то это будет png в base64. Пользы в масштабировании нету (можно попробовать увеличить размеры в коде), при увеличении теряется качество. И размер файла получается больше, чем если просто в png.
Поэтому с фотошопа лучше в svg не экспортировать. Может есть плагины какие-то для этого, я экспортирую через illustrator
Какая тема в vs code стоит?
Привет!
Вроде Monokai стояла
marketplace.visualstudio.com/items?itemName=gerane.Theme-Monokai
Сейчас пользуюсь marketplace.visualstudio.com/items?itemName=sdras.night-owl
@@Фронтендер-з6о спасибо!
Как скачать с гит хаба исходники
Нужно нажать на кнопку clone or download
@@Фронтендер-з6о УВЫ !!!но у меня нет такой кнопки вот скрин drive.google.com/open?id=1OQtjCZLchAerphKjwNz0UKcIzLrqhK5r
Я зарегистрирован на гит хабе
@@Hello_world_2020A Надо перейти в pizzatime и там нажать на кнопку
@@Фронтендер-з6о вот блин я олень
СРАБОТАЛО
Как скачать файлы с гит хаб?
Кнопка справа сверху есть clone or download. С помощью ctrl + f можно написать download и найти
@@Фронтендер-з6о спасибо
1:12:55 Кто придумал этот тренд в web-дизайне, всегда делать фиксированную шапку... оно ж реально сжирает область видимости. Особенно на мониторах с 16:9, и тем более на 21:9. Ну это кошмар какой-то. И чуть ли не на каждом втором сайте эта хрень.
Привет!
Да сжирает область. Думаю, оптимальное решение это когда, при скролле вниз шапка скрывается, а при скролле вверх показывается
Привет! видео классные, пока все получается. Но пока обновляю страничку вручную, не могу установить browser-sync. Установил нод, вроде все норм запускаю команду и выходит ошибка npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 =4
Привет! Попробуй обновить node и npm coderoad.ru/6237295/%D0%9A%D0%B0%D0%BA-%D1%8F-%D0%BC%D0%BE%D0%B3%D1%83-%D0%BE%D0%B1%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C-NodeJS-%D0%B8-NPM-%D0%B4%D0%BE-%D1%81%D0%BB%D0%B5%D0%B4%D1%83%D1%8E%D1%89%D0%B8%D1%85-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B9
Надеюсь, ты живой ибо нужна помощь!!!
Момент с background: url (.../img/section-top/bg.jpg/) фото не грузит. Если поставить колор показывает текст. вопрос почему фотографию не показывает?
@@nezox7585
Можно ввести адрес картинки в браузере и проверить. Если картинка не грузится, то она и не загрузится. Значит надо проверять урл картинки
Прошел всё по шагам, Browser-sync не работает, может ты что то упустил в инструкции, например, как установить git bash, может нужно что то установить через командную строку? удаляю короче всю эту хрень Git и Node.js не работает ни хера этот браузер синк
Это урок не по установке browser-sync
1. Нужно установить node.js
2. Перезагрузить комп
3. Если на windows можно поставить консоль от git или использовать cmd
4. Установить browser-sync через npm
5. Запустить в консоли browser-sync
В разработке, очень много деталей, чем дальше, тем намного сложнее. Поэтому некоторые моменты будут непонятными и их нужно уметь самостоятельно решать
Ты, скорее всего, не установил Browsersync, как и я )))
Надо в консоле винды прописать это
npm install -g browser-sync
А потом запустить терминал в VisualStudio
ахуенно
Чувак кровь из носа как нужна верстка при помощи сборщика gulp 4 и всех нужных плагинов и препроцессоров!!! Я просто уже наверно 10 макет верстаю для нащинающих но никак немогу найти видосы про реальную верстку с gulp или webpack*(((. Но лайк не глядя!
Спасибо. Я буду делать верстку со сборкой проекта, сейчас делаю уроки по wordpress. После этого сделаю верстку посложнее, хотелось бы быстрее это делать, но время трудно распределять
@@Фронтендер-з6о Хорошо жду и
wordpress )))
очень крутой канал есть : от 0 до 1 , там верстка есть на gulp - но макет сложноватый , но очень хороший для практики
Автор только можно по подробнее СДЕЛАТЬ БУДУЩИЙ УРОК gulp или webpack не все знают это
43:25 ... в хедер одни дивы )))), вэм типа применяем а html5 не обращаем внимания.
почем нельзя использовать секшен, артикл или иннер как оббертку, номер теле тоже нало своим тэгом, чтобы на сотке смотреть и набирать....
может вам рановато учить других? на 8 уроков столько ошибок.
На продакшен пойдет, заказчик и так не шарит, но если это для начинающих надо давать строго по правилам... незнаю, так кажись правильно )))
Привет!
Не совсем понял, что значит "в хедер одни дивы", "номер теле тоже нало своим тэгом"
Буду рад посмотреть на правильный вариант разметки шапки, в текущей реализации не вижу ошибок.
Уроки делал такими, какими я хотел бы их видеть, когда сам начинал. Если выпустите лучше уроки, то я только за, больше качественного контента будет.
До 18мин для начинающих,а как ушли из редактора это уже для профи,жаль,уже сложнее воспринимать что делаете.
Может есть вопросы, постараюсь ответить. А так да, чтобы понимать должны быть базовые знания
@@Фронтендер-з6о Вы большой профи !Попробовал за Вами сделать,до 18 мин. все получилось ,а как ушли из редактора,увы,стало не просто.Согласен ,нужны базовые знания.Думал ,а вдруг смогу)
вообще не для новичков.........................
Зачем ты запретил скачивать архив файлов?????? может я хотел код заценить чет поменять, тупо трата времени, дизлайк за такое
Привет! Ничего не понял, что запретил? Ссылки в описании открываются
Бред
Спасибо!