Верстка сайта с нуля из Figma для начинающих #1
![[DELETED]](http://yt3.ggpht.com/ytc/AIdro_lPzwNJIwW1k0s0Pq5m5acZMdMZ1WQ2bze8T2FvmSmc-8rjJdg=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 5 фев 2025
- Скачать материалы урока - bit.ly/3YIaWVM
FIGMA УРОКИ. ВЕРСТКА С FIGMA. ВЕРСТКА ИЗ FIGMA
FIGMA УРОКИ ДЛЯ НАЧИНАЮЩИХ. FIGMA ВЕРСТКА
Фигма верстка это серия уроков. Фигма уроки без воды. верстка сайта figma для вас. С этой верстка из figma вы научитесь как верстать с figma для figma в html. По верстка в figma серия уроков для начинающих figma для верстки. Без проблем научаться figma как сверстать. Это видео верстка макета figma
Это первое видео из серии роликов по вёрстке сайта с нуля с использованием графического редактора Figma. Вводная часть содержит краткое знакомство с программой, создание структуры будущего веб-проекта и его базовую настройку.
Ссылка на макет - www.figma.com/...
Скачать CSS Reset - gist.github.co...
Паблик телеграм - t.me/step_to_web
Сервис иконок - www.flaticon.com
Если вам понравилось это видео, не забывайте подписываться на канал, ставить пальцы вверх и писать свои комментарии!
• Верстка сайта с нуля и...
Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой. Пожалуйста, перейдите к списку всех просмотренных макетов в фигме, выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний)
prnt.sc/1ckk0nt
так и не обьяснил как работать с фигма. как эспортировать изображения, код и т.д. ((
Где ссылка ???
@@enemyprime В описании :)
@@steptoweb503 не нашол в описании
@@enemyprime какая именно? На макет в описании под видео.
Впервые встретил урок, который дает полное понимание начала работы с макетом в Figma, а так же начало разработки веб-страницы. Огромное спасибо за Ваш труд!
Никогда не пишу отзывы, но Ваше объяснение и подача материала на столько понятна и лаконична, что просто выше всех похвал!!!!! Очень, все бы так объясняли!
спасибо !
Господи! спасибо тебе за твое видео, единственный кто объясняет, так как нужно именно мне!!! Просто лучший!
Пажалста!)
Как же долго я искал на ютубе внятное объяснение. Спасибо огромное. С меня лайк и подписка. Ну и конечно колокольчик.
Спасибо большое! В первом же видео столько фишек для себя узнала! Отличное видео, буду смотреть весь курс
Успехов!
Лучше видео-плейлиста в ютубе я не нашел по нужному запросу, не отказался бы от второго видео-плейлиста на другом макете с аналогичным подходом. Хотелось бы отметить одельно использование методологии БЭМ за что очень благодарен, заслуженный лайк.
Спасибо! Но ближайшее время роликов не предвидится :(
Артём спасибо за ваш труд ,уроки просто супер! Продолжайте пожалуйста в том же духе и процветания вашему каналу.
Спасибо большое - продолжаю :)
Замечательное видео и объяснение! Уже пару других курсов прошла, но тут вы так хорошо объясняете! Многие вещи стали понятнее. Вам нужно продумать рекламную компанию , чтобы привлечь побольше подписчиков. материал замечательный и вы умеете объяснять.
Спасибо!
Мне нравится !!! Жду следующею часть , спасибо .
Спасибо большое за такой информативный ролик, очень жаль, что у такого качественного контента так мало просмотров. Иду смотреть дальше!:)
Спасибо за твои видео, особенно когда в них ты объясняешь какую функцию выполняет каждая отдельная строчка кода, а также когда, где и что нужно (правильно) будет использовать. Успехов тебе и твоему каналу!)
Благодарю!
Я не видел еще ролика, посмотрел если ли макет под видео, а там макет, файлы на гитхабе, автору спасибо огромное. Лайк.
вот это огонь!!! спасибо, ловите палец вверх от СЕООНЛИ
Все понятно и очень интересно, искал возможность поверстать на основе полученных знаний в школе, но не знал как начать, благодаря вашему видео сдвинулся с мертвой точки, с меня лайк, подписка, колокольчик, а так же комент под каждым видео )
Большое спасибо за Ваш труд! Объясняете очень доходчиво и понятно, без лишней воды и в тоже время понятно и просто Процветания Вашему каналу. С радостью буду ждать новых уроков от Вас!
ты, помог просто многим не только мне, а и остальным, теперь я знаю, как делать верстку сайта, и преятно удивлю своего учителя по инфомартике)
Очень круто, постоянно ищу такие видео и каналы по верстке, но на первых страницах поиска лишь распиаренные чуваки которые сверстают кое-как, только для того чтобы в конце попиарить свои мега курсы.
Не знал за google fonts helper. Шрифты годами прописывал вручную. Благодарю за урок!)
Пожалуйста!
Спасибо за отличный материал. Всё время проходил мимо данного видео, смотрел другие каналы. Теперь подписка.
Спасибо за труд! Канал - находка для новичка!
Пожалуйста!
Начал смотрел, понял, что буду смотреть дальше!
Круто!
Все понятно, ясно и четко показано каждое действие!
Спасибо за тему с шрифтами, круто не знал про это, очень удобно)
Пожалуйста!
Супер! Про box-sizing спрашивали на собеседовании - я не ответила. Так что очень полезно))))))
случайно нашел твой канал, когда пил кофе! якобс ты крут
Суппер,очень помогаете,на тренде должны быть такие видео👍👍😘😘
спасибо за работу, так держать!!! давай еще))
Решил попробовать сверстать вместе с вами данный лендинг. Это вторая верстка в моей практике начинающего верстальщика. Изначально понравилась подача и наличие полезной информации, которой мало говорят или вообще не говорят авторы подобных роликов ( я про первичную подготовку проекта). Однозначно буду продолжать!
Как успех?
Как успехи?
Грамотно и четко изложено. Респект и палец вверх.
Спасибо!
Действительно зачет! Подписался. В сети мало авторов которые делают для людей но много которые делаю лишь бы лишь бы
Спасибо большое интересно и просто все выпуски обязательно досмотрю
*Спасибо за урок)*
Очень просто всё объясняешь, говорить просто о сложном очень классный навык)
Надеюсь, хотя мне кажется, что порой не очень понятно. Нужно лучше структуру прорабатывать
классное объяснение, спасибо за ваш труд, мне , как новичку, именно то что надо
интереснинько
Очень понравился урок, надеюсь смогу на его основе сверстать свой первый саит)
Прекрасные уроки👍Благодарю
Спасибо, ушел смотреть вторую часть и жду третью)
Здравствуйте, при добавлении reset.css программа vs соde выдает ошибку в тексте. Что делать?
Пока всё понятно. Спасибо за этот урок))))
От меня подписка и лайк)) Спасибо за проделанную работу.
Пожалуйста!) Рад, что полезно
крутое видео! успехов в развитии канала!
Четко. Вся понятно
Спасибо за полезный видос!
Спасибо. Хорошо объясняешь.
Пожалуйста
Большое спасибо за твои видео, все понятно !!!!!
Шикарная подача
4:30 Чистых 😄
Очень крутое объяснение. И спасибо за ссылку на фижме
виндовс 7 ехх ностальгия)
Круто 🌞
Почему так мало подписчиков у такого талантливого ютубера ,
все идеально .
спасибо, добрый человек^^
Пожалуйста!
Супер! спасибо! давно искала такие уроки!
чел ты лучший
Спасибо, много нового узнал👍
То что нужно ! Спасибо.
Все отлично!
Рад)
Отличное видео!
Спасибо, автор хорош!
Я искал медь , а нашел золото . Все понятно если хоть немного знаком с версткой .
3:29 - Recent (которая вкладка) произносится как р'исэнт. Но это, пожалуй, единственняа претензия))
супер видео уроки!
*Спасибо огромное! Попробую что-то сделать*
Отличный урок
большое спасибо за труд
Ммм... Годнота!
Спасибо)
5.57 мин. - откуда в папке СSS взялась reset CSS?
а можно ли это все делать на питоне? вместо вскода
Большое спасыбо чувак !)
Спасибо за урок😍
отличное видео) лайк)
один вопрос: откуда взялся файл reset. css? или он там по умолчанию появляется?
вот я тоже не вкурил, за html сказал даже как создать
Сорян, был не внимателен, файл по ссылке в описании)
Сорян, был не внимателен, файл по ссылке в описании)
Шикарный))
Я нашла в ваших комментариях все нужные ссылки, спасибо
Описание бывает полезным ;)
Спасибо!)
Спасибо за видео. Супер объясняете. подробно. Вопрос. в reset.css теги в ручную прописываете? или есть лайв хак.
Вам нужно просто где-то скачать его и все
@@steptoweb503
google в помощь. Спс
Спасибо!
Пажалста
Красава, я вот буду по сишке снимать курс, хочу также классно объеснить
Успехов!)
Большое спасибо!
Спасибо большое за контент)
Пожалуйста!
Очень познавательное видео!
но не подскажешь, я когда вставил reset.css, то у меня высвечивает 12 ошибок, как быть?)
решили проблему?
Спасибо, хорошее видео. Настроить внешний вид фигмы можно ? На белом фоне серый шрифт напрягает глаза
Почему когда верстаю с Figma макета все на странице получается большим чем на макете, хотя пишу все стили точь в точь как в макете
Очень классные видео! Один только вопрос, - вы создаёте для benefits и places нижние отступы, но по БЭМ - у блоков отступов не должно быть. Здесь это сделано намерено, в виде исключения? И можно ли такие исключения иногда делать?
В обычной классической верстке вряд-ли вы будете чистый БЭМ юзать когда-либо)
Здравствуйте, у меня нет файла reset.css и если я его сама создаю, то он пустой
Хорошое видео, но я бы всё таки увеличил бы масштаб, мелковато смотрится экран.
Да, сейчас уже увеличиваю побольше
@15:10
You can simply do * {
box-sizing: border-box;
}.
much shorter
Было бы круто увидеть твою сборку галпа
Могу выслать вам на почту :)
а если шрифты через подключить из гугл фонтс?можно же так?или лучше как на видео?
Можно, но лучше как в видео
@@steptoweb503 а почему?
@@user-ft5ew6lw5n Потому что если по каким-то причинам серваки, на которых гугл хранит шрифты, окажутся недоступными, то ваш сайт отобразится с дефолтными системными шрифтами и это может поломать его
Жаль что новых видео нет, контент то очень хороший.
Как переносить дизайн фигмы на сайт. Если мне не нужна тильда, а бэк хочу сам вписать через фреймворки или php, nodejs и т д
Всем привет. Хотел задать вопрос когда открыл reset.css в VS Code там 12 ошибок, это нормально и как её убрать?
Спасибо за уроки. У меня какое-то внутреннее сопротивление подключать border-box на весь документ. Можно этого не делать? Боюсь запутаться. Или это обязательно?
Это обычная практика. Абсолютно все её используют)
@@steptoweb503 Спасибо!
@@steptoweb503 а он же с Firefox не идет, вроде.
@@НадеждаМироненко-щ8ъ ещё как идёт :)
(после 10 минут идет подключение шрифтов а так же бокс сайзинг бордер бокс) а там доп(инферит)
А как поступить если есть на руках макет в PSD формате и на его основе нужно сделать такой же ...точную копию ...Но проблема в том что такой формат нельзя добавить в Фигму так как не поддерживает ..И конвертеров нету подходящих ..А работать надо именно с этим макетом . Как поступить?
Есть avocode - он умеет кушать псд формат :)
А с можно ли загрузить на сайт многостраничный лендинг ?
Стоит ли использовать reset новичкам? Это кнш все упростит, но сами мы не поймем, че и как произошло, что изменилось и что там вообще написано. Или просто не морочить голову этим и верстать)
Странно, не получается зайти на google fonts helper, но ничего страшного, загружу другим способом. Автор, подача хорошая, я в сфере новичок бывалый, но посмотрю, может я где то в верстке делаю ошибки, удачи!
Вероятнее всего что-то не так сделали)
Как вы этот reset запустил, чтоб вся эта шляпа появилась?
Здравствуйте хотела спросить, я хочу дизайн с фигма перетащить на wordpress, мне делать верстку как вы на видео или сразу на вордпресс???
Если у вас кастомный дизайн, то нужно сперва отверстать, а затем интегрировать верстку под вп