Опис

Тема №1. Введення в курс 1. Етапи розробки сайту. 2. Інструменти необхідні для верстки сайту: редактори коду, інспектори, корисні веб-ресурси. 3. Засоби для перегляду веб-сторінок. Види браузерів. Гарячі клавіші. Тема №2. Введення в HTM 1. Що таке HTML. Теги. 2. Структура HTML документа. Теги Doctype, html, head, body. 3. Порядок використання тегів. 4. Теги strong, br, em, p. 5. Створення заголовків h1-h6 6. Вставка спецсимволов. 7. Стандарти w3.org, html- валідатор. Тема №3. Вставка графічних елементів на сторінку. 1. Типи і розмір зображень для web. 2. Основні параметри тега img. (Src, alt, width, height) Тема №4. створення посилань 1. Створення текстових посилань. 2. Створення графічних посилань. 3. Створення якорів. 4. Шлях до файлу: відносний і абсолютний.Структура вкладень - дерево. Слінковка html сторінок. Тема №5. Впорядкування даних за допомогою списків. Створення нумерованого і маркірованого списків. Тема №6. Представлення даних в табличному вигляді 1. Для чого використовують таблиці сьогодні. 2. Верстка елементарної таблиці. Основні параметри для створення таблиці, об'єднання осередків таблиці colspan, rowspan. Розміри таблиці. 3. Форматування таблиць: колір і кордони. Тема №7. Форми і їх елементи 1. Для чого потрібні форми. 2. Основні елементи форм і їх типи. Тема №8. Каскадні таблиці стилів 1. Поняття каськадності і успадкування. 2. Підключення CSS файлу. 3. Використання "риби" для html і css. 4. Використання style в документі. Скидання стилів. 5. Селектори CSS. Пріоритет селектор. Застосування атрибутів class, id. 6. Форматування тексту. Тема №9. Фонові зображення. Блоки. 1. Колір і зображення в якості фону. Застосування фону на різних елементах. 2. Межі елементів. 3. Блокові і рядкові елементи. Властивість display. Центрування блоку по горизонталі. 4.Іспользованіе внутрішніх і зовнішніх відступів. Тема №10. Стилізація списків і блоків 1. Розташування блоків на сторінці за допомогою float. 2. Розташування блоків за допомогою table. 3. Варіанти і застосування списків. 4. Псевдоелементи. 5. Використання CSS3. Проблеми з кросбраузерністю. Тема № 11. Технологія flexbox 1. Підключення flex 2. Поняття flex-контейнера, flex-елементів, головною і поперечної осі 3. Вирівнювання flex-елементів 4. Створення структури документа за допомогою flex Тема № 12. Багаторівневе навігаційне меню. Вертикальне і горизонтальне меню Тема №13. Абсолютна і відносне позиціонування. Тема №14. Шрифти. Підключення кастомних шрифтів, відмінності шрифтів в різних ОС. Тема №15. Використання javascript на сторінці 1. Використання jQuery плагінів. Загальний принцип підключення інтеграції скриптів. 2. Кастомізація елементів форм з момощью javascript і CSS3. Відмінності. 3. Підключення javascript-галереї Тема №16. Розробка мобільного меню Тема №17. підключення слайдера Тема №18. Порядок верстки веб-сторінки 1. Що таке макет і для чого він потрібен. 2. Стандарти PixelPerfect. Варіанти перевірки на відповідність з макетом. 3. Фіксований і гумовий макет. Полурезіна. 4. Стандартне розташування блоків на сторінці. Вкладеність блоків. Тема №19. Порядок нарізки макета 1. Робота з шарами в Photoshop. 2. Візуальне розбиття сторінки на основні та другорядні елементи. Стандартне найменування блоків. 3. Нарізка макета на прикладі. Тема №20. Фрейми і впровадження зовнішніх даних на сторінку. Підключення google карти. Тема №21. Адаптація сторінки під різні екрани. фреймворки 1. Адаптація сторінки під різні пристрої за допомогою медіа-запитів. 2. Для чого застосовуються CSS-фреймворки і їх використання для адаптації сторінки під різні пристрої. Вимоги до макетів. Огляд CSS-фреймворків. Bootstrap. Особливості відображення елементів і поведінки для Android / iOS. Тема № 22. Портфоліо 1. Для чого необхідно портфоліо. 2. Як створити портфоліо. Тема № 23. Додаткові теми. 1. Створення і підключення фавіконки сайту. 2. Що таке SEO і чому це важливо. (Оглядово). 3. Як розмістити сайт в мережі інтернет. Хостинг, домени. Тестування