Верстка сайта с нуля из Figma для начинающих #1
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 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. Шрифты годами прописывал вручную. Благодарю за урок!)
Пожалуйста!
Спасибо за тему с шрифтами, круто не знал про это, очень удобно)
Пожалуйста!
крутое видео! успехов в развитии канала!
Пока всё понятно. Спасибо за этот урок))))
Спасибо, хорошее видео. Настроить внешний вид фигмы можно ? На белом фоне серый шрифт напрягает глаза
Начал смотрел, понял, что буду смотреть дальше!
Круто!
Спасибо за полезный видос!
*Спасибо огромное! Попробую что-то сделать*
Очень крутое объяснение. И спасибо за ссылку на фижме
Четко. Вся понятно
Спасибо. Хорошо объясняешь.
Пожалуйста
Шикарная подача
Спасибо, много нового узнал👍
Спасибо!)
Спасибо большое за контент)
Пожалуйста!
большое спасибо за труд
Очень понравился урок, надеюсь смогу на его основе сверстать свой первый саит)
Большое спасибо!
случайно нашел твой канал, когда пил кофе! якобс ты крут
Отличное видео!
Отличный урок
спасибо, добрый человек^^
Пожалуйста!
Ммм... Годнота!
Спасибо)
Все отлично!
Рад)
Спасибо за урок😍
супер видео уроки!
Спасибо, автор хорош!
Большое спасыбо чувак !)
Я нашла в ваших комментариях все нужные ссылки, спасибо
Описание бывает полезным ;)
Шикарный))
Круто 🌞
Красава, я вот буду по сишке снимать курс, хочу также классно объеснить
Успехов!)
интереснинько
Спасибо!
Пажалста
Очень классные видео! Один только вопрос, - вы создаёте для benefits и places нижние отступы, но по БЭМ - у блоков отступов не должно быть. Здесь это сделано намерено, в виде исключения? И можно ли такие исключения иногда делать?
В обычной классической верстке вряд-ли вы будете чистый БЭМ юзать когда-либо)
4:30 Чистых 😄
чел ты лучший
Спасибо!!!
3:29 - Recent (которая вкладка) произносится как р'исэнт. Но это, пожалуй, единственняа претензия))
Почему так мало подписчиков у такого талантливого ютубера ,
все идеально .
Я искал медь , а нашел золото . Все понятно если хоть немного знаком с версткой .
(после 10 минут идет подключение шрифтов а так же бокс сайзинг бордер бокс) а там доп(инферит)
Жаль что новых видео нет, контент то очень хороший.
Спасибо за видео. Супер объясняете. подробно. Вопрос. в reset.css теги в ручную прописываете? или есть лайв хак.
Вам нужно просто где-то скачать его и все
@@steptoweb503
google в помощь. Спс
Было бы круто увидеть твою сборку галпа
Могу выслать вам на почту :)
OK!
Странно, не получается зайти на google fonts helper, но ничего страшного, загружу другим способом. Автор, подача хорошая, я в сфере новичок бывалый, но посмотрю, может я где то в верстке делаю ошибки, удачи!
Вероятнее всего что-то не так сделали)
отличное видео) лайк)
один вопрос: откуда взялся файл reset. css? или он там по умолчанию появляется?
вот я тоже не вкурил, за html сказал даже как создать
Сорян, был не внимателен, файл по ссылке в описании)
Сорян, был не внимателен, файл по ссылке в описании)
@15:10
You can simply do * {
box-sizing: border-box;
}.
much shorter
Хорошое видео, но я бы всё таки увеличил бы масштаб, мелковато смотрится экран.
Да, сейчас уже увеличиваю побольше
В Фигме можно сразу узнать какие шрифты используются в документе, как в Avocode?
Стоит ли использовать reset новичкам? Это кнш все упростит, но сами мы не поймем, че и как произошло, что изменилось и что там вообще написано. Или просто не морочить голову этим и верстать)
Очень познавательное видео!
но не подскажешь, я когда вставил reset.css, то у меня высвечивает 12 ошибок, как быть?)
решили проблему?
Спасибо за урок... !!! Ах да будь добр...!!! Залей макет на внешнее облако..Не получается скачать из figma....
Его не нужно качать и нельзя залить - фигма уже облачное решение. В этом как бы и преимущество. Вы можете скопировать макет к себе в фигму
5.57 мин. - откуда в папке СSS взялась reset CSS?
а можно ли это все делать на питоне? вместо вскода
Спасибо за уроки. У меня какое-то внутреннее сопротивление подключать border-box на весь документ. Можно этого не делать? Боюсь запутаться. Или это обязательно?
Это обычная практика. Абсолютно все её используют)
@@steptoweb503 Спасибо!
@@steptoweb503 а он же с Firefox не идет, вроде.
@@user-dw8ff4oz7x ещё как идёт :)
Здравствуйте хотела спросить, я хочу дизайн с фигма перетащить на wordpress, мне делать верстку как вы на видео или сразу на вордпресс???
Если у вас кастомный дизайн, то нужно сперва отверстать, а затем интегрировать верстку под вп
у меня по непонятным причинам лайв сервер не работал в ручную короче прописал,жажда знаний сильней лени)
а если шрифты через подключить из гугл фонтс?можно же так?или лучше как на видео?
Можно, но лучше как в видео
@@steptoweb503 а почему?
@@user-ft5ew6lw5n Потому что если по каким-то причинам серваки, на которых гугл хранит шрифты, окажутся недоступными, то ваш сайт отобразится с дефолтными системными шрифтами и это может поломать его
откуда скачать содержимое для файла reset.css? Ведь при создании папки css она была пустая, а если работать, то в каждом проекте ее надо вставлять в папку css? спасибо за видео
с интернета ,по запросу -"reset.css"
Как переносить дизайн фигмы на сайт. Если мне не нужна тильда, а бэк хочу сам вписать через фреймворки или php, nodejs и т д
В какой либо из частей будет идти речь о мобильной версии сайта?
Само собой - в части про адаптив