Тёмный

Верстка сайта по макету Figma на HTML и CSS, ДЗ и работа в портфолио 

ITDoctor
Подписаться 69 тыс.
Просмотров 3,9 тыс.
50% 1

Урок полностью посвящен практике, где мы будем верстать сайт по макету 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

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

 

19 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 21   
@ITDoctor
@ITDoctor 6 месяцев назад
В описании к видео очень много полезных ссылок и ответов на возможные вопросы, обратите на это внимание, а так же смотрите видео целиком и последовательно в плейлисте от первого к последнему, чтобы ничего не пропустить!
@egorrublev5529
@egorrublev5529 6 месяцев назад
чел почему у тебя из года в год однор и тоже????????????
@user-bt1gf8ur5s
@user-bt1gf8ur5s 5 месяцев назад
Подскажи почему у тебя до сих пор есть вкладка Inspect в FIGMA, а не Dev Mode. Как это обратно вернуть? или это старое видео, ты загрузил?
@ITDoctor
@ITDoctor 5 месяцев назад
@@user-bt1gf8ur5s видео снято было когда ещё такой интерфейс был. Это уже не вернуть. Я рассказывал в видео про обновление фигмы в кратце. Но оно и не нужно возвращать. Так стало удобней и лучше. Нужно просто привыкнуть немного к новому
@user-zo6rp1xn8i
@user-zo6rp1xn8i 5 месяцев назад
Огромное спасибо! Хорошее начало для таких как я ❤
@ITDoctor
@ITDoctor 5 месяцев назад
Пожалуйста. Рад что оцениили!
@Rustam_3
@Rustam_3 5 месяцев назад
Спасибо за видео! 😊 Очень классно
@ITDoctor
@ITDoctor 5 месяцев назад
Спасибо за оценку!
@user-yl8ry3wl9w
@user-yl8ry3wl9w 6 месяцев назад
Начинаю завтра, 💯
@user-kb4kd2vd7v
@user-kb4kd2vd7v 6 месяцев назад
Спасибо!!!!
@ITDoctor
@ITDoctor 5 месяцев назад
пожалуйста
@walterwhite4407
@walterwhite4407 Месяц назад
@mikhaildolgov
@mikhaildolgov 6 месяцев назад
😎👍
@OlegFantik
@OlegFantik 6 месяцев назад
Я по тутореалам делаю сайт на вордпрессе на локал сервере опс, и почемуьо в ВСКоде команды WP красным горят, а картинки на странице добовляются когда я нажимаю на ссылку в левой табличке "имеется более смежая автоматически созраненная версия измегений чем та, которую вы смотрите". В чем причина?
@Web..223
@Web..223 Месяц назад
Здравствуйте, а подскажите почему я не могу добавить в пиксо данный макет, вроде всё делаю как всегда, обычно получается добавлять другие макеты а этот нет почему?
@ITDoctor
@ITDoctor Месяц назад
не могу ответить. обычно действительно через импорт работают фигмовские файлы, но может не все. я не сталкивался, но не удивляюсь такому. могу предложить вот это видео ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6YnDq_oDw_I.html оно более свежее и как раз на примере Pixso и там макет тоже пиксовский так что должен точно работать.
@Web..223
@Web..223 29 дней назад
@@ITDoctor спасибо, скачал и уже заверстал.
@digidon727
@digidon727 5 месяцев назад
Классный урок, но данный макет уже заезженный на просторах RU-vid. На канале ВебКадеми уже есть такое макет с подробной версткой. Хотелось бы что то новое и неторёное.
@wasserman950
@wasserman950 5 месяцев назад
Тоже верстал этот макет в вебкадеми
@time4769
@time4769 5 месяцев назад
плохо что без пиксель перфит.
@ITDoctor
@ITDoctor 5 месяцев назад
вот пожалуйста ru-vid.com/group/PLuY6eeDuleINcGnhxCG6U0kzja1Wh7fcd с пиксель перфект
Далее
100❤️
00:19
Просмотров 6 млн