Вёрстка сайта с нуля по макету Figma | HTML, CSS | Для новичков

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

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

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

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

  • @FeofilovRoma
    @FeofilovRoma Месяц назад +1

    ВОТ ЭТА ЖЕНЩИНА!!! УФФФФФФФ

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

    Вас приятно слушать, отличный урок спасибо вам!!!

  • @БаурБакытжанов
    @БаурБакытжанов 8 месяцев назад +5

    Вы написали что видео предназначен для новичков но когда указываете Бифор или афтер или ховеры то не говорите для чего они применяются

  • @ДаниилЗарецкий-ц3щ

    Спасибо! Очень полезное видео! Буду ждать продолжения 👍

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

      у меня на гите есть полный проект, ссылка в описании)

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

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

    • @astro-fu6eb
      @astro-fu6eb 8 месяцев назад

      прошло 10 месяцев есть результаты?

  • @Vslkvsky_O
    @Vslkvsky_O Год назад +5

    Если честно, не хватает БОЛЬШЕ объяснений, почему так то или так то, я например не понял, для чего и что делает !important. А так, всё супер, хороший контент)

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

      чтобы свойство для селектора задалось принудительно. то есть, если уже объявляли какое-то свойство для селектора раньше, и нам нужно поверх этого свойства новое написать, !important нам в помощь.

  • @MsSkotty
    @MsSkotty Год назад +4

    Класс, обязательно посмотрю 💪

  • @АнисимовСергей-и9й
    @АнисимовСергей-и9й 9 месяцев назад

    Топ, продолжайте в том же духе, приятная подача, хороший понятный код!

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

    Спасибо огромное! Мне для практики будет супер👍

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

      Всегда пожалуйста

  • @ВалентинТовмаченко-с9ъ

    Благодарю Махабат! Вы - наилучшая.

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

    Класс! Побольше таких контентов💫

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

      Спасибо, обязательно)

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

    22:30, 25:30, 26:39, 28:13, 34:27, 46:12 - вота кута. Я без ума от вам леди

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

    молодец, объясняешь, все понятно по порядку норм

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

    спасибо большое за ваше старание)

  • @МаксимМаркелов-ь8к
    @МаксимМаркелов-ь8к 7 месяцев назад +3

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

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

    видос классный, информативный, спасибо большое. но хотелось бы 10:05 увидеть, как можно было реализовать с помощью ::after

  • @VJ-yk9bp
    @VJ-yk9bp 4 месяца назад

    СПАСИБО!!!

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

    лучшая!!!!!! Побольше таких обучающих видео!

  • @VR_-gy7nw
    @VR_-gy7nw 2 месяца назад

    Много чего не обьясняется, просто автор говорит давайте возьмем вот это, добавим вот сюда и сделаем вот так. Пояснения конечно не хватает совсем. Ну а так получается что просто интересно наблюдать за разбработкой сайта.
    кароче можно смотреть тупо без звука)

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

    ты клёвая, спасибо за видео. Поверстай ещё по шаблонам

  • @ОльгаШостак-ю2у
    @ОльгаШостак-ю2у Год назад

    Большое спасибо за урок!

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

    Спасибо огромное за вёрстку макета. Единственное что так как урок для начинающих, не логично как будто оставлять блок с Placehold на самостоятельную вёрстку ибо там как будто свои правила действуют, пошёл разбираться ) А в целом спасибо за урок.

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

    Добрый день ! Спасибо за видос, очень познавательный! Подскажите за сколько времени вы научились так верстать?

  • @sifu2514
    @sifu2514 Год назад +13

    ужасная верстка честно говоря это я как разработчик говорю как вы это адаптировать собираетесь с этими костылями через позишн абсолют и проценты ? для нчинающего это просто ненужная информация псмотрите другие курсы по той же верстке вам тоже есть чему поучиться честно говоря

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

    Спасибо за урок! Мой первый опыт верстания с фигмы, конечно блок формы и футер я скопировал, но вроде разобрался., были нюансы в готовом коде с буквой s. Буду учиться дальше. а как теперь сделать его чтобы в при разных разрешениях не ломался? (телефон или планшет разрешение)

  • @СмирновИван-щ9ц
    @СмирновИван-щ9ц 6 месяцев назад

    Спасибо!

  • @РусланС-н3е
    @РусланС-н3е Год назад +1

    Привет ...слишком быстро для меня по крайне мере...вернусь к вам после медленных авторов а то не успеваю за вами

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

    мне кажется когда мы писали интро блоки не было необходимости задавать два класса, можно было обращаться как intro__block div::hover, а дальше обращаться к конкретному диву

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

    Рахмеет

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

    неплохо, но вот с картинкой в начале слишком запарилась :33. Было бы классно видосики про адаптацию через медиа :3

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

    Спасибо большое , было бы круто с переходом на другие страницы сделать видео

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

    тихо слышно, а так очень классно,спасибо

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

      спасибо, учту

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

      да, тиховато. хорошо, что я bt-колонку наладил, а то совсем бы не слышал ничего на ноуте :)

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

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

  • @LuckyHome-cn3zj
    @LuckyHome-cn3zj Год назад

    лично я сделал второй блок с контактами обычным блоком без позиционирования и использовал отрицательный margin. Не вижу смысла в позиционировании, здесь оно не нужно как по мне. Также про позиционирование иконок в контактах. можно было сделать обычным дивом, ибо позиционирование здесь лишнее. Его лучше использовать, когда какой-то элемент сложно отобразить в одном потоке со всеми элементами, допустим, как надпись на картинке блоком ниже

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

      В каком смысле отрицательным маржином можете объяснить)

    • @LuckyHome-cn3zj
      @LuckyHome-cn3zj Год назад

      @@umidbahromov5855ну. Есть положительный: margin-top: 24px, он сдвигает блок вниз, а отрицательный margin-top: -24px, соответственно, вверх😁

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

    Очень интересно объясняете, так держать👍✌️, приятный голос, дикция, замечательно рассказываете👏👏👏

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

    Здравствуйте что делать если при запуске выходит this language is not defined

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

    Добрый день! Какими плагинами пользуетесь в vs code?

  • @ДмитроВасильєв-ф4х

    Почему нельзя было сделать кнопку как ссылку , а сделали через баттон? Есть ли какая-то разница

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

    подскажите как настроить фигму что бы показывало паддинги и марджины ?

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

    Здравствуйте, спасибо Вам, за ваши видео!Как предотвратить перемещение элементов css при изменении размера окна?

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

      Нужно тогда фиксировать px, width, иначе многие элементы будут отзываться на уменьшение экрана

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

      @@developerkg Спасибо за ответ!))

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

    Молодец мне понравился видосик. А адоптив будет?

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

      постараюсь скоро сделать)

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

    что за плагин для просмотра разных элементов в фигме вы использовали?

    • @docc7183
      @docc7183 8 месяцев назад

      inspect styles

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

    го видео про sass вёрстку

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

    Скажи, пожалуйста, как это сделать, чтобы прямо в браузере можно было (как ты это делала top:16px) изменять и видеть результат?

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

      Правый клик мыши, inspect нажимаете, там появляются elemets и styles, там можно прописывать или менять

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

      @@developerkg Спасибо за информацию. Можно еще вопрос ? Не знаю в вашей ли это компетенции. У меня на компьютере появилась черная полоса снизу. (Windows 10). Я перепробовал все настройки экрана. Не проходит. Я думаю, есть очень небольшая вероятность, что вы мне подскажете, как убрать эту полосу. (Быть может случится ЧУДО). I believe in miracles 😊

  • @iris-9070
    @iris-9070 Год назад +1

    Сколько лет вы учились, чтобы достигнуть такого уровня?

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

      Я все еще учусь и развиваюсь, а так начала изучать примерно 2 года назад)

    • @ДмитроВасильєв-ф4х
      @ДмитроВасильєв-ф4х Год назад

      ​​@@developerkg не обижайтесь, но для двух лет у вас очень слабое понимание, если я за 7 месяц обучения вижу у вас целую кучу ошибок построения сайта. Не хотел вас никак обидеть, но реально очень заметны ошибки новичков так как я сам им являюсь

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

      @@ДмитроВасильєв-ф4х не обижаюсь, вы можете вести свой канал и делиться с другими знаниями, а не тратить свое время на написания таких комментариев )

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

    какие софты юзайте для видео записа???

  • @carma66-gg
    @carma66-gg Год назад

    это не сайт,это лендинг )

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

    Добрый день, у меня произошел некий конфуз при верстке. Бэкграунд для "header", точнее изображение не покрывает полностью, а лишь часть. Также содержание (где main, services, about and contact). Как можно решить?

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

      Здравствуйте, вам нужны лиюо padding либо height чтобы была вся картина, потому что там не достаточно контента и она не может растянуться) Посмотрите код мой, который в описании. Удачи)

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

    наверное нужно было еще микро отодвинуть или еще тише говорить

  • @adhuard2022
    @adhuard2022 5 месяцев назад

    видео должно называться Вёрстка сайта с нуля по макету Figma | HTML, CSS | Для новичков которые все знают, ибо объяснений 0, можно было вообще не комментировать, в видео без звука содержательность бы не изменилась.

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

    Можно было бы сразу блок сделать с фото, чтобы не мучаться с абсолютом
    И логичнее было бы делать секции, чтобы не путаться
    И много времени тратишь вручную писанину, ведь знаменитое правило программиста(знаю, верстка это не программирование) - Ctrl C Ctrl v

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

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

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

    А зачем контейнеру писать width:100%, если он и так 100%?

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

      свойство width: 100% устанавливает ширину контейнера в 100% от ширины его родительского элемента. Это гарантирует, что контейнер будет заполнять всю доступную ширину, даже если родительский элемент шире, чем 1200 пикселей.

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

    А почему в html нельзя большими буквами писать?

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

      считается плохим тоном)

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

    Очень интересно но местами не понятно, и очень быстро )

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

    У меня одного звука 0?

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

    А зачем после максвидс ещё задавать видс?

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

      свойство width: 100% устанавливает ширину контейнера в 100% от ширины его родительского элемента. Это гарантирует, что контейнер будет заполнять всю доступную ширину, даже если родительский элемент шире, чем 1200 пикселей.

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

    Этот макет уже сверстал другой программист и очень давно

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

      Ну так весь JS, HTML, CSS есть в интернете, но это никому мешает)

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

    Хороший плагиат другого видео !

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

      Потому что теги такие же хахах? или макет ,который в инете в общем доступе? Ну ,если аналогию привести, то вы тоже плагиатите, потому что написала комментарий, а комментарии пишут много людей, а вы мне скажете, но это мой комментарий, я написа его с первого до последнего слова сам, и отобразил свой взгляд на эту тему, и я скажу, так я тоже))) Спасибо за комментарий, нам нужны такие люди как вы!

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

    То чувство когда девушка программировать умеет а ты нет

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

      В программирование нет пола 😉

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

      @@developerkg есть только стены