Головна Популярне Увійти Зареєструватися Про проект Ми у Facebook

28 Як створити лендінг "з нуля" по дизайн-макету Figma [частина 5]

Опубліковано: 11 верес. 2021 р.
Підписатися
У цьому відео:
П'ЯТА частина проект лендінга. Проект пишемо з нуля. В цьому відео: пишемо код секції "Зворотній зв'язок" та стилізуємо, серед іншого за допомогою псевдоелементів та псевдокласів (:hover, ::placeholder). Тільки прості практичні приклади, нічого зайвого :)
---
#Frontend #БезкоштовнийКурс
========================================
#коженможе
Зроби внесок у створення україномовного освітнього контенту на YouTube: підтримай будь-якою сумою мій канал "Навчаємося разом".
Реквізити:
на картку МоноБанк 4441 1144 4268 9806 Іван Шихат-Саркісов
========================================
Telegram-канал для зацікавлених темою створення сайтів, для отримання файлів необхідних для виконання уроку ТА ЗАПИСУ НА ІНТЕНСИВНИЙ КУРС НАВЧАННЯ: https://t.me/htmlcssforall
Програма інтенсивного курсу: https://docs.google.com/document/d/1WLS9Ck_-1VNYF8L19YS95l-xTRMkgR5nQyT11YeRB18/edit?usp=sharing
---
Інші відео з серії:
01 - Анонс курсу: https://youtu.be/NJfwDM424IQ
02 - VS Code - Середовище для створення коду, його налаштування, загальні моменти до початку роботи https://youtu.be/LKcusz9QFrw
03 - Перша практика з HTML&CSS: код простенької сторінки згідно дизайн-макету. Підключаємо шрифти. https://youtu.be/zjcUgCI_1V8
04 - Як створити просту сторінку з контактною формою за допомогою HTML5 та CSS3. https://youtu.be/6NWWtsiLEQM
05 - Семантика. Навігація, та до чого тут списки? https://youtu.be/4iHhyixBwxw
06 - Що таке Flexbox у CSS - практичні приклади https://youtu.be/6d9L9OqWkgQ
07 - Практика з позиціонуванням елементів, фоновим зображенням та SVG-зображеннями https://youtu.be/PyW5hbeErpc
08 - Псевдоелементи CSS (практика з додаванням зображень за допомогою ::before) https://youtu.be/10qBnyTrWAU
09 - Знайомство з transition, transform та псевдокласом hover https://youtu.be/HrO4F4loAww
10 - Слайдер на сайті - як створити (частина 1). Оголошення запуску інтенсивного курсу по Frontend.
11 - Слайдер на сайті - як створити (частина 2)
https://youtu.be/Qrj3kXVeCww
12 - Адаптів сайту та медіазапити (практичні приклади) https://youtu.be/JWfhjH0sZcU
13 - Як створити "бургер"-меню на сайті (про адаптів - частина 2) https://youtu.be/JWfhjH0sZcU
14 - Практика з CSS-псевдокласами та псевдоелементами, jQuery-плагін Fancybox
https://youtu.be/tepVIbCxjRU
15 - Як я писав HTML-код 17 років тому. Оновлення інспектора Chrome. Дещо практичне. https://youtu.be/6U68UteBjws
16 - Додаткові корисні розширення для VS Code https://youtu.be/DtXZ6ZjJu08
17 Що таке препроцесори CSS?
https://youtu.be/E7o5DzSrri4
18 Що таке Git, GitHub та GitHub Pages? https://youtu.be/a1B3Rku-EyM
19 Як зробити "липкий" футер на сайті https://youtu.be/hOs7Mwc2bFs
20 Як створити сайт "Моє місто" (багатосторінковий) https://youtu.be/aTO7dU1nNJY
21 Рейтинг у вигляді зірок - як створити на сайті? https://youtu.be/su9l1efFe8Q
22 Навігація "хлібні крихти" (breadcrumbs) - як створити на сайті? https://youtu.be/17xWj681zyM
23 Як створити на сайті фільтр діапазона (наприклад для ціни товару) за допомогою Ion.RangeSlider https://youtu.be/VozcrvUNtiY
24 Як створити лендінг "з нуля" по дизайн-макету Figma [частина 1]
https://youtu.be/l-OJxSDhQgg
25 Як створити лендінг "з нуля" по дизайн-макету Figma [частина 2]
https://youtu.be/oOXKZfGiJ1g
26 Як створити лендінг "з нуля" по дизайн-макету Figma [частина 3]
https://youtu.be/NbZ2EILQ6bQ
26.5 VS CODE - розширення та налаштування які я використовую https://youtu.be/N8PyOnAOBsI
27 Як створити лендінг "з нуля" по дизайн-макету Figma [частина 4] https://youtu.be/_4_lvQ_TMpU

00:00 Інтро
01:22 Аналізуємо структуру секції по макету
02:35 HTML-cтруктура нової секції
10:15 Пишемо CSS-стилі для секції
розгорнути опис
згорнути опис

Можливо зацікавить