PRO-19

πŸ“˜ ΠœΠΎΠ΄ΡƒΠ»ΡŒ 1: ΠžΡΠ½ΠΎΠ²Ρ‹ HTML&CSS

πŸ“š Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ курса

β„– Π’Π΅ΠΌΠ° Π»Π΅ΠΊΡ†ΠΈΠΈ Бсылка        
1 Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² HTML, знакомство с VS Code, шаблонная структура HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ <h1>–<h6>, Π°Π±Π·Π°Ρ† <p>, ссылки <a>, изобраТСния <img> ΠΈ ΠΈΡ… ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ЛСкция 1
2 Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ HTML (<header>, <main>, <footer>, <section>, <div>), списки, Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² CSS, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅, сСлСкторы ΠΈ свойства, Ρ†Π²Π΅Ρ‚ ΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ (Π½Π°Π·Π²Π°Π½ΠΈΠ΅, RGB, HEX) ЛСкция 2
3 Π’Π΅Π³ <button>, Ρ‚ΠΈΠΏΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ, псСвдоклассы, якорныС ссылки, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами, бокс-модСль, свойства padding, margin ЛСкция 3
4 Flexbox, структурныС псСвдоклассы, основы Git ΠΈ GitHub ЛСкция 4
5 ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Git ΠΈ GitHub, ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов ЛСкция 5
6 Π€ΠΎΡ€ΠΌΡ‹ <form>, ΠΌΠ΅Π΄ΠΈΠ°-запросы @media, hamburger-мСню ЛСкция 6
7 Grid β€” блочная сСтка Π² CSS ЛСкция 7
8 Растровая Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, background-image, Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ ΠΈ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ЛСкция 8
9 ВСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, SVG-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹, SVG-спрайты, <iframe> ЛСкция 9
10 Анимации Π² CSS ЛСкция 10
11 CSS-ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ ЛСкция 11
12 CSS-прСпроцСссоры (SASS) ЛСкция 12
13 Tailwind CSS: установка Ρ‡Π΅Ρ€Π΅Π· npm, npx, CDN. Π€Π°ΠΉΠ» .gitignore ЛСкция 13
14 Π‘Π΅ΠΌΠ°Π½Ρ‚ΠΈΠΊΠ°, Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ ΠΈ оптимизация сайта: lazy loading, минификация, Lighthouse, основы SEO, @media print, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ download, favicon, Markdown ЛСкция 14
15 ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ: Animate.css, Hover.css, AOS (Animate On Scroll), Swiper ЛСкция 15
16 Π—Π°Ρ‰ΠΈΡ‚Π° ΠΈΡ‚ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΏΠΎ HTML & CSS Β 

🎨 ВрСбования ΠΊ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ

1. Бтилизация ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅

2. ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ

3. Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠ°