#8 Верстка сайта для начинающих | Оптимизация, html валидатор, доработки

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 58

  • @СергейСуворов-ч7ъ
    @СергейСуворов-ч7ъ Год назад +1

    Отличный курс Лучшее что встречал по этой теме! Обязательно надо смотреть после изучения основ в теории

  • @ГлебДубровский-д6ъ
    @ГлебДубровский-д6ъ 3 года назад +2

    Дмитрий, спасибо за годный курс по верстке! Обожаю, когда автор готовиться и преподносит информацию, четко без воды! 🔥 👍👏

  • @Фронтендер-з6о
    @Фронтендер-з6о  4 года назад +4

    Таймкоды:
    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

  • @webdarked
    @webdarked 3 года назад +1

    Спасибо за урок! Надеялся тут увидеть как делать сжатие и сливание css и js через какой - нить gulp.

  • @КамильМиникеев-г5ъ
    @КамильМиникеев-г5ъ 4 года назад +3

    Огромное спасибо за твои уроки, очень помогаешь!

  • @vvkk3423
    @vvkk3423 4 года назад +2

    Спасибо за работу

  • @dkyshka2436
    @dkyshka2436 4 года назад +4

    Ура!))

  • @oleksandrilchuck8482
    @oleksandrilchuck8482 4 года назад +2

    Спасибо, уроки огонь!

  • @ВладимирСиний-п7г
    @ВладимирСиний-п7г 4 года назад +3

    Очень хорошо объясняешь 👍 Молодец!

  • @ОлегСинепостолович
    @ОлегСинепостолович 4 года назад +1

    Зашёл сказать что узнал о тебе из рекламы твоей группы в вк, подписался, очень хорошие видосы ,спасибо)

  • @Mamikonars
    @Mamikonars 4 года назад +3

    Реально годный контент. Спасибо

  • @gvitoss
    @gvitoss 4 года назад +5

    Вот это был прям мегаполезный видеоурок! Я некоторых вещей за год обучения нигде не втречал в интернете) молодец! Сам учился или ходил на курсы?

    • @Фронтендер-з6о
      @Фронтендер-з6о  4 года назад +4

      Спасибо) За все время был только на одном курсе по wordpress, и то он был, по-моему мнению, низкого качества. А так, тонны информации с ютюба, книги, статьи, поиска в гугле, записи курсов

    • @romankemenchezhi7168
      @romankemenchezhi7168 4 года назад

      сколько зарабатываешь сейчас, братюня?

  • @constvntine5453
    @constvntine5453 4 года назад +3

    Блин, парень круто!
    Спасибо за уроки, прошу продолжай в том же духе, очень хорошо объясняешь)
    Знаешь, можно еще 1 или 2 плейлиста по верстке)
    Кстати нет ли в планах нативного js?

    • @Фронтендер-з6о
      @Фронтендер-з6о  4 года назад +1

      Спасибо) Планировал еще снимать курсы по верстки и по js есть планы. Сейчас доделал проект на wordpress, и вначале выйдут уроки по нему

    • @constvntine5453
      @constvntine5453 4 года назад +1

      @@Фронтендер-з6о Блин, респект (за js)
      Что мне нравится, это то что ты подробнее объясняешь что на практике.

  • @garikminasyan2659
    @garikminasyan2659 3 года назад

    Привет , у меня вопрос после 8 лекции когда хочу менять фотки на свои не получается, фотки вообще не отображаются, путь правильно указал , помоги пожалуйста

    • @Фронтендер-з6о
      @Фронтендер-з6о  3 года назад

      Привет! Выложи код на гитхаб, я посмотрю.

    • @garikminasyan2659
      @garikminasyan2659 3 года назад

      @@Фронтендер-з6о github.com/GarikMinasyan/GMG-Pharm.git , вот вчера я разобрался немного не получился с background ом и фото продукты не очень красиво смотреться и лого тоже когда формат svg совсем маленькая

    • @Фронтендер-з6о
      @Фронтендер-з6о  3 года назад

      @@garikminasyan2659 Логотипу, изображениям нужно свои значения width и height задать.
      Для логотипа можешь убрать height.
      Для товаров тоже убрать width и height.
      С бэкграундом нужно правильный адрес задать (url(img/section-top/bg_2.jpg)
      Я предполагаю, что у тебя небольшой опыт в верстке? Больше смотри уроков, читай статей и поймешь почему, что как работает

  • @chubrik08years
    @chubrik08years 4 года назад +1

    привет, будут уроки по php или django?

    • @Фронтендер-з6о
      @Фронтендер-з6о  4 года назад +1

      Привет, пока не планирую. Самое близкое это wordpress, но там php на базовом уровне достаточно знать

  • @vvkk3423
    @vvkk3423 4 года назад +1

    еще такой вопрос насколько давно ты начал заниматься всем этим?

  • @MaksssHome
    @MaksssHome 3 года назад

    Привет!) А как ты сделал анимацию при hover? Может какая-та библиотека или видео есть? Благодарю

    • @Фронтендер-з6о
      @Фронтендер-з6о  3 года назад

      Привет! Ты про какую аниацию? Если в видео, там код есть на гитхабе

    • @MaksssHome
      @MaksssHome 3 года назад

      @@Фронтендер-з6о Я про анимацию которая при выборе цены
      , я видел что есть код, но как его понять, может есть видео, где похожее рассматривается или просто про анимацию, как так же научиться) спасибо!)

    • @Фронтендер-з6о
      @Фронтендер-з6о  3 года назад

      @@MaksssHome Ты имеешь ввиду при выборе размеров? Или про сами кнопки? Попробуй скачать код и поиграться с ним, главное понять механизм

    • @MaksssHome
      @MaksssHome 3 года назад

      @@Фронтендер-з6о При выборе размеров

    • @Фронтендер-з6о
      @Фронтендер-з6о  3 года назад

      ​@@MaksssHome Если не совсем понятно, то просто нужно js подтянуть. Вначале может казаться сложным, потом сам скажешь, что это еще самое начало)
      В этом файле
      github.com/DmitryBerdnikov/pizzatime/blob/master/lesson6-animation/js/productChecker.js
      У меня так всегда, сначала кажется что это не реально самому сделать. Но если продолжать развиваться, то придет время, когда ты это поймешь.

  • @sauronin2058
    @sauronin2058 4 года назад +1

    Чувак кровь из носа как нужна верстка при помощи сборщика gulp 4 и всех нужных плагинов и препроцессоров!!! Я просто уже наверно 10 макет верстаю для начинающи и никак немогу найти видосы про реальную верстку с gulp или webpack*(((. Но лайк не глядя!

  • @sauronin2058
    @sauronin2058 4 года назад +1

    И еще добавлю сейчас очень много макетов для начинающих, но как дальше розвиваться? Видосов про реальную верстку практически нет, как научится использовать сборщики для верстки, как научиться использовать css препроцессоры. Я прошел полынй курс верстки на metanitе и прошел половину сайта "learnjavascript . ru" но я вообще не могу понять как верстать сложные макеты с вылезающими навбарами и так д.

    • @Фронтендер-з6о
      @Фронтендер-з6о  4 года назад +2

      Я свои первые реальные макеты делал по такому принципу как в видео, которые я записал, даже хуже намного. Поэтому для меня это реальный пример заказа когда есть макет и ты его делаешь до загрузку на хостинг с настройкой почты.
      Сборки проектов всего лишь упрощают работу. Не значит, что реальный проект только со сборкой. Я работал с напарником на проектах, он не использовал сборку и это ему не мешало делать реальные проекты.
      Можно не знать как что-то делается, для этого нужно гуглить. Если есть базовые знания в html, css, js и на практике получалось делать слайдеры, попапы и тд, то реализовать вылезающий навбар не составит труда. Если идет тупо копирование кода и непонимание что вообще происходит, тогда да, будет очень тяжело. А так принцип в таких вещах почти один и тот же
      1. Находишь элементы
      2. Навешиваешь слушатели событий (например click)
      3. При срабатывании события (например click), что-то делаешь с элементами (добавляешь класс, удаляешь)

    • @sauronin2058
      @sauronin2058 4 года назад +1

      @@Фронтендер-з6о Спасибо, понял)))

    • @romankemenchezhi7168
      @romankemenchezhi7168 4 года назад

      @@Фронтендер-з6о тут вопрос в другом. Как получить заказ, если на любой бирже на каждый заказ в первую же минуту по 30 предложений от верстальщиков выстреливает, 10 из которых супер гуру с миллиардными рейтингами и выберут естественно именно их. Я просто не верю, что сейчас на рынке верстки новичок может получить заказ.

    • @Фронтендер-з6о
      @Фронтендер-з6о  4 года назад +2

      @@romankemenchezhi7168 Привет! Фриланс биржи это один из десятков источников, где ты можешь получить заказ. Если не получается там, надо пробовать еще места. Просто фриланс биржа это самое очевидное, но есть куча всего другого, можно даже самому придумать, где получить заказ

  • @constvntine5453
    @constvntine5453 4 года назад +1

    Что то ролика не видно(

    • @Фронтендер-з6о
      @Фронтендер-з6о  4 года назад

      На днях выложу новые уроки. Мало времени уделял этому, но обязательно продолжу

    • @constvntine5453
      @constvntine5453 4 года назад

      @@Фронтендер-з6о ok

  • @sweetiebear01
    @sweetiebear01 4 года назад +12

    только попробуй забросить канал!)

    • @Фронтендер-з6о
      @Фронтендер-з6о  4 года назад +13

      Хаха) Ради таких комментариев хочется продолжать. Дальше больше и лучше

  • @МашинистМашинистов

    Это нормально, что только один css файл? Логичнее же вообще начать с мобилок(он же общий)+общий для десктопа, далее для остальных страниц. Я имею ввиду, что лучше много css фалов, чем один, ведь с одним общим css файлом очень много стилей ненужных грузится во многих случаях

    • @Фронтендер-з6о
      @Фронтендер-з6о  3 года назад +1

      Привет! Ты про подход mobile first?
      Организация файлов решается с препроцессорами, все файлы разбиваем на подфайлы, которые собираются в один файл.
      Не знаю, чем может быть лучше, если у нас будет много файлов. Раньше, точно было лучше когда один файл, так как много файлов это были дополнительные запросы к серверу. Сейчас как пишут с переходом на http2 множество файлов не должно вызывать такую проблему.
      Решил проверить по скорости загрузки
      CSS и html одинаковые
      1) Один css файл
      berdnikovdima.ru/tests/one_css/
      2) Десять css файлов
      berdnikovdima.ru/tests/test_css/
      Там где 10, грузится медленнее. Можно проверить в google page speed. Разница в 1 секунду.

    • @МашинистМашинистов
      @МашинистМашинистов 3 года назад

      @@Фронтендер-з6о я про http2 и имел ввиду. Допустим, если это многостраничник и стили на других страницах частично отличаются от главной(информационный сайт, где страница со статьями заимствует частично стили от главной), получается нам на странице со статьями приходится грузить кучу css кода от главной и наоборот, т.к. css то у нас один на всех

    • @МашинистМашинистов
      @МашинистМашинистов 3 года назад

      @@Фронтендер-з6о по этой же логике и мобайл фёрст, мы заходим с телефона и грузим кучу стилей для десктопа, просто я сейчас верстаю собственный проект и нахожусь в перфекционистских раздумьях)

    • @МашинистМашинистов
      @МашинистМашинистов 3 года назад

      @@Фронтендер-з6о я начал копать в этом направлении и наткнулся на интересную мысль на хабре:
      "Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее..."

    • @Фронтендер-з6о
      @Фронтендер-з6о  3 года назад +1

      ​@@МашинистМашинистов Если брать два подхода mobile first и desktop first, то я бы выбрал mobile first.
      А если думать, стоит ли разделять файлы, то я бы не парился и грузил 1 css, так как css кэшируется. Если человек зайдет на одну из страниц и он загрузит css, то на других страницах ему не придется заного грузить. А если будут разные файлы, то придется грузить на каждой страницы свои уникальные стили.
      Если проект очень большой, то возможно стоит искать какие-то варианты. Если прям хочется оптимизировать, то я бы смотрел в сторону critical css. Но для небольших проектов, один файл не должен навредить.