Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Практичні заняття з HTML, CSS
Урок:
Практичні заняття з HTML, CSS
22.03.2026
Вміст уроку:
1
2
Опис, який учні побачать перед початком уроку
Продовжуєм вивчати html та css на основі нашої першої веб сторінки.
1
1. Ефекти при наведенні (:hover) — "Оживлення" кнопок
Це найпростіший спосіб зрозуміти, як працюють псевдокласи в CSS. Коли користувач наводить мишку на кнопку, вона має реагувати.
Що зробити: Додай у styles.css правило для .btn:hover.
2. Закруглені кути та тіні (box-shadow та border-radius)
Що зробити: Додай до .container та .btn закруглення.
3. Анімована кнопка (Ефект наведення та натискання)
Це навчить тебе працювати з станами елемента (hover — наведення, active — клік) та плавністю (transition).
4. "Сучасний" контейнер (Тіні та межі)
Цей приклад покаже, як працює блочна модель (Box Model) і як додати сайту "об'єму".
5.Стилізація списку та картинок
Це допоможе зрозуміти, як керувати відступами та декоративними елементами.
6.Градієнтна "жива" кнопка
Замість синього кольору, зробимо перелив, який плавно змінюється.
7.Плавна поява контенту (Keyframes)
2
12 з 12 балів
Внести зміни в файл СSS та оновити файли на веб сервері. Прикріпити адресу домена в нотатках. Результат має бути таким + плавна поява контенту:
.png)
Рефлексія від 0 учнів
Сподобався:
0
Так: 0
Ні: 0
Зрозумілий:
0
Так: 0
Ні: 0
Потрібні роз'яснення:
0
Ні: 0
Так: 0