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

Подписаться 23 тыс.

Просмотров 407 тыс.

50% 1

Скачать материалы урока - bit.ly/3YIaWVM
FIGMA УРОКИ. ВЕРСТКА С FIGMA. ВЕРСТКА ИЗ FIGMA
FIGMA УРОКИ ДЛЯ НАЧИНАЮЩИХ. FIGMA ВЕРСТКА
Фигма верстка это серия уроков. Фигма уроки без воды. верстка сайта figma для вас. С этой верстка из figma вы научитесь как верстать с figma для figma в html. По верстка в figma серия уроков для начинающих figma для верстки. Без проблем научаться figma как сверстать. Это видео верстка макета figma
Это первое видео из серии роликов по вёрстке сайта с нуля с использованием графического редактора Figma. Вводная часть содержит краткое знакомство с программой, создание структуры будущего веб-проекта и его базовую настройку.
Ссылка на макет - www.figma.com/file/ClPSP7KCU1...
Скачать CSS Reset - gist.github.com/DavidWells/18...
Паблик телеграм - t.me/step_to_web
Сервис иконок - www.flaticon.com
Если вам понравилось это видео, не забывайте подписываться на канал, ставить пальцы вверх и писать свои комментарии!
• Верстка сайта с нуля и...

Опубликовано:

12 июл 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 418

@steptoweb503 2 года назад

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

@user-qm9oc3mr8f 2 года назад

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

@powerff1324 2 года назад

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

@steptoweb503 2 года назад

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

@powerff1324 2 года назад

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

@steptoweb503 2 года назад

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

@ilyazikoriy2403 3 года назад

Идеальный контент для тех, кто уже что-то знает и не хочет по 100 раз слушать одно и тоже, но в то же время еще не имеет опыта вёрстки. Спасибо большое)

@steptoweb503 3 года назад

Рад, что полезно!

@krutihka213 4 года назад

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

@juloyi1624 4 года назад

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

@user-rb1xu2bq2p 2 года назад

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

@relaxbro2815 4 года назад

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

@OlgaMix18 Год назад

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

@EvgeniySakharov 2 года назад

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

@user-gq5ho8ys6h Год назад

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

@sandusgoga9676 3 года назад

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

@user-wk2jc4ne9p 2 года назад

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

@mykhailostepanishchev6472 4 года назад

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

@user-em2zl1lp3z 4 года назад

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

@steptoweb503 4 года назад

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

@user-kw5yy1gi7e 2 года назад

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

@user-bo2fn9ye6b 3 года назад

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

@nadirmusayev8885 Год назад

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

@chestbo2438 Год назад

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

@cupcake3983 4 года назад

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

@veronasuhka6989 4 года назад

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

@user-cg1tq6ki9o 3 года назад

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

@steptoweb503 3 года назад

Успехов!

@Dean-nh3ms 4 года назад

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

@Nikita-xe5kv 4 года назад

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

@steptoweb503 4 года назад

Благодарю!

@HokageNaruto111 2 года назад

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

@Taisgrek 2 года назад

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

@vasya8441 Год назад

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

@irynayurieva5717 2 года назад

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

@user-dm7dd6rv9h 4 года назад

Спасибо...буду смотреть дальнейшие уроки !!!

@steptoweb503 4 года назад

Скоро будут :)

@sauvignonblanc5086 4 года назад

Спасибо!)

@maxiwater5962 Год назад

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

@IvanPetrov-td6dk Год назад

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

@seoonlyRU 2 года назад

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

@clampyx 2 года назад

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

@justijust3921 2 года назад

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

@olenaheindl8510 3 года назад

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

@steptoweb503 3 года назад

Спасибо!

@pashaverecni 2 года назад

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

@user-yq7wh9do7y 3 года назад

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

@dnch5990 3 года назад

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

@steptoweb503 3 года назад

Пажалста!)

@-kawasaki4798 Год назад

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

@user-nq9eh3iu6n 3 года назад

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

@RiD3196 3 года назад

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

@al-quran2204 2 года назад

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

@user-ey1eq4ch4j 4 года назад

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

@steptoweb503 4 года назад

Спасибо!

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

Круто 🌞

@oxanazadoya5097 3 года назад

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

@steptoweb503 3 года назад

Пожалуйста!

@saaaiman_zz 3 года назад

Шикарный))

@camillam8315 Год назад

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

@boomzoom3729 2 года назад

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

@maksymkyryliuk492 4 года назад

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

@steptoweb503 4 года назад

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

@maximvitalievich8861 Год назад

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

@andrewm3908 2 года назад

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

@steptoweb503 2 года назад

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

@user-zt6wv4eh5y 3 года назад

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

@steptoweb503 3 года назад

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

@mialii7940 2 года назад

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

@Mr.Chipchik_Cat Год назад

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

@user-bo7mh4se7u 2 года назад

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

@steptoweb503 2 года назад

спасибо !

@thecatwrites9731 2 года назад

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

@codepain2974 2 года назад

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

@steptoweb503 2 года назад

Пожалуйста!

@exetareme.fire.keepooroffl2047 4 года назад

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

@steptoweb503 4 года назад

Пожалуйста!

@user-lk7vp6lf5z 4 года назад

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

@VERA_LIFE13 4 года назад

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

@steptoweb503 4 года назад

Пожалуйста

@Well6464 2 года назад

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

@steptoweb503 2 года назад

Круто!

@HARE-333 4 года назад

Все отлично!

@steptoweb503 4 года назад

Рад)

@DmitriyLok Год назад

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

@missisipi9992 Год назад

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

@alexasanchobetherestors9962 Год назад

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

@user-dp1vo5xi6u Год назад

Как успех?

@gign_141 Год назад

Как успехи?

@ellen_good3924 Год назад

Спасибо!

@der21anna 4 года назад

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

@steptoweb503 3 года назад

Пожалуйста!

@user-go3cq9nz1b 4 года назад

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

@upitel 3 года назад

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

@steptoweb503 3 года назад

Пожалуйста!

@soundmorozov Год назад

Спасибо!!!

@sadik173pro 2 года назад

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

@bublikbublikovich2229 2 года назад

чел ты лучший

@user-hc8fy3uo7w Год назад

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

@user-dw4ru1tk9f 4 года назад

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

@steptoweb503 3 года назад

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

@senpaisenin9186 4 года назад

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

@steptoweb503 4 года назад

Успехов!)

@paperairplane6212 Год назад

4:30 Чистых 😄

@xleb_n2497 2 года назад

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

@vasya8441 Год назад

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

@rusikblyk3477 4 года назад

OK!

@user-xw1rr1lm1o 6 месяцев назад

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

@user-up9ct3ef3s 3 года назад

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

@codingcat9375 Год назад

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

@user-rg5wh3fx2q 4 года назад

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

@steptoweb503 4 года назад

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

@TheYoutubeer 3 года назад

Очень классные видео! Один только вопрос, - вы создаёте для benefits и places нижние отступы, но по БЭМ - у блоков отступов не должно быть. Здесь это сделано намерено, в виде исключения? И можно ли такие исключения иногда делать?

@steptoweb503 3 года назад

В обычной классической верстке вряд-ли вы будете чистый БЭМ юзать когда-либо)

@user-mt7ys4ty4k Год назад

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

@steptoweb503 Год назад

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

@user-mt7ys4ty4k Год назад

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

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

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

@user-kl6be1qp3g 3 года назад

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

@steptoweb503 3 года назад

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

@andreyshock5174 3 года назад

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

@steptoweb503 3 года назад

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

@passaw7 Год назад

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

@lia2377 2 года назад

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

@nikeponomarev9403 2 года назад

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

@masterava9335 Год назад

здравствуйте! подскажите код ссылки на ваш макет в figma. В описании есть ссылка, но я хочу открыть этот файл на компе, а полного кода ссылки в смартфон увидеть не получается

@deniskopylov66 Год назад

а что по производительности будет если для всех элементов написать border-box через :root

@pineapplepineapple3716 Год назад

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

@kamidereneko336 Год назад

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

@user-nf7mp2um2z Год назад

А можно сделать дизайн в фигме а потом перенести сайт в нетлифай?

@AlexYablochkinWebDesign Год назад

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

@samogonshik2862 Год назад

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

@NeedNeville Год назад

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

@samogonshik2862 Год назад

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

@samogonshik2862 Год назад

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

@Bars_Sl 4 года назад

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

@advokats086 3 года назад

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

@steptoweb503 3 года назад

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

@user-dw4ru1tk9f 4 года назад

откуда скачать содержимое для файла reset.css? Ведь при создании папки css она была пустая, а если работать, то в каждом проекте ее надо вставлять в папку css? спасибо за видео