Создание сайта с нуля + адаптивная вёрстка по макету! HTML | SCSS | БЭМ

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

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

  • @andrew_front
    @andrew_front  4 месяца назад +63

    Хочешь стать Frontend-разработчиком?
    Я лично помогу тебе в решении вопроса!
    ✍ Запись на консультацию и условия здесь: t.me/IT_shopen/143

  • @woodju69
    @woodju69 14 дней назад +1

    Ролик реально бомбовый, во время верстки узнал много нового, бэм выучил, в scss разобрался, еще и первый сайт сверстал, спасибо огромное тебе!!!

  • @iuliiapankevych547
    @iuliiapankevych547 3 дня назад

    Спасибо за отличное видео. 👍По новым данным Scss :вместо import теперь use. (как для новичка-это было сложно). Плюс у меня не вышло проработать dashboard picture, он терялся за синим фоном или выходил за рамки синего фона(первого экрана).

    • @andrew_front
      @andrew_front  3 дня назад +1

      @@iuliiapankevych547 спасибо! Да, посмотрю новые спецификации, поправлю. Но знать старые моменты по коду не менее важно, так как на работе вы столкнётесь с реальной кодовой базой и она, поверьте, не всегда новая и далеко не всегда там всё соответствует современным стандартам)) Вскоре планирую выпустить ролик похожего формата, но попроще с уклоном в новичков, надеюсь будет полегче. В любом случае спасибо вам, успехов в обучении!

  • @dratyti878
    @dratyti878 4 месяца назад

    Ролик супер, для фронтендеров будет информативно, интересно было послушать на фоне

  • @juliar7429
    @juliar7429 4 месяца назад +2

    отличное видео! спасибо ☺

  • @sevdev9374
    @sevdev9374 3 месяца назад +3

    По семантике лучше делать структуру header main> section footer

    • @andrew_front
      @andrew_front  Месяц назад

      нуууу хз, подумаю, посмотрю, если что в следующих курсах поправлю, спасибо.

  • @unicoxr5tj417
    @unicoxr5tj417 3 месяца назад

    поддержим лайком

  • @DS_av
    @DS_av 3 месяца назад

    Продолжайте дальше)

  • @signorsmile9930
    @signorsmile9930 4 месяца назад +5

    Супер ролик, всё предельно просто и понятно
    Спасибо Вам за такой ресурс!!!
    Буду дальше следить за Вашими трудами🙃
    *Это что, новый Александр Ламков? :D

    • @andrew_front
      @andrew_front  4 месяца назад +1

      Рад, что понравилось!

    • @williamaftonaugusternstvon2108
      @williamaftonaugusternstvon2108 2 месяца назад

      Тоже хотел про указать на сходство с Александром

  • @NtDrke
    @NtDrke 2 месяца назад +2

    Спасибо за урок! Но у меня возник вопрос, ведь адаптив не полноценный. Если зайти в панель разработчика и поставить масштаб 200%, то все станет крупно, значит верстка не подстроилась под размеры экрана полноценно. Если зайти на яндекс(короткий адрес) то как бы ты не увеличивал на десктопе верстка подстраивается под экран.

    • @andrew_front
      @andrew_front  Месяц назад

      Благодарю за просмотр! Только что перепроверил финальный сайт - адаптив выполнен корректно, вёрстка подстраивается под размер экрана устройства на любом масштабе + можно открыть панель разработчика и попробовать отобразить сайт на разных устройствах - всё смотрится верно. На ПК версии если масштаб увеличивать всё тоже окей - просто всё крупное так как мобильная версия активируется, а у Яндекса по другому реализовано - там на большом масштабе просто сужается интерфейс, а для смартфонов вообще отдельная версия страницы загружается, а в моём курсе просто десктопный сайт превращается в мобильную версию постепенно, но с адаптивом в целом всё в порядке.

  • @nekonatapersono8754
    @nekonatapersono8754 3 месяца назад

    Видео классное, только пожалуйста, в следующий раз, если есть такая возможность, записывайте аудио и видео одновременно, потому что записанное аудио после записанного видео не очень удачно ложиться на видеоряд и воспринимать информацию сложно. Аудио с опозданием идёт от видео на 10-20 секунд.

    • @andrew_front
      @andrew_front  3 месяца назад

      попробую, конечно, но такое видео затянется на 4+ часов.

  • @Triplanar
    @Triplanar 3 месяца назад

    топ👍

  • @iuriipototskii
    @iuriipototskii 3 месяца назад +1

    нарезка секций по экранам?
    спасибо, что сказал об этом на первых минутах, дальше можно не сиотреть

    • @andrew_front
      @andrew_front  3 месяца назад

      А зря... Дальше вся вёрстка идёт логично по блокам. Я согласен, что в курсе этот момент вводит в лёгкое заблуждение. Мы не идеальные люди. Мои курсы тоже имеют где-то какие-то косяки. Не беда, исправим )

    • @BaraBaranym
      @BaraBaranym Месяц назад

      а что можно смотреть?

    • @andrew_front
      @andrew_front  Месяц назад

      @@BaraBaranym Можно смотреть всё, что захотите. Автор комента выше посмотрел от силы 10 минут моего видеокурса и уже написал вывод.
      Это тоже самое, что сделать вывод о книге в 500 страниц, прочтя первые 10 со словами: "ну всё ясно..."
      Думайте своей головой, анализируйте, смотрите, ищите полезный материал самостоятельно, а по поводу нарезки макета я уже отвечал выше, не вижу здесь прям большого горя. Это мелочь на фоне следующей части курса.

  • @azizbekjuraev1
    @azizbekjuraev1 21 день назад

    Why are you using png, instead of svg ? 7:20

  • @legendofpain1x915
    @legendofpain1x915 3 месяца назад +1

    С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента
    Sign in
    Sign Up

    • @andrew_front
      @andrew_front  3 месяца назад

      Да, я про это где-то уже писал... ошибся немного, с кем не бывает. Не критично, так как остальная вёрстка вполне валидна.

  • @Oleksandr-l9g
    @Oleksandr-l9g 3 месяца назад +2

    Блин, видео классное, но для начинающих лучше было бы разбить это видео на 2 части и помедленнее. Ставлю скорость на 0.75. Как то пытаюсь вникнуть.

    • @andrew_front
      @andrew_front  3 месяца назад

      да, перебрал я со скоростью, буду улучшать со временем качество видео. Спасибо :)

    • @Oleksandr-l9g
      @Oleksandr-l9g 3 месяца назад +1

      @@andrew_front В любом случае, спасибо за такую огромную работу. Будем подтягиваться до Вашего уровня.

  • @Shokhrukh7oo7
    @Shokhrukh7oo7 4 месяца назад

    красава брат, просто бомба. А можем сделать какой-то реальный проект в vue js?

    • @andrew_front
      @andrew_front  4 месяца назад

      Привет! Спасибо за фидбэк) Вряд-ли по вью что-то будет. Маловероятно.

  • @dobrMAV
    @dobrMAV 3 месяца назад

    Где эти знания можно применить ? Желающих устроиться на работу на одно место немало .

    • @andrew_front
      @andrew_front  3 месяца назад +3

      Это начало веб-разработки.
      С этого стартуют все Frontend-разработчики.
      Без вёрстки далеко не уедешь.
      Конкретно те знания, что я в курсе передаю можно как минимум применить для создания полноценного приложения на ReactJS в будущем.
      А вы хотели посмотреть 1 видеоурок и стать программистом за 2 часа?
      Мне жаль, но так не бывает.
      Это долгий и тернистый путь и его придётся проходить от начала и до конца, если вы желаете добиться успеха.

  • @ligh7fun
    @ligh7fun 4 месяца назад

    В тг забыли скинуть ссылку на макет :(

    • @andrew_front
      @andrew_front  4 месяца назад

      Да, точно! Спасибо! Добавил

  • @Begay17
    @Begay17 12 дней назад

    Сможете мне помочь сверстать один макет?)

    • @salimoon17
      @salimoon17 10 дней назад

      можем попробовать вместе

  • @serhioramires3166
    @serhioramires3166 19 часов назад

    Талант... языком еле шевелит временами, косноязычный, объясняет так чтобы потруднее было понять что делает... Какие-то основополагающие знания вынести не получится.
    Ютуб конечно сильно проседает от таких ребят. Вроде инфа есть, но ее уровень низкий.

  • @user-pf9wz2ik2r
    @user-pf9wz2ik2r 3 месяца назад

    Давай Reacr

  • @servera-center
    @servera-center 3 месяца назад

    ну я б лучше сделал функцию из px + rem

  • @serhioramires3166
    @serhioramires3166 19 часов назад

    Очень много слов вообще и "просто" в частности.

  • @ЯрославГомон-т1м
    @ЯрославГомон-т1м 4 месяца назад

    первые минут 30 музыка на фоне очень отвлекает, какой-то перегруз звуком, пытаешься специально вслушиваться в речь. и еще кнопки мыши очень громко, особенно в колесе.

    • @andrew_front
      @andrew_front  4 месяца назад

      Да, музыку в следующих курсах буду оставлять только в концовке. Перегруз действительно есть, его заметил поздно, уберу в следующих туториалах. Возможно, у вас не очень хорошие наушники, так как голос и речь вполне чистая без проблем. Громкость можно убавить, главное, чтобы были слышны слова. Попробуйте смотреть курс, используя другую акустику. Кнопки и щелчки да, тоже поправлю, спасибо.

    • @the.lightfall
      @the.lightfall Месяц назад +1

      @@andrew_front У меня постоянно играет похожего рода музыка. Сначала подумал, что у меня уже включен плейлист с музыкой, а потом как понял =) Отказался от своего плейлиста во имя высшей цели.