Верстка сайта по макету Figma на HTML и CSS, ДЗ и работа в портфолио
Урок полностью посвящен практике, где мы будем верстать сайт по макету Figma на HTML и CSS. Я покажу шаг за шагом как создается верстка сайта и расскажу как сформировать портфолио загрузив свою работу на бесплатный хостинг GitHub Pages. В качестве домашнего задания вы завершите верстку сайта самостоятельно и добавите эту работу в свое портфолио.
00:00 Обзор макета для верстки в Figma
08:10 Создание проекта, подключение шрифта, cоздание шапки и подвала сайта
15:09 Стили для шапки сайта и адаптивная версия
23:01 Стили для подвала сайта и загрузка на GitHub
? Скачать макет и код: https://github.com/morphIsmail/site_2_portfolio
❕ Плейлист с практикой по верстке: https://www.youtube.com/playlist?list=PLuY6eeDuleINWFdg0hQZtx1hIQbC0n7l0
? Подробный курс "Верстка сайта с нуля по макету из Figma": https://www.youtube.com/playlist?list=PLuY6eeDuleINcGnhxCG6U0kzja1Wh7fcd
? Уроки из этого цикла доступны в курсе "Frontend разработчик на HTML, CSS и JavaScript" так же в этом курсе много другой практики, верстки по макетам изучение JS, Git и т. д. Подробнее о курсе читайте на странице курса по ссылке: https://stepik.org/a/113402
? Бесплатный курс "Тренажер по вёрстке, плагин Emmet" для ускорения вашей работы: https://stepik.org/113654
⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor
? Telegram канал - https://t.me/itdoctor_official/4
? Курсы на Stepik - https://stepik.org/users/387773773/teach
? Донаты на ЮMoney - https://sobe.ru/na/itdoctor
ВКонтакте - https://vk.com/itdoctorstudio
Яндекс Дзен - https://zen.yandex.ru/itdoctor
#itdoctor #html #css #figma #git #github #vscode
Видео Верстка сайта по макету Figma на HTML и CSS, ДЗ и работа в портфолио автора ITDoctor
Видео Верстка сайта по макету Figma на HTML и CSS, ДЗ и работа в портфолио автора ITDoctor
Показать
Похожие видео
![Прозрачный фон изображения, Как исправить фейковую прозрачность и почистить фон](http://pic.rutubelist.ru/video/71/e8/71e80f88b70a47acf65bc71756a6d466.jpg?size=s)
![#9 Вычисляемые свойства и кэширование, отличие вычисляемых свойств от методов на Vue.js](http://pic.rutubelist.ru/video/c3/2a/c32ad30d0b9dd435ce7c0827295b3925.jpg?size=s)
![VID_20240620_125313](http://pic.rutubelist.ru/video/81/29/8129e6f5695ea4f3963756fadd74de34.jpg?size=s)
![#15 Работа с компонентами на Vue.js](http://pic.rutubelist.ru/video/8e/82/8e8200d3b9aabd94a50ad2c46e037563.jpg?size=s)
![Настройка пульта D4 под BFT. Запись в приемник BFT](http://pic.rutubelist.ru/video/fd/7c/fd7c01304d1b759779f85fd474781593.jpg?size=s)
![Рекомендательные сервисы в интернете](http://pic.rutubelist.ru/video/b7/c4/b7c44221c35536483bbba6b9bef67ec8.jpg?size=s)
![Пульты NICE Flo2 от шлагбаумаКиев заказать](http://pic.rutubelist.ru/video/cd/48/cd48581e8b1d4a688056114f1d5bcce1.jpg?size=s)
![#13 Обработка событий и модификаторы клавиш на Vue.js](http://pic.rutubelist.ru/video/ee/0b/ee0b40e49518079f26bac5027944e06a.jpg?size=s)
![#12 Отрисовка списков и создание циклов на Vue.js](http://pic.rutubelist.ru/video/35/64/35644aff6555c380e83d81da71bf315b.jpg?size=s)
![#6 Экземпляр приложения и компонента на Vue.js, Хуки и диаграмма жизненного цикла](http://pic.rutubelist.ru/video/db/e2/dbe226b2e831b7919312ac57f249d662.jpg?size=s)
![Bradex DE 1224; DE 1225; DE 1226 Подушка - накладка на ремень безопасности детская](http://pic.rutubelist.ru/video/81/68/816826915b5bc1b0742f113816c86e27.jpg?size=s)
![Верстка сайта по макету из Figma без Dev Mode в бесплатной версии](http://pic.rutubelist.ru/video/34/27/34278b60a5a44dffa98d43c21662f2d5.jpg?size=s)
![#3 Работа с пользовательским вводом и директивы v-on v-model на Vue.js](http://pic.rutubelist.ru/video/b2/55/b25522f23453ffec061ca8f3216a5a36.jpg?size=s)
![Тренды в аксессуарах весна-лето 2018](http://pic.rutubelist.ru/video/d7/5f/d75fbb898612c559ee9a5d1f204223c0.jpg?size=s)
![КОМПАС-3D v23: Отображение отверстий на развёртках упрощённого контура](http://pic.rutubelist.ru/video/c8/19/c8199797c5615f8ba7356cabb9f71533.jpg?size=s)
![Обзор realme GT6](http://pic.rutubelist.ru/video/1b/31/1b315beb2435e6c668f1561c889e3e2a.jpg?size=s)
![#4 Условия и циклы, директива v-if и v-for на фреймворке Vue.js](http://pic.rutubelist.ru/video/f0/2a/f02a720dd8876ade296a875dc8e62660.jpg?size=s)
![Пульты GEO от шлагбаумов Кировоград заказать](http://pic.rutubelist.ru/video/b7/70/b7700f939d2521854f5a2e7a846ac979.jpg?size=s)
![#8 Свойство data и методы на фреймворке Vue.js](http://pic.rutubelist.ru/video/15/51/1551ff972e47deed88578df38bbc1f4d.jpg?size=s)
![#7 Синтаксис шаблонов, интерполяция, директивы и сокращенная запись на Vue.js](http://pic.rutubelist.ru/video/3e/4d/3e4df918c498ff04c37f5b4da848e54a.jpg?size=s)