Верстка сайта с нуля из Figma для начинающих #1

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 431

  • @steptoweb503
    @steptoweb503  3 ปีที่แล้ว +42

    Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой. Пожалуйста, перейдите к списку всех просмотренных макетов в фигме, выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний)
    prnt.sc/1ckk0nt

    • @ВикторБукин-у3м
      @ВикторБукин-у3м 3 ปีที่แล้ว +4

      так и не обьяснил как работать с фигма. как эспортировать изображения, код и т.д. ((

    • @enemyprime
      @enemyprime 3 ปีที่แล้ว +1

      Где ссылка ???

    • @steptoweb503
      @steptoweb503  3 ปีที่แล้ว +1

      @@enemyprime В описании :)

    • @enemyprime
      @enemyprime 3 ปีที่แล้ว +1

      @@steptoweb503 не нашол в описании

    • @steptoweb503
      @steptoweb503  3 ปีที่แล้ว +1

      @@enemyprime какая именно? На макет в описании под видео.

  • @АнатолийСагайдак-х3ч
    @АнатолийСагайдак-х3ч 3 ปีที่แล้ว +43

    Впервые встретил урок, который дает полное понимание начала работы с макетом в Figma, а так же начало разработки веб-страницы. Огромное спасибо за Ваш труд!

  • @КсенияИванова-д3ь
    @КсенияИванова-д3ь 2 ปีที่แล้ว +9

    Никогда не пишу отзывы, но Ваше объяснение и подача материала на столько понятна и лаконична, что просто выше всех похвал!!!!! Очень, все бы так объясняли!

  • @dnch5990
    @dnch5990 4 ปีที่แล้ว +13

    Господи! спасибо тебе за твое видео, единственный кто объясняет, так как нужно именно мне!!! Просто лучший!

  • @andrewm3908
    @andrewm3908 3 ปีที่แล้ว +4

    Лучше видео-плейлиста в ютубе я не нашел по нужному запросу, не отказался бы от второго видео-плейлиста на другом макете с аналогичным подходом. Хотелось бы отметить одельно использование методологии БЭМ за что очень благодарен, заслуженный лайк.

    • @steptoweb503
      @steptoweb503  3 ปีที่แล้ว

      Спасибо! Но ближайшее время роликов не предвидится :(

  • @seoonlyRU
    @seoonlyRU 2 ปีที่แล้ว +2

    вот это огонь!!! спасибо, ловите палец вверх от СЕООНЛИ

  • @vasya8441
    @vasya8441 ปีที่แล้ว

    Я не видел еще ролика, посмотрел если ли макет под видео, а там макет, файлы на гитхабе, автору спасибо огромное. Лайк.

  • @EvgeniySakharov
    @EvgeniySakharov 2 ปีที่แล้ว +2

    Как же долго я искал на ютубе внятное объяснение. Спасибо огромное. С меня лайк и подписка. Ну и конечно колокольчик.

  • @cupcake3983
    @cupcake3983 5 ปีที่แล้ว +4

    Очень круто, постоянно ищу такие видео и каналы по верстке, но на первых страницах поиска лишь распиаренные чуваки которые сверстают кое-как, только для того чтобы в конце попиарить свои мега курсы.

  • @olenaheindl8510
    @olenaheindl8510 3 ปีที่แล้ว +9

    Замечательное видео и объяснение! Уже пару других курсов прошла, но тут вы так хорошо объясняете! Многие вещи стали понятнее. Вам нужно продумать рекламную компанию , чтобы привлечь побольше подписчиков. материал замечательный и вы умеете объяснять.

  • @chag753
    @chag753 3 หลายเดือนก่อน

    спасибо за работу, так держать!!! давай еще))

  • @БогданОсин-ф7и
    @БогданОсин-ф7и 2 ปีที่แล้ว +1

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

  • @krutihka213
    @krutihka213 5 ปีที่แล้ว +35

    Мне нравится !!! Жду следующею часть , спасибо .

  • @upitel
    @upitel 4 ปีที่แล้ว +2

    Не знал за google fonts helper. Шрифты годами прописывал вручную. Благодарю за урок!)

  • @Taisgrek
    @Taisgrek 3 ปีที่แล้ว +1

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

  • @другМаша
    @другМаша 3 ปีที่แล้ว +12

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

  • @thecatwrites9731
    @thecatwrites9731 3 ปีที่แล้ว +2

    случайно нашел твой канал, когда пил кофе! якобс ты крут

  • @juloyi1624
    @juloyi1624 5 ปีที่แล้ว +15

    Спасибо большое за такой информативный ролик, очень жаль, что у такого качественного контента так мало просмотров. Иду смотреть дальше!:)

  • @Nikita-xe5kv
    @Nikita-xe5kv 4 ปีที่แล้ว +22

    Спасибо за твои видео, особенно когда в них ты объясняешь какую функцию выполняет каждая отдельная строчка кода, а также когда, где и что нужно (правильно) будет использовать. Успехов тебе и твоему каналу!)

  • @ВикторКашин-е9р
    @ВикторКашин-е9р 5 ปีที่แล้ว +24

    Артём спасибо за ваш труд ,уроки просто супер! Продолжайте пожалуйста в том же духе и процветания вашему каналу.

    • @steptoweb503
      @steptoweb503  5 ปีที่แล้ว +3

      Спасибо большое - продолжаю :)

  • @OlgaMix18
    @OlgaMix18 ปีที่แล้ว

    Большое спасибо за Ваш труд! Объясняете очень доходчиво и понятно, без лишней воды и в тоже время понятно и просто Процветания Вашему каналу. С радостью буду ждать новых уроков от Вас!

  • @МаксимПирожков-ы3т
    @МаксимПирожков-ы3т 2 ปีที่แล้ว

    Спасибо за отличный материал. Всё время проходил мимо данного видео, смотрел другие каналы. Теперь подписка.

  • @Well6464
    @Well6464 3 ปีที่แล้ว +1

    Начал смотрел, понял, что буду смотреть дальше!

  • @Ariadne.sThread
    @Ariadne.sThread 3 ปีที่แล้ว +1

    Супер! Про box-sizing спрашивали на собеседовании - я не ответила. Так что очень полезно))))))

  • @ДмитрийБеляков-ю4ш
    @ДмитрийБеляков-ю4ш ปีที่แล้ว

    3:29 - Recent (которая вкладка) произносится как р'исэнт. Но это, пожалуй, единственняа претензия))

  • @relaxbro2815
    @relaxbro2815 5 ปีที่แล้ว +2

    Все понятно, ясно и четко показано каждое действие!

  • @chestbo2438
    @chestbo2438 2 ปีที่แล้ว

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

  • @oxanazadoya5097
    @oxanazadoya5097 4 ปีที่แล้ว +2

    Спасибо за труд! Канал - находка для новичка!

  • @codepain2974
    @codepain2974 3 ปีที่แล้ว +3

    Спасибо за тему с шрифтами, круто не знал про это, очень удобно)

  • @alexasanchobetherestors9962
    @alexasanchobetherestors9962 2 ปีที่แล้ว

    Решил попробовать сверстать вместе с вами данный лендинг. Это вторая верстка в моей практике начинающего верстальщика. Изначально понравилась подача и наличие полезной информации, которой мало говорят или вообще не говорят авторы подобных роликов ( я про первичную подготовку проекта). Однозначно буду продолжать!

  • @Евгений-м8х3ъ
    @Евгений-м8х3ъ 3 ปีที่แล้ว +1

    классное объяснение, спасибо за ваш труд, мне , как новичку, именно то что надо

  • @codingcat9375
    @codingcat9375 2 ปีที่แล้ว

    @15:10
    You can simply do * {
    box-sizing: border-box;
    }.
    much shorter

  • @justijust3921
    @justijust3921 3 ปีที่แล้ว +1

    Пока всё понятно. Спасибо за этот урок))))

  • @НискемкромеСовести
    @НискемкромеСовести 4 ปีที่แล้ว +2

    Действительно зачет! Подписался. В сети мало авторов которые делают для людей но много которые делаю лишь бы лишь бы

  • @DmitriyLok
    @DmitriyLok ปีที่แล้ว

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

  • @СергейКудаев-в6ц
    @СергейКудаев-в6ц 4 ปีที่แล้ว +1

    Грамотно и четко изложено. Респект и палец вверх.

  • @IvanPetrov-td6dk
    @IvanPetrov-td6dk ปีที่แล้ว

    Спасибо за полезный видос!

  • @clampyx
    @clampyx 2 ปีที่แล้ว

    *Спасибо огромное! Попробую что-то сделать*

  • @HokageNaruto111
    @HokageNaruto111 2 ปีที่แล้ว

    Большое спасибо за твои видео, все понятно !!!!!

  • @maksymkyryliuk492
    @maksymkyryliuk492 5 ปีที่แล้ว +6

    *Спасибо за урок)*
    Очень просто всё объясняешь, говорить просто о сложном очень классный навык)

    • @steptoweb503
      @steptoweb503  5 ปีที่แล้ว +1

      Надеюсь, хотя мне кажется, что порой не очень понятно. Нужно лучше структуру прорабатывать

  • @nadirmusayev8885
    @nadirmusayev8885 2 ปีที่แล้ว

    Суппер,очень помогаете,на тренде должны быть такие видео👍👍😘😘

  • @mandarin_in_Design
    @mandarin_in_Design 5 หลายเดือนก่อน +3

    Здравствуйте, при добавлении reset.css программа vs соde выдает ошибку в тексте. Что делать?

  • @sandusgoga9676
    @sandusgoga9676 3 ปีที่แล้ว +1

    Прекрасные уроки👍Благодарю

  • @КтоТо-ц5с5е
    @КтоТо-ц5с5е ปีที่แล้ว

    Почему так мало подписчиков у такого талантливого ютубера ,
    все идеально .

  • @itmaxru
    @itmaxru 2 ปีที่แล้ว

    Очень крутое объяснение. И спасибо за ссылку на фижме

  • @salo8404
    @salo8404 3 หลายเดือนก่อน +1

    виндовс 7 ехх ностальгия)

  • @VERA_LIFE13
    @VERA_LIFE13 5 ปีที่แล้ว +3

    Спасибо. Хорошо объясняешь.

  • @Dean-nh3ms
    @Dean-nh3ms 5 ปีที่แล้ว +3

    Спасибо, ушел смотреть вторую часть и жду третью)

  • @СергейКравченко-х5ц
    @СергейКравченко-х5ц 3 ปีที่แล้ว +1

    крутое видео! успехов в развитии канала!

  • @maxiwater5962
    @maxiwater5962 ปีที่แล้ว

    Шикарная подача

  • @МаринаСмирнова-е5п
    @МаринаСмирнова-е5п 4 ปีที่แล้ว +1

    От меня подписка и лайк)) Спасибо за проделанную работу.

    • @steptoweb503
      @steptoweb503  4 ปีที่แล้ว

      Пожалуйста!) Рад, что полезно

  • @sadk173
    @sadk173 2 ปีที่แล้ว +1

    интереснинько

  • @-kawasaki4798
    @-kawasaki4798 2 ปีที่แล้ว

    Спасибо, много нового узнал👍

  • @senpaisenin9186
    @senpaisenin9186 4 ปีที่แล้ว +2

    Красава, я вот буду по сишке снимать курс, хочу также классно объеснить

  • @veronasuhka6989
    @veronasuhka6989 5 ปีที่แล้ว

    Супер! спасибо! давно искала такие уроки!

  • @paperairplane6212
    @paperairplane6212 ปีที่แล้ว +2

    4:30 Чистых 😄

  • @xleb_n2497
    @xleb_n2497 3 ปีที่แล้ว +10

    Я искал медь , а нашел золото . Все понятно если хоть немного знаком с версткой .

  • @ТамараШомина-ч4щ
    @ТамараШомина-ч4щ 4 ปีที่แล้ว +1

    Я нашла в ваших комментариях все нужные ссылки, спасибо

    • @steptoweb503
      @steptoweb503  4 ปีที่แล้ว

      Описание бывает полезным ;)

  • @der21anna
    @der21anna 5 ปีที่แล้ว +2

    спасибо, добрый человек^^

  • @pashaverecni
    @pashaverecni 2 ปีที่แล้ว

    Четко. Вся понятно

  • @ШинаВандал
    @ШинаВандал 5 ปีที่แล้ว +1

    Отличный урок

  • @mialii7940
    @mialii7940 3 ปีที่แล้ว

    супер видео уроки!

  • @camillam8315
    @camillam8315 2 ปีที่แล้ว

    большое спасибо за труд

  • @bublikbublikovich2229
    @bublikbublikovich2229 3 ปีที่แล้ว +1

    чел ты лучший

  • @mykhailostepanishchev6472
    @mykhailostepanishchev6472 5 ปีที่แล้ว +1

    То что нужно ! Спасибо.

  • @missisipi9992
    @missisipi9992 ปีที่แล้ว

    Большое спасыбо чувак !)

  • @Mr.Chipchik_Cat
    @Mr.Chipchik_Cat 2 ปีที่แล้ว

    Спасибо, автор хорош!

  • @boomzoom3729
    @boomzoom3729 2 ปีที่แล้ว

    Отличное видео!

  • @андрейдраконов-я3к
    @андрейдраконов-я3к 3 ปีที่แล้ว

    (после 10 минут идет подключение шрифтов а так же бокс сайзинг бордер бокс) а там доп(инферит)

  • @exetareme.fire.keepooroffl2047
    @exetareme.fire.keepooroffl2047 4 ปีที่แล้ว +1

    Спасибо большое за контент)

  • @lia2377
    @lia2377 2 ปีที่แล้ว +1

    5.57 мин. - откуда в папке СSS взялась reset CSS?

  • @RiD3196
    @RiD3196 3 ปีที่แล้ว +1

    Ммм... Годнота!
    Спасибо)

  • @vasya8441
    @vasya8441 ปีที่แล้ว

    Жаль что новых видео нет, контент то очень хороший.

  • @МаксКондратенко-ц2е
    @МаксКондратенко-ц2е 5 ปีที่แล้ว +5

    Было бы круто увидеть твою сборку галпа

    • @steptoweb503
      @steptoweb503  5 ปีที่แล้ว

      Могу выслать вам на почту :)

  • @HARE-333
    @HARE-333 4 ปีที่แล้ว +1

    Все отлично!

  • @ВладимирК-ь9г
    @ВладимирК-ь9г 5 ปีที่แล้ว +6

    Спасибо, хорошее видео. Настроить внешний вид фигмы можно ? На белом фоне серый шрифт напрягает глаза

  • @pineapplepineapple3716
    @pineapplepineapple3716 ปีที่แล้ว +1

    а можно ли это все делать на питоне? вместо вскода

  • @al-quran2204
    @al-quran2204 2 ปีที่แล้ว

    Спасибо за урок😍

  • @Yurii_Abrokov
    @Yurii_Abrokov ปีที่แล้ว

    Круто 🌞

  • @ДмитрийМеньшиков-ю5с
    @ДмитрийМеньшиков-ю5с 4 ปีที่แล้ว +2

    Хорошое видео, но я бы всё таки увеличил бы масштаб, мелковато смотрится экран.

    • @steptoweb503
      @steptoweb503  4 ปีที่แล้ว

      Да, сейчас уже увеличиваю побольше

  • @magdalinapospelova7591
    @magdalinapospelova7591 6 หลายเดือนก่อน +1

    Здравствуйте, у меня нет файла reset.css и если я его сама создаю, то он пустой

  • @saaaaim
    @saaaaim 3 ปีที่แล้ว +1

    Шикарный))

  • @АртемСаргаев-ы9ь
    @АртемСаргаев-ы9ь 2 ปีที่แล้ว

    Спасибо за видео. Супер объясняете. подробно. Вопрос. в reset.css теги в ручную прописываете? или есть лайв хак.

    • @steptoweb503
      @steptoweb503  2 ปีที่แล้ว +1

      Вам нужно просто где-то скачать его и все

    • @АртемСаргаев-ы9ь
      @АртемСаргаев-ы9ь 2 ปีที่แล้ว

      @@steptoweb503
      google в помощь. Спс

  • @ВладимирвладимиР-ь8ш
    @ВладимирвладимиР-ь8ш 4 ปีที่แล้ว +1

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

    • @steptoweb503
      @steptoweb503  4 ปีที่แล้ว

      Можно, но лучше как в видео

    • @user-ft5ew6lw5n
      @user-ft5ew6lw5n 4 ปีที่แล้ว

      @@steptoweb503 а почему?

    • @steptoweb503
      @steptoweb503  4 ปีที่แล้ว +2

      @@user-ft5ew6lw5n Потому что если по каким-то причинам серваки, на которых гугл хранит шрифты, окажутся недоступными, то ваш сайт отобразится с дефолтными системными шрифтами и это может поломать его

  • @КайратБолотбеков-ф4я
    @КайратБолотбеков-ф4я 3 ปีที่แล้ว

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

  • @Костя-ж9г7ч
    @Костя-ж9г7ч ปีที่แล้ว +1

    Очень познавательное видео!
    но не подскажешь, я когда вставил reset.css, то у меня высвечивает 12 ошибок, как быть?)

    • @mp9weff
      @mp9weff ปีที่แล้ว

      решили проблему?

  • @sauvignonblanc5086
    @sauvignonblanc5086 5 ปีที่แล้ว +3

    Спасибо!)

  • @nastyater3998
    @nastyater3998 ปีที่แล้ว +1

    Как вы этот reset запустил, чтоб вся эта шляпа появилась?

  • @samogonshik2862
    @samogonshik2862 2 ปีที่แล้ว +1

    отличное видео) лайк)
    один вопрос: откуда взялся файл reset. css? или он там по умолчанию появляется?

    • @NeedNeville
      @NeedNeville 2 ปีที่แล้ว

      вот я тоже не вкурил, за html сказал даже как создать

    • @samogonshik2862
      @samogonshik2862 2 ปีที่แล้ว

      Сорян, был не внимателен, файл по ссылке в описании)

    • @samogonshik2862
      @samogonshik2862 2 ปีที่แล้ว

      Сорян, был не внимателен, файл по ссылке в описании)

  • @kamidereneko336
    @kamidereneko336 2 ปีที่แล้ว

    Стоит ли использовать reset новичкам? Это кнш все упростит, но сами мы не поймем, че и как произошло, что изменилось и что там вообще написано. Или просто не морочить голову этим и верстать)

  • @andreyshock5174
    @andreyshock5174 4 ปีที่แล้ว +1

    Странно, не получается зайти на google fonts helper, но ничего страшного, загружу другим способом. Автор, подача хорошая, я в сфере новичок бывалый, но посмотрю, может я где то в верстке делаю ошибки, удачи!

    • @steptoweb503
      @steptoweb503  4 ปีที่แล้ว

      Вероятнее всего что-то не так сделали)

  • @МагомедШамилов-й1ф
    @МагомедШамилов-й1ф 5 หลายเดือนก่อน +1

    Почему когда верстаю с Figma макета все на странице получается большим чем на макете, хотя пишу все стили точь в точь как в макете

  • @КириллНайтли
    @КириллНайтли 2 ปีที่แล้ว +1

    А как поступить если есть на руках макет в PSD формате и на его основе нужно сделать такой же ...точную копию ...Но проблема в том что такой формат нельзя добавить в Фигму так как не поддерживает ..И конвертеров нету подходящих ..А работать надо именно с этим макетом . Как поступить?

    • @steptoweb503
      @steptoweb503  2 ปีที่แล้ว

      Есть avocode - он умеет кушать псд формат :)

  • @lebero05
    @lebero05 ปีที่แล้ว

    Всем привет. Хотел задать вопрос когда открыл reset.css в VS Code там 12 ошибок, это нормально и как её убрать?

  • @КонстантинСигуев
    @КонстантинСигуев 4 ปีที่แล้ว +2

    Спасибо!

  • @Dimoven
    @Dimoven ปีที่แล้ว

    Как переносить дизайн фигмы на сайт. Если мне не нужна тильда, а бэк хочу сам вписать через фреймворки или php, nodejs и т д

  • @АнастасияЮра
    @АнастасияЮра 2 ปีที่แล้ว +1

    После 5:20 стало ничего не понятно, не показали как скачивать файл и что с ним делать после скачивания(

    • @steptoweb503
      @steptoweb503  2 ปีที่แล้ว +1

      На 5:20 я создаю разметку в html документе - там ничего скачивать не надо

    • @steptoweb503
      @steptoweb503  2 ปีที่แล้ว +1

      если вы про reset.css то скачать можно любой из интернета - их миллион на любой вкус)

    • @АнастасияЮра
      @АнастасияЮра 2 ปีที่แล้ว

      @@steptoweb503 Оу, хорошо, спасибо, я не так поняла просто 😅 Извините за беспокойство)

  • @sonyaa3
    @sonyaa3 ปีที่แล้ว

    откуда reset.css взялось и все остальные папки?

  • @AlexYablochkinWebDesign
    @AlexYablochkinWebDesign 2 ปีที่แล้ว

    А с можно ли загрузить на сайт многостраничный лендинг ?

  • @advokats086
    @advokats086 4 ปีที่แล้ว

    Спасибо за урок... !!! Ах да будь добр...!!! Залей макет на внешнее облако..Не получается скачать из figma....

    • @steptoweb503
      @steptoweb503  4 ปีที่แล้ว

      Его не нужно качать и нельзя залить - фигма уже облачное решение. В этом как бы и преимущество. Вы можете скопировать макет к себе в фигму