Верстка сайта с нуля из Figma для начинающих #1
Vložit
- čas přidán 12. 07. 2019
- Скачать материалы урока - 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
Если вам понравилось это видео, не забывайте подписываться на канал, ставить пальцы вверх и писать свои комментарии!
• Верстка сайта с нуля и...
Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой. Пожалуйста, перейдите к списку всех просмотренных макетов в фигме, выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний)
prnt.sc/1ckk0nt
так и не обьяснил как работать с фигма. как эспортировать изображения, код и т.д. ((
Где ссылка ???
@@powerff1324 В описании :)
@@steptoweb503 не нашол в описании
@@powerff1324 какая именно? На макет в описании под видео.
Идеальный контент для тех, кто уже что-то знает и не хочет по 100 раз слушать одно и тоже, но в то же время еще не имеет опыта вёрстки. Спасибо большое)
Рад, что полезно!
Впервые встретил урок, который дает полное понимание начала работы с макетом в Figma, а так же начало разработки веб-страницы. Огромное спасибо за Ваш труд!
Мне нравится !!! Жду следующею часть , спасибо .
Спасибо большое за такой информативный ролик, очень жаль, что у такого качественного контента так мало просмотров. Иду смотреть дальше!:)
Как же долго я искал на ютубе внятное объяснение. Спасибо огромное. С меня лайк и подписка. Ну и конечно колокольчик.
Артём спасибо за ваш труд ,уроки просто супер! Продолжайте пожалуйста в том же духе и процветания вашему каналу.
Спасибо большое - продолжаю :)
Все понятно, ясно и четко показано каждое действие!
Большое спасибо за Ваш труд! Объясняете очень доходчиво и понятно, без лишней воды и в тоже время понятно и просто Процветания Вашему каналу. С радостью буду ждать новых уроков от Вас!
Все понятно и очень интересно, искал возможность поверстать на основе полученных знаний в школе, но не знал как начать, благодаря вашему видео сдвинулся с мертвой точки, с меня лайк, подписка, колокольчик, а так же комент под каждым видео )
Спасибо большое! В первом же видео столько фишек для себя узнала! Отличное видео, буду смотреть весь курс
Успехов!
Спасибо за твои видео, особенно когда в них ты объясняешь какую функцию выполняет каждая отдельная строчка кода, а также когда, где и что нужно (правильно) будет использовать. Успехов тебе и твоему каналу!)
Благодарю!
То что нужно ! Спасибо.
Господи! спасибо тебе за твое видео, единственный кто объясняет, так как нужно именно мне!!! Просто лучший!
Пажалста!)
Очень круто, постоянно ищу такие видео и каналы по верстке, но на первых страницах поиска лишь распиаренные чуваки которые сверстают кое-как, только для того чтобы в конце попиарить свои мега курсы.
Замечательное видео и объяснение! Уже пару других курсов прошла, но тут вы так хорошо объясняете! Многие вещи стали понятнее. Вам нужно продумать рекламную компанию , чтобы привлечь побольше подписчиков. материал замечательный и вы умеете объяснять.
Спасибо!
классное объяснение, спасибо за ваш труд, мне , как новичку, именно то что надо
Прекрасные уроки👍Благодарю
Действительно зачет! Подписался. В сети мало авторов которые делают для людей но много которые делаю лишь бы лишь бы
Супер! Про box-sizing спрашивали на собеседовании - я не ответила. Так что очень полезно))))))
Супер! спасибо! давно искала такие уроки!
ты, помог просто многим не только мне, а и остальным, теперь я знаю, как делать верстку сайта, и преятно удивлю своего учителя по инфомартике)
Спасибо за отличный материал. Всё время проходил мимо данного видео, смотрел другие каналы. Теперь подписка.
Суппер,очень помогаете,на тренде должны быть такие видео👍👍😘😘
Никогда не пишу отзывы, но Ваше объяснение и подача материала на столько понятна и лаконична, что просто выше всех похвал!!!!! Очень, все бы так объясняли!
спасибо !
Спасибо!)
Я не видел еще ролика, посмотрел если ли макет под видео, а там макет, файлы на гитхабе, автору спасибо огромное. Лайк.
Лучше видео-плейлиста в ютубе я не нашел по нужному запросу, не отказался бы от второго видео-плейлиста на другом макете с аналогичным подходом. Хотелось бы отметить одельно использование методологии БЭМ за что очень благодарен, заслуженный лайк.
Спасибо! Но ближайшее время роликов не предвидится :(
Спасибо за труд! Канал - находка для новичка!
Пожалуйста!
Грамотно и четко изложено. Респект и палец вверх.
Спасибо!
Спасибо, ушел смотреть вторую часть и жду третью)
Спасибо большое интересно и просто все выпуски обязательно досмотрю
вот это огонь!!! спасибо, ловите палец вверх от СЕООНЛИ
крутое видео! успехов в развитии канала!
Большое спасибо!
Четко. Вся понятно
Все отлично!
Рад)
Большое спасибо за твои видео, все понятно !!!!!
От меня подписка и лайк)) Спасибо за проделанную работу.
Пожалуйста!) Рад, что полезно
Шикарный))
Пока всё понятно. Спасибо за этот урок))))
Отличное видео!
Спасибо за тему с шрифтами, круто не знал про это, очень удобно)
Пожалуйста!
Ммм... Годнота!
Спасибо)
Круто 🌞
Шикарная подача
Спасибо большое за контент)
Пожалуйста!
Спасибо за полезный видос!
Спасибо, много нового узнал👍
Спасибо за урок😍
Отличный урок
*Спасибо за урок)*
Очень просто всё объясняешь, говорить просто о сложном очень классный навык)
Надеюсь, хотя мне кажется, что порой не очень понятно. Нужно лучше структуру прорабатывать
большое спасибо за труд
супер видео уроки!
Спасибо. Хорошо объясняешь.
Пожалуйста
спасибо, добрый человек^^
Пожалуйста!
Не знал за google fonts helper. Шрифты годами прописывал вручную. Благодарю за урок!)
Пожалуйста!
интереснинько
*Спасибо огромное! Попробую что-то сделать*
случайно нашел твой канал, когда пил кофе! якобс ты крут
Спасибо!
Пажалста
Спасибо, автор хорош!
Начал смотрел, понял, что буду смотреть дальше!
Круто!
Очень крутое объяснение. И спасибо за ссылку на фижме
Очень понравился урок, надеюсь смогу на его основе сверстать свой первый саит)
Большое спасыбо чувак !)
Решил попробовать сверстать вместе с вами данный лендинг. Это вторая верстка в моей практике начинающего верстальщика. Изначально понравилась подача и наличие полезной информации, которой мало говорят или вообще не говорят авторы подобных роликов ( я про первичную подготовку проекта). Однозначно буду продолжать!
Как успех?
Как успехи?
Я искал медь , а нашел золото . Все понятно если хоть немного знаком с версткой .
Спасибо, хорошее видео. Настроить внешний вид фигмы можно ? На белом фоне серый шрифт напрягает глаза
Спасибо!!!
чел ты лучший
Я нашла в ваших комментариях все нужные ссылки, спасибо
Описание бывает полезным ;)
Почему так мало подписчиков у такого талантливого ютубера ,
все идеально .
4:30 Чистых 😄
Красава, я вот буду по сишке снимать курс, хочу также классно объеснить
Успехов!)
Всем привет. Хотел задать вопрос когда открыл reset.css в VS Code там 12 ошибок, это нормально и как её убрать?
OK!
Здравствуйте, при добавлении reset.css программа vs соde выдает ошибку в тексте. Что делать?
Как переносить дизайн фигмы на сайт. Если мне не нужна тильда, а бэк хочу сам вписать через фреймворки или php, nodejs и т д
Почему когда верстаю с Figma макета все на странице получается большим чем на макете, хотя пишу все стили точь в точь как в макете
5.57 мин. - откуда в папке СSS взялась reset CSS?
а можно ли это все делать на питоне? вместо вскода
а что по производительности будет если для всех элементов написать border-box через :root
Здравствуйте, у меня нет файла reset.css и если я его сама создаю, то он пустой
(после 10 минут идет подключение шрифтов а так же бокс сайзинг бордер бокс) а там доп(инферит)
здравствуйте!
подскажите код ссылки на ваш макет в figma. В описании есть ссылка, но я хочу открыть этот файл на компе, а полного кода ссылки в смартфон увидеть не получается
А с можно ли загрузить на сайт многостраничный лендинг ?
В Фигме можно сразу узнать какие шрифты используются в документе, как в Avocode?
Очень классные видео! Один только вопрос, - вы создаёте для benefits и places нижние отступы, но по БЭМ - у блоков отступов не должно быть. Здесь это сделано намерено, в виде исключения? И можно ли такие исключения иногда делать?
В обычной классической верстке вряд-ли вы будете чистый БЭМ юзать когда-либо)
Было бы круто увидеть твою сборку галпа
Могу выслать вам на почту :)
3:29 - Recent (которая вкладка) произносится как р'исэнт. Но это, пожалуй, единственняа претензия))
Жаль что новых видео нет, контент то очень хороший.
откуда reset.css взялось и все остальные папки?
откуда скачать содержимое для файла reset.css? Ведь при создании папки css она была пустая, а если работать, то в каждом проекте ее надо вставлять в папку css? спасибо за видео
с интернета ,по запросу -"reset.css"
Подскажите а файл индекс HTML,где взять это вначале видео вы открыли,спасибо
создать)
а как скачать макет на комп
У меня такая проблемка. когда подключаю reset.css то item не видно а при отключении он появляется
Подскажите пожалуйста, какой плагин используете на 5.31 минуте?
Emmet
Здравствуйте хотела спросить, я хочу дизайн с фигма перетащить на wordpress, мне делать верстку как вы на видео или сразу на вордпресс???
Если у вас кастомный дизайн, то нужно сперва отверстать, а затем интегрировать верстку под вп
Странно, не получается зайти на google fonts helper, но ничего страшного, загружу другим способом. Автор, подача хорошая, я в сфере новичок бывалый, но посмотрю, может я где то в верстке делаю ошибки, удачи!
Вероятнее всего что-то не так сделали)