Вёрстка сайта с нуля по макету Figma | HTML, CSS | Часть 1

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

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

  • @Serega-gs6lo
    @Serega-gs6lo Год назад +17

    Спасибо за бесплатные видеоуроки, мне как новичку более/менее всё понятно, если знать базовые вещи, например БЭМ, основные теги. Вот бы еще побольше про перенос самописа на Wordpress, про сам Вордпресс, как редактировать код, починить, например, форму, кнопку, создать правильно шаблон страницы, записи, кастомные поля. Я благодарен, продолжайте в том же духе, это адский труд.

    • @suralokinvelam3323
      @suralokinvelam3323 Год назад

      А ещё какие бывают виды слайдеров и их реализация причём со стоимостью например и описанием)

  • @After-n3d
    @After-n3d 10 месяцев назад +1

    спасибо, искал обучающий ролик по красивому макету по бем методологии, идеальный вариант :)

  • @Anton16180
    @Anton16180 Год назад +3

    Какой приятный голос. Смотрю на 1.75 (как и у всех времени не хватает), но так приятно, без тормозов, слов паразитов и долгих уходов в себя как у некоторых. Прям загляденье в общем. Успехов Вам в ваших проектах, всем добра!

  • @Yaroslav_2003
    @Yaroslav_2003 Год назад +3

    Огромная благодарность за Ваш профессионализм и доброту, через ноутбук так и передаётся Ваша поддержка и заинтересованность дать, как можно больше знаний🖤

  • @valerypobelenskiy1001
    @valerypobelenskiy1001 2 года назад +5

    Максим огромное спасибо за ваши труды и время ) крутой фронтендер)

  • @Saynex-g1t
    @Saynex-g1t Год назад +1

    очень круто что говоришь: что, зачем, куда, и что думаешь. Этого очень не хватает в подобних видео потому что хочеться не знать как конкретно сделать ту или иную вещь, а формулу как это делать что бы потом можно было самому создавать и так далее мужык тебе респескт.

  • @desavopa2760
    @desavopa2760 10 месяцев назад

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

    • @my.methed
      @my.methed  10 месяцев назад +1

      Спасибо большое, главное что бы было полезно!

  • @user-frond-end_dev
    @user-frond-end_dev Год назад +5

    низкий поклон за титанические старания! ждем продолжения данной рубрики на канале

  • @ziglobe5639
    @ziglobe5639 2 года назад +2

    Ждем!💥

  • @ДмитрийПешнин-з7у

    Спасибо огромное за такой труд))

  • @НикВла27
    @НикВла27 11 месяцев назад

    1:28:19 - возможно дело все таки в line-height, получается ты вместо 120% поставил 1, а 1 это как 100%, можно было бы с % поиграться

  • @gugilopguppy-ji8so
    @gugilopguppy-ji8so 11 месяцев назад

    Уроки огонь, спасибо

  • @romanzinchenko8048
    @romanzinchenko8048 Год назад +2

    Подскажи, что за плагин стоит в ВС чтоб отображались подключенные картинки? спасибо.

  • @arturogatti4462
    @arturogatti4462 Год назад +1

    Здравствуйте а вы всегда используете метод mobile first?

  • @Monte546-s1w
    @Monte546-s1w Год назад +2

    Не знал что с favicon надо так заморачиваться, обычно просто вставлял его одним тегом и не парился))

  • @sasha_08170
    @sasha_08170 Год назад +3

    Почему не качаешь с официального Google Fonts шрифты?

  • @kntbruh
    @kntbruh Год назад +1

    01:09:00 не получилось у меня после url прописать bottom/227px no-repeat, почему?
    пришлось отдельно всё это писать

    • @my.methed
      @my.methed  Год назад

      Свойство background или background-image?
      Нужно background, в нём можно прописать несколько свойств.

  • @goodbutbad1
    @goodbutbad1 2 года назад +1

    Классный ролик✊

  • @iamdadakhanov3069
    @iamdadakhanov3069 Год назад +2

    А нельзя ли сохранить лого как png?

  • @lionstar3189
    @lionstar3189 2 года назад +3

    Я бы подметил когда вставляете svg в html. не забывайте писать высоту и ширину в атрибутах svg тега, так svg не будет размером с экран, если стили вдруг не подключаться.

    • @my.methed
      @my.methed  2 года назад

      Не могу не согласиться, это вы верно отметили!

  • @РусланСуровежкин
    @РусланСуровежкин Год назад +5

    Спасибо за урок, но можешь пожалуцста подсказать почему когда я подключаю svg logo через sprite.svg оно просто не отображается а если просто в body вставляю svg( то что скопировал в фигма) все работает, не знаешь как решить ?(

    • @serhii_koliadko
      @serhii_koliadko Год назад

      Если я правильно понял Вашу проблему, удалив тег svg из sprite.svg оставив только symbol то спрайт отображается. В index.html уже есть тег svg, в котором подключаем sprite.svg в use. Видимо какой-то конфликт вложенности.

    • @ЕкатеринаРябова-ь8я
      @ЕкатеринаРябова-ь8я Год назад

      тоже самое. @@serhii_koliadko не помогло

    • @marinatimoshenko4799
      @marinatimoshenko4799 Год назад

      И у меня так же

  • @lsdkkdkkd
    @lsdkkdkkd 11 месяцев назад

    Если при загрузке svg ничего не отображается, а в коде странице видите ошибку, то стоит поставить сайт на локальный хостинг

  • @placid3495
    @placid3495 2 года назад +1

    Однозначно лайк!

  • @atom2683
    @atom2683 11 месяцев назад

    Почему при адаптации header (примерно 1:16:00 таймкод) при первом медиа запросе у меня бургер и надписи улетают влево? Уже все пересмотрел, сделал все точь-точь как в видео

    • @cff-ir6xv
      @cff-ir6xv 9 месяцев назад

      Приветствую! Понимаю, много времени прошло, но удалось как - то решить проблему?

    • @atom2683
      @atom2683 9 месяцев назад

      @@cff-ir6xv я долго ломал голову что не так, даже с самого начала просматривал ролик, но ничего не помогало. Поэтому я психанул и заново все переписал, и оно заработало. Так что это был либо баг либо моя невнимательность

  • @kntbruh
    @kntbruh Год назад +1

    Почему у меня в фигме нет всех css атрибутов, как это у Вас с текстом на 01:10:05?

    • @my.methed
      @my.methed  Год назад

      Вы скопировали макет к себе?
      Возможно просто не тот слой выделили

  • @dalex5789
    @dalex5789 Год назад

    А ничего если иконка бургера для сафари сохранилась файлом, на ярлыке которого указан explorer??? Или это дело в Виндоус 10? К тому же что делать если шрифты так и не загрузились? Может быть это связано с тем, что появился новый код для modern browsers, а я использовал как у вас - legacy support?

  • @Валерія-в1с
    @Валерія-в1с Год назад

    Подскажите пожалуйста, установила плагин SVG, иконка не появляется (в виде солнца) и не работает эммет. Что в настройках поправить нужно?

  • @АлексейВержавский-щ1д

    во время верстки столкнулся с проблемой, что шрифт почему-то по способу из видоса не импортирует русскую раскладку. Я не понял, где ошибся, но методика через линк в хеддер из google fonts решило проблему. Но я так и не смог понять, почему русская раскладка не отображалась, хотя с английской всё было окей.

  • @ЧтодаКак-б2ъ
    @ЧтодаКак-б2ъ Год назад

    А как правильнее верстать от мобилки или десктопа?

  • @nailyatolstenko931
    @nailyatolstenko931 Год назад +1

    Подскажите пожалуста как можно экспортировать картинку с бургером целиком, не могу объединить в группу слоёв, чтобы экспортировать. Работаю на Линукс, может поэтому у меня комбинация кнопок другая?

    • @DmitriyDev
      @DmitriyDev Год назад

      просто у него только доступ к редактированию макета, я на маке тоже не смог

  • @shkolnikpubgm7694
    @shkolnikpubgm7694 Год назад

    1:00:00 не хочет все равно добавлять кружек-картинку, что делать?

    • @shkolnikpubgm7694
      @shkolnikpubgm7694 Год назад

      пишет ошибка "недопустимое значение свойства"

    • @shkolnikpubgm7694
      @shkolnikpubgm7694 Год назад

      там где длинное значение с картинкой

  • @ВладиславТкаченко-н3ю

    Спасибо большое )))

    • @my.methed
      @my.methed  2 года назад

      И вам спасибо!

  • @AlexFox-p5e
    @AlexFox-p5e Год назад

    Не могу разобраться не работает свойство html{ --container:300px; --padding-container:10px} ;
    Свойство контейнера не меняется, его размер, забавно что падинг срабатывает .

  • @cyber_cloud63
    @cyber_cloud63 Год назад

    По этому примеру можно верстать любой сайт?)

  • @КатяПлещ
    @КатяПлещ Год назад

    почему как только меняешь svg на symbol слетает картинка

  • @botan1k232
    @botan1k232 2 года назад +3

    Подскажите, а что за плагин Вы использовали?

    • @my.methed
      @my.methed  2 года назад +2

      Не совсем понял вопрос, плагин для чего? Может минуту в видео?

    • @botan1k232
      @botan1k232 2 года назад

      @@my.methed плагин в vs code, где у вас показывалось гамбургеры 🍔 слева и вы говорили, что плагин правильно отработал.

    • @botan1k232
      @botan1k232 2 года назад +1

      ???

    • @my.methed
      @my.methed  2 года назад +3

      Вот ссылка на плагин marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

  • @ershovdesign8310
    @ershovdesign8310 Год назад +2

    А почему ты не использовал онлайн сервис шрифтов от гугл? Просто код подключаешь в html сыллкой (1 строчка) и все, можешь его в ксс использовать.

    • @my.methed
      @my.methed  Год назад

      Меньше сторонних зависимостей, стабильнее работа. Если шрифты подключать через preload локально, то можно почти полностью избавиться от мелькания. Почитайте про FOIT, FOFT, FOUT.

    • @ershovdesign8310
      @ershovdesign8310 Год назад

      @@my.methedДа. Но я подключил онлайн шрифты и вообще не мелькает

    • @DmitriyDev
      @DmitriyDev Год назад

      @@ershovdesign8310 у тебя не мелькает, а у других людей инетрнет слабый и будет мелькать

  • @Krokodil4ik-y8s
    @Krokodil4ik-y8s 2 года назад +1

    mobile-first bg в png отрабатывает по всем @media . а вконсоль кто то заглядывал ?

    • @my.methed
      @my.methed  2 года назад

      А что у вас в консоли?

  • @МарджонаНасимова-ф7е

    Спасибо за понятные видеоуроки!
    у меня проблема с иконками, сначала всё было орошо, но позже иконкии вообще не высвечивалсиь
    у кого-нибудь было такое?

  • @Ibrahim-nu3nd
    @Ibrahim-nu3nd 2 года назад +1

    лучший бро

  • @arturogatti4462
    @arturogatti4462 Год назад

    а почему в одном блоке задавать 2 класса? все запутанно

  • @LiebGoth
    @LiebGoth 2 года назад +3

    йо! :)

  • @shikishiki134
    @shikishiki134 Год назад

    спасибо❤❤

  • @mnmbnc
    @mnmbnc Год назад

    Вы за одно Сделайте по android iOS??

  • @aham1082
    @aham1082 Год назад

    Привет всем! Подскажите, в чем суть копирования шаблонов с Figma в Html ? Заранее спасибо.

    • @elenadanilova9938
      @elenadanilova9938 Год назад

      Фигма - это просто картинка, графика. Чтобы графика стала сайтом, ее нужно сверстать, то есть "скопировать" в html.

  • @GoldFarb-t1c
    @GoldFarb-t1c Год назад

    Спасибо за такое доступное объяснение! кто-то подскажет, почему rgb цвет (FFAB08) может не сработать, круг покрасился только при введении значения "orange" :(

  • @svetlanaganzha78
    @svetlanaganzha78 Год назад +1

    не работает svg через Use(((( убилась уже с ним.

    • @KiritAnime
      @KiritAnime Год назад

      +

    • @marinatimoshenko4799
      @marinatimoshenko4799 Год назад

      Тоже самое

    • @Zavod_program
      @Zavod_program Год назад

      Вопрос, как решили в пол второго ночи - думаю нормально)
      @@marinatimoshenko4799

  • @HaveFunGameReels
    @HaveFunGameReels Год назад

    Ребята, которые рекламируют свои школы и курсы по обучени., да выкладывайте коды готовые помимо макетов, а то, что делаете вы и если сделает по аналогии другой не всегда выйдет даже по предельно внятному рассказу, что бывает очень редко. Очень много нюансов почему нет и не надо говорить, вот если будете писать как на экране то выйдет... Почему нельзя сделать бесплатный урок - с эффектом вау, чтобы вызвало реакцию - из серии ну раз тут такое все доступное и у меня получилось, то что будет когда я куплю курсы..

  • @onese7en141
    @onese7en141 2 года назад

    если шрифты прелоадом подключили зачем нам их теперь в font-face оставлять?

    • @my.methed
      @my.methed  2 года назад

      Если их не прописать в font-face они не загрузятся, мы же задаем там правила

  • @Бегущаярысью
    @Бегущаярысью 2 года назад +2

    села в надежде на версту декстопа....из-за лого перешли сразу на мобил((((

    • @my.methed
      @my.methed  2 года назад +1

      Десктоп тоже будет ) после нескольких проб сверстать мобайлфёрст вы увидите, что этот способ намного удобнее. Особенно если учитывать, что почти 70% контента потребляется именно с телефона.

  • @adaewandrei
    @adaewandrei Год назад +1

    доброго дня, а почему фавикон в png а не в ico формате?)

    • @my.methed
      @my.methed  Год назад

      Современные браузеры поддерживают png и svg форматы

    • @adaewandrei
      @adaewandrei Год назад

      @@my.methed но наверное есть вес картинки и масштаб её,просто думал что свг лучше.)

  • @prokloff
    @prokloff 2 года назад +1

    36:20 просто переименуй папку, вырежи и вставь уже где нужно

    • @my.methed
      @my.methed  2 года назад

      Да возможно так быстрее

  • @mmm2358fo
    @mmm2358fo Год назад +1

    Сколько заплатил клиент за этот проект

    • @KiritAnime
      @KiritAnime Год назад

      много, ну мог по легче сделать

  • @mi.si_
    @mi.si_ Год назад

    ЛЯяя как много времени с этим спрайтом... с самого начала у меня не работал сука((

    • @alanweik3987
      @alanweik3987 Год назад

      Разобралась?

    • @kritiyan9056
      @kritiyan9056 Год назад

      тоже самое зачем нужно было так заморачиваться, тем более для новичков легче просто вставить через img src

  • @n0tthat1
    @n0tthat1 Год назад

    цыркл... 🤦‍♂

  • @Камиль-ц7и
    @Камиль-ц7и Год назад

    Я UX UI Designer и я в шоке от такой работы в том плане что, дизайнер наверное только после курсов вышел.
    Можно было и по лучше сделать дизайн) За то работодатели многого просят, а в итоге получают вот это и всех всё устраивает!

  • @masteruvz
    @masteruvz 2 года назад

    Братан, верстак может ты и неплохой, но учитель - никудышный

    • @my.methed
      @my.methed  2 года назад

      Спасибо, а можно аргументировать?

    • @Mangxst
      @Mangxst 2 года назад +3

      @@my.methed не могу критиковать как то чел сверху, но как не знающий человек подмечу, что ты когда выделял объекты 9:20, то не уточнил: как выделить все объекты и у меня к примеру не работает комбинация клавиш ctrl+G может есть альтернатива какая то?🤔

    • @user-Nadezhda
      @user-Nadezhda Год назад

      @@my.methed не слушай, мне нравится твоя подача. Что не понятно- дополнительно гуглю, много нового узнаю. А чел просто хотел за спасибо посмотреть ролик и сразу стать крутым фронтендером. Продолжай обучать!

    • @true227
      @true227 Год назад

      Не, братюля, просто ты ученик так себе