Верстка сайта по макету Figma на HTML и CSS, ДЗ и работа в портфолио
Рет қаралды 3,877
Күн бұрынУрок полностью посвящен практике, где мы будем верстать сайт по макету Figma на HTML и CSS. Я покажу шаг за шагом как создается верстка сайта и расскажу как сформировать портфолио загрузив свою работу на бесплатный хостинг GitHub Pages. В качестве домашнего задания вы завершите верстку сайта самостоятельно и добавите эту работу в свое портфолио.
00:00 Обзор макета для верстки в Figma
08:10 Создание проекта, подключение шрифта, cоздание шапки и подвала сайта
15:09 Стили для шапки сайта и адаптивная версия
23:01 Стили для подвала сайта и загрузка на GitHub
📌 Скачать макет и код: github.com/morphIsmail/site_2...
❕ Плейлист с практикой по верстке: • Верстка сайта по макет...
🎥 Подробный курс "Верстка сайта с нуля по макету из Figma": • Верстка сайта с нуля п...
💎 Уроки из этого цикла доступны в курсе "Frontend разработчик на HTML, CSS и JavaScript" так же в этом курсе много другой практики, верстки по макетам изучение JS, Git и т. д. Подробнее о курсе читайте на странице курса по ссылке: stepik.org/a/113402
🎁 Бесплатный курс "Тренажер по вёрстке, плагин Emmet" для ускорения вашей работы: stepik.org/113654
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/itdoctor_official/4
🎥 Курсы на Stepik - stepik.org/users/387773773/teach
💰 Донаты на ЮMoney - sobe.ru/na/itdoctor
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/itdoctor
Rutube - rutube.ru/channel/23500045/
#itdoctor #html #css #figma #git #github #vscode
@ITDoctor 5 ай бұрын
В описании к видео очень много полезных ссылок и ответов на возможные вопросы, обратите на это внимание, а так же смотрите видео целиком и последовательно в плейлисте от первого к последнему, чтобы ничего не пропустить!
@egorrublev5529 5 ай бұрын
чел почему у тебя из года в год однор и тоже????????????
@user-bt1gf8ur5s 5 ай бұрын
Подскажи почему у тебя до сих пор есть вкладка Inspect в FIGMA, а не Dev Mode. Как это обратно вернуть? или это старое видео, ты загрузил?
@ITDoctor 5 ай бұрын
@@user-bt1gf8ur5s видео снято было когда ещё такой интерфейс был. Это уже не вернуть. Я рассказывал в видео про обновление фигмы в кратце. Но оно и не нужно возвращать. Так стало удобней и лучше. Нужно просто привыкнуть немного к новому
@user-zo6rp1xn8i 5 ай бұрын
Огромное спасибо! Хорошее начало для таких как я ❤
@ITDoctor 5 ай бұрын
Пожалуйста. Рад что оцениили!
@Rustam_3 5 ай бұрын
Спасибо за видео! 😊 Очень классно
@ITDoctor 5 ай бұрын
Спасибо за оценку!
@user-yl8ry3wl9w 5 ай бұрын
Начинаю завтра, 💯
@user-kb4kd2vd7v 5 ай бұрын
Спасибо!!!!
@ITDoctor 5 ай бұрын
пожалуйста
@OlegFantik 5 ай бұрын
Я по тутореалам делаю сайт на вордпрессе на локал сервере опс, и почемуьо в ВСКоде команды WP красным горят, а картинки на странице добовляются когда я нажимаю на ссылку в левой табличке "имеется более смежая автоматически созраненная версия измегений чем та, которую вы смотрите". В чем причина?
@mikhaildolgov 5 ай бұрын
😎👍
@walterwhite4407 Ай бұрын
@Web..223 Ай бұрын
Здравствуйте, а подскажите почему я не могу добавить в пиксо данный макет, вроде всё делаю как всегда, обычно получается добавлять другие макеты а этот нет почему?
@ITDoctor 27 күн бұрын
не могу ответить. обычно действительно через импорт работают фигмовские файлы, но может не все. я не сталкивался, но не удивляюсь такому. могу предложить вот это видео kzfaq.info/get/bejne/bL-ed9SQ1Krbj30.html оно более свежее и как раз на примере Pixso и там макет тоже пиксовский так что должен точно работать.
@Web..223 26 күн бұрын
@@ITDoctor спасибо, скачал и уже заверстал.
@digidon727 5 ай бұрын
Классный урок, но данный макет уже заезженный на просторах KZfaq. На канале ВебКадеми уже есть такое макет с подробной версткой. Хотелось бы что то новое и неторёное.
@wasserman950 5 ай бұрын
Тоже верстал этот макет в вебкадеми
@time4769 5 ай бұрын
плохо что без пиксель перфит.
@ITDoctor 5 ай бұрын
вот пожалуйста kzfaq.info/sun/PLuY6eeDuleINcGnhxCG6U0kzja1Wh7fcd с пиксель перфект
Makhabat Abdisattarova
Рет қаралды 20 М.