https://github.com/shevchenkool/pro-19

https://github.com/shevchenkool/pro-19

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/shevchenkool/pro-19
• Owner: ShevchenkoOl
• Created: 2025-10-04T11:29:50.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2026-01-10T19:15:07.000Z (5 months ago)
• Last Synced: 2026-01-11T05:46:55.400Z (5 months ago)
• Language: JavaScript
• Homepage: https://shevchenkool.github.io/PRO-19/
• Size: 13.1 MB
• Stars: 1
• Watchers: 0
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

          
# 📘 Модуль  1: Основы HTML&CSS

## 📚 Содержание курса

| № | Тема лекции | Ссылка         |

|---|--------------|-------------------------------------------------------|

| 1 | Введение в HTML, знакомство с VS Code, шаблонная структура HTML-документа, заголовки `
`–`
`, абзац `

`, ссылки ``, изображения `` и их обязательные атрибуты | [Лекция 1](HTML&CSS/lekce1) |

| 2 | Структурные теги HTML (``, ``, ``, ``, `
`), списки, введение в CSS, подключение, селекторы и свойства, цвет и прозрачность (название, RGB, HEX) | [Лекция 2](HTML&CSS/lekce2) |

| 3 | Тег ``, типы кнопок, псевдоклассы, якорные ссылки, переходы между страницами, бокс-модель, свойства `padding`, `margin` | [Лекция 3](HTML&CSS/lekce3) |

| 4 | Flexbox, структурные псевдоклассы, основы Git и GitHub | [Лекция 4](HTML&CSS/lekce4) |

| 5 | Продолжение Git и GitHub, позиционирование элементов | [Лекция 5](HTML&CSS/lekce5) |

| 6 | Формы ``, медиа-запросы `@media`, hamburger-меню | [Лекция 6](HTML&CSS/lekce6) |

| 7 | Grid — блочная сетка в CSS | [Лекция 7](HTML&CSS/lekce7) |

| 8 | Растровая графика, `background-image`, линейные и радиальные градиенты | [Лекция 8](HTML&CSS/lekce8) |

| 9 | Векторная графика, SVG-документы, SVG-спрайты, `` | [Лекция 9](HTML&CSS/lekce9) |

| 10 | Анимации в CSS | [Лекция 10](HTML&CSS/lekce10) |

| 11 | CSS-методологии | [Лекция 11](HTML&CSS/lekce11) |

| 12 | CSS-препроцессоры (SASS) | [Лекция 12](HTML&CSS/lekce12) |

| 13 | Tailwind CSS: установка через npm, npx, CDN. Файл `.gitignore` | [Лекция 13](HTML&CSS/lekce13) |

| 14 | Семантика, доступность и оптимизация сайта: lazy loading, минификация, Lighthouse, основы SEO, `@media print`, атрибут `download`, favicon, Markdown | [Лекция 14](HTML&CSS/lekce14) |

| 15 | Подключение библиотек: Animate.css, Hover.css, AOS (Animate On Scroll), Swiper | [Лекция 15](HTML&CSS/lekce15) |

| 16 | Защита итогового проекта по HTML & CSS |


---

### 🎨 Требования к проекту

#### 1. Стилизация и оформление

- Используйте шрифты, текстовые элементы, изображения и иконки.

- Верстка с помощью **Flexbox**.

- Разрешено использовать **чистый CSS** или **Tailwind CSS**.

#### 2. Адаптивность

- Медиа-запросы для экранов: `1920px`, `1024px`, `768px`, `320px`.

- Реализуйте **гамбургер-меню** для мобильной версии сайта.

#### 3. Интерактивность и динамика

- Добавьте **анимации** элементов.

- Реализуйте **формы** с базовой валидацией.

- Сделайте **модальное окно**, открывающееся по событию пользователя.

---