Таймкоды: 0:38 Добавляем зависимость цен от размеров 4:34 Убираем фокус с кнопок при нажатии мышкой 7:10 Объединяем стили 8:33 Объединяем скрипты 9:29 Оптимизируем изображения 10:42 LazyLoad для изображений 17:24 Конвертируем изображения в webp 31:00 LazyLoad для яндекс карты 42:48: Html validator 48:50 Кроссбраузерность 52:20 Мета теги 54:04 Favicon
Спасибо) За все время был только на одном курсе по wordpress, и то он был, по-моему мнению, низкого качества. А так, тонны информации с ютюба, книги, статьи, поиска в гугле, записи курсов
Блин, парень круто! Спасибо за уроки, прошу продолжай в том же духе, очень хорошо объясняешь) Знаешь, можно еще 1 или 2 плейлиста по верстке) Кстати нет ли в планах нативного js?
Привет , у меня вопрос после 8 лекции когда хочу менять фотки на свои не получается, фотки вообще не отображаются, путь правильно указал , помоги пожалуйста
@@Фронтендер-з6о github.com/GarikMinasyan/GMG-Pharm.git , вот вчера я разобрался немного не получился с background ом и фото продукты не очень красиво смотреться и лого тоже когда формат svg совсем маленькая
@@garikminasyan2659 Логотипу, изображениям нужно свои значения width и height задать. Для логотипа можешь убрать height. Для товаров тоже убрать width и height. С бэкграундом нужно правильный адрес задать (url(img/section-top/bg_2.jpg) Я предполагаю, что у тебя небольшой опыт в верстке? Больше смотри уроков, читай статей и поймешь почему, что как работает
@@Фронтендер-з6о Я про анимацию которая при выборе цены , я видел что есть код, но как его понять, может есть видео, где похожее рассматривается или просто про анимацию, как так же научиться) спасибо!)
@@MaksssHome Если не совсем понятно, то просто нужно js подтянуть. Вначале может казаться сложным, потом сам скажешь, что это еще самое начало) В этом файле github.com/DmitryBerdnikov/pizzatime/blob/master/lesson6-animation/js/productChecker.js У меня так всегда, сначала кажется что это не реально самому сделать. Но если продолжать развиваться, то придет время, когда ты это поймешь.
Чувак кровь из носа как нужна верстка при помощи сборщика gulp 4 и всех нужных плагинов и препроцессоров!!! Я просто уже наверно 10 макет верстаю для начинающи и никак немогу найти видосы про реальную верстку с gulp или webpack*(((. Но лайк не глядя!
И еще добавлю сейчас очень много макетов для начинающих, но как дальше розвиваться? Видосов про реальную верстку практически нет, как научится использовать сборщики для верстки, как научиться использовать css препроцессоры. Я прошел полынй курс верстки на metanitе и прошел половину сайта "learnjavascript . ru" но я вообще не могу понять как верстать сложные макеты с вылезающими навбарами и так д.
Я свои первые реальные макеты делал по такому принципу как в видео, которые я записал, даже хуже намного. Поэтому для меня это реальный пример заказа когда есть макет и ты его делаешь до загрузку на хостинг с настройкой почты. Сборки проектов всего лишь упрощают работу. Не значит, что реальный проект только со сборкой. Я работал с напарником на проектах, он не использовал сборку и это ему не мешало делать реальные проекты. Можно не знать как что-то делается, для этого нужно гуглить. Если есть базовые знания в html, css, js и на практике получалось делать слайдеры, попапы и тд, то реализовать вылезающий навбар не составит труда. Если идет тупо копирование кода и непонимание что вообще происходит, тогда да, будет очень тяжело. А так принцип в таких вещах почти один и тот же 1. Находишь элементы 2. Навешиваешь слушатели событий (например click) 3. При срабатывании события (например click), что-то делаешь с элементами (добавляешь класс, удаляешь)
@@Фронтендер-з6о тут вопрос в другом. Как получить заказ, если на любой бирже на каждый заказ в первую же минуту по 30 предложений от верстальщиков выстреливает, 10 из которых супер гуру с миллиардными рейтингами и выберут естественно именно их. Я просто не верю, что сейчас на рынке верстки новичок может получить заказ.
@@romankemenchezhi7168 Привет! Фриланс биржи это один из десятков источников, где ты можешь получить заказ. Если не получается там, надо пробовать еще места. Просто фриланс биржа это самое очевидное, но есть куча всего другого, можно даже самому придумать, где получить заказ
Это нормально, что только один css файл? Логичнее же вообще начать с мобилок(он же общий)+общий для десктопа, далее для остальных страниц. Я имею ввиду, что лучше много css фалов, чем один, ведь с одним общим css файлом очень много стилей ненужных грузится во многих случаях
Привет! Ты про подход mobile first? Организация файлов решается с препроцессорами, все файлы разбиваем на подфайлы, которые собираются в один файл. Не знаю, чем может быть лучше, если у нас будет много файлов. Раньше, точно было лучше когда один файл, так как много файлов это были дополнительные запросы к серверу. Сейчас как пишут с переходом на http2 множество файлов не должно вызывать такую проблему. Решил проверить по скорости загрузки CSS и html одинаковые 1) Один css файл berdnikovdima.ru/tests/one_css/ 2) Десять css файлов berdnikovdima.ru/tests/test_css/ Там где 10, грузится медленнее. Можно проверить в google page speed. Разница в 1 секунду.
@@Фронтендер-з6о я про http2 и имел ввиду. Допустим, если это многостраничник и стили на других страницах частично отличаются от главной(информационный сайт, где страница со статьями заимствует частично стили от главной), получается нам на странице со статьями приходится грузить кучу css кода от главной и наоборот, т.к. css то у нас один на всех
@@Фронтендер-з6о по этой же логике и мобайл фёрст, мы заходим с телефона и грузим кучу стилей для десктопа, просто я сейчас верстаю собственный проект и нахожусь в перфекционистских раздумьях)
@@Фронтендер-з6о я начал копать в этом направлении и наткнулся на интересную мысль на хабре: "Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее..."
@@МашинистМашинистов Если брать два подхода mobile first и desktop first, то я бы выбрал mobile first. А если думать, стоит ли разделять файлы, то я бы не парился и грузил 1 css, так как css кэшируется. Если человек зайдет на одну из страниц и он загрузит css, то на других страницах ему не придется заного грузить. А если будут разные файлы, то придется грузить на каждой страницы свои уникальные стили. Если проект очень большой, то возможно стоит искать какие-то варианты. Если прям хочется оптимизировать, то я бы смотрел в сторону critical css. Но для небольших проектов, один файл не должен навредить.
Отличный курс Лучшее что встречал по этой теме! Обязательно надо смотреть после изучения основ в теории
Дмитрий, спасибо за годный курс по верстке! Обожаю, когда автор готовиться и преподносит информацию, четко без воды! 🔥 👍👏
Таймкоды:
0:38 Добавляем зависимость цен от размеров
4:34 Убираем фокус с кнопок при нажатии мышкой
7:10 Объединяем стили
8:33 Объединяем скрипты
9:29 Оптимизируем изображения
10:42 LazyLoad для изображений
17:24 Конвертируем изображения в webp
31:00 LazyLoad для яндекс карты
42:48: Html validator
48:50 Кроссбраузерность
52:20 Мета теги
54:04 Favicon
Спасибо за урок! Надеялся тут увидеть как делать сжатие и сливание css и js через какой - нить gulp.
Привет! Посмотри уроки по gulp на канале
Огромное спасибо за твои уроки, очень помогаешь!
Спасибо за работу
Ура!))
Спасибо, уроки огонь!
Очень хорошо объясняешь 👍 Молодец!
Спасибо)
Зашёл сказать что узнал о тебе из рекламы твоей группы в вк, подписался, очень хорошие видосы ,спасибо)
Спасибо)
Реально годный контент. Спасибо
Спасибо
Вот это был прям мегаполезный видеоурок! Я некоторых вещей за год обучения нигде не втречал в интернете) молодец! Сам учился или ходил на курсы?
Спасибо) За все время был только на одном курсе по wordpress, и то он был, по-моему мнению, низкого качества. А так, тонны информации с ютюба, книги, статьи, поиска в гугле, записи курсов
сколько зарабатываешь сейчас, братюня?
Блин, парень круто!
Спасибо за уроки, прошу продолжай в том же духе, очень хорошо объясняешь)
Знаешь, можно еще 1 или 2 плейлиста по верстке)
Кстати нет ли в планах нативного js?
Спасибо) Планировал еще снимать курсы по верстки и по js есть планы. Сейчас доделал проект на wordpress, и вначале выйдут уроки по нему
@@Фронтендер-з6о Блин, респект (за js)
Что мне нравится, это то что ты подробнее объясняешь что на практике.
Привет , у меня вопрос после 8 лекции когда хочу менять фотки на свои не получается, фотки вообще не отображаются, путь правильно указал , помоги пожалуйста
Привет! Выложи код на гитхаб, я посмотрю.
@@Фронтендер-з6о github.com/GarikMinasyan/GMG-Pharm.git , вот вчера я разобрался немного не получился с background ом и фото продукты не очень красиво смотреться и лого тоже когда формат svg совсем маленькая
@@garikminasyan2659 Логотипу, изображениям нужно свои значения width и height задать.
Для логотипа можешь убрать height.
Для товаров тоже убрать width и height.
С бэкграундом нужно правильный адрес задать (url(img/section-top/bg_2.jpg)
Я предполагаю, что у тебя небольшой опыт в верстке? Больше смотри уроков, читай статей и поймешь почему, что как работает
привет, будут уроки по php или django?
Привет, пока не планирую. Самое близкое это wordpress, но там php на базовом уровне достаточно знать
еще такой вопрос насколько давно ты начал заниматься всем этим?
Примерно 3 года назад
Привет!) А как ты сделал анимацию при hover? Может какая-та библиотека или видео есть? Благодарю
Привет! Ты про какую аниацию? Если в видео, там код есть на гитхабе
@@Фронтендер-з6о Я про анимацию которая при выборе цены
, я видел что есть код, но как его понять, может есть видео, где похожее рассматривается или просто про анимацию, как так же научиться) спасибо!)
@@MaksssHome Ты имеешь ввиду при выборе размеров? Или про сами кнопки? Попробуй скачать код и поиграться с ним, главное понять механизм
@@Фронтендер-з6о При выборе размеров
@@MaksssHome Если не совсем понятно, то просто нужно js подтянуть. Вначале может казаться сложным, потом сам скажешь, что это еще самое начало)
В этом файле
github.com/DmitryBerdnikov/pizzatime/blob/master/lesson6-animation/js/productChecker.js
У меня так всегда, сначала кажется что это не реально самому сделать. Но если продолжать развиваться, то придет время, когда ты это поймешь.
Чувак кровь из носа как нужна верстка при помощи сборщика gulp 4 и всех нужных плагинов и препроцессоров!!! Я просто уже наверно 10 макет верстаю для начинающи и никак немогу найти видосы про реальную верстку с gulp или webpack*(((. Но лайк не глядя!
И еще добавлю сейчас очень много макетов для начинающих, но как дальше розвиваться? Видосов про реальную верстку практически нет, как научится использовать сборщики для верстки, как научиться использовать css препроцессоры. Я прошел полынй курс верстки на metanitе и прошел половину сайта "learnjavascript . ru" но я вообще не могу понять как верстать сложные макеты с вылезающими навбарами и так д.
Я свои первые реальные макеты делал по такому принципу как в видео, которые я записал, даже хуже намного. Поэтому для меня это реальный пример заказа когда есть макет и ты его делаешь до загрузку на хостинг с настройкой почты.
Сборки проектов всего лишь упрощают работу. Не значит, что реальный проект только со сборкой. Я работал с напарником на проектах, он не использовал сборку и это ему не мешало делать реальные проекты.
Можно не знать как что-то делается, для этого нужно гуглить. Если есть базовые знания в html, css, js и на практике получалось делать слайдеры, попапы и тд, то реализовать вылезающий навбар не составит труда. Если идет тупо копирование кода и непонимание что вообще происходит, тогда да, будет очень тяжело. А так принцип в таких вещах почти один и тот же
1. Находишь элементы
2. Навешиваешь слушатели событий (например click)
3. При срабатывании события (например click), что-то делаешь с элементами (добавляешь класс, удаляешь)
@@Фронтендер-з6о Спасибо, понял)))
@@Фронтендер-з6о тут вопрос в другом. Как получить заказ, если на любой бирже на каждый заказ в первую же минуту по 30 предложений от верстальщиков выстреливает, 10 из которых супер гуру с миллиардными рейтингами и выберут естественно именно их. Я просто не верю, что сейчас на рынке верстки новичок может получить заказ.
@@romankemenchezhi7168 Привет! Фриланс биржи это один из десятков источников, где ты можешь получить заказ. Если не получается там, надо пробовать еще места. Просто фриланс биржа это самое очевидное, но есть куча всего другого, можно даже самому придумать, где получить заказ
Что то ролика не видно(
На днях выложу новые уроки. Мало времени уделял этому, но обязательно продолжу
@@Фронтендер-з6о ok
только попробуй забросить канал!)
Хаха) Ради таких комментариев хочется продолжать. Дальше больше и лучше
Это нормально, что только один css файл? Логичнее же вообще начать с мобилок(он же общий)+общий для десктопа, далее для остальных страниц. Я имею ввиду, что лучше много css фалов, чем один, ведь с одним общим css файлом очень много стилей ненужных грузится во многих случаях
Привет! Ты про подход mobile first?
Организация файлов решается с препроцессорами, все файлы разбиваем на подфайлы, которые собираются в один файл.
Не знаю, чем может быть лучше, если у нас будет много файлов. Раньше, точно было лучше когда один файл, так как много файлов это были дополнительные запросы к серверу. Сейчас как пишут с переходом на http2 множество файлов не должно вызывать такую проблему.
Решил проверить по скорости загрузки
CSS и html одинаковые
1) Один css файл
berdnikovdima.ru/tests/one_css/
2) Десять css файлов
berdnikovdima.ru/tests/test_css/
Там где 10, грузится медленнее. Можно проверить в google page speed. Разница в 1 секунду.
@@Фронтендер-з6о я про http2 и имел ввиду. Допустим, если это многостраничник и стили на других страницах частично отличаются от главной(информационный сайт, где страница со статьями заимствует частично стили от главной), получается нам на странице со статьями приходится грузить кучу css кода от главной и наоборот, т.к. css то у нас один на всех
@@Фронтендер-з6о по этой же логике и мобайл фёрст, мы заходим с телефона и грузим кучу стилей для десктопа, просто я сейчас верстаю собственный проект и нахожусь в перфекционистских раздумьях)
@@Фронтендер-з6о я начал копать в этом направлении и наткнулся на интересную мысль на хабре:
"Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее..."
@@МашинистМашинистов Если брать два подхода mobile first и desktop first, то я бы выбрал mobile first.
А если думать, стоит ли разделять файлы, то я бы не парился и грузил 1 css, так как css кэшируется. Если человек зайдет на одну из страниц и он загрузит css, то на других страницах ему не придется заного грузить. А если будут разные файлы, то придется грузить на каждой страницы свои уникальные стили.
Если проект очень большой, то возможно стоит искать какие-то варианты. Если прям хочется оптимизировать, то я бы смотрел в сторону critical css. Но для небольших проектов, один файл не должен навредить.