Фронтенд, група fe20a (верстка)

Зміст

- зірочкою позначено теми для самоопрацювання.

  1. Вступ
  2. Історія інтернета
  3. Ключові поняття

Інструменти веб-розробника

  1. Інструменти фронтенд-розробника
  2. Організація робочого простору
  3. Налаштування IDE
  4. Робота з консоллю операційної системи
  5. Програма Adobe Photoshop
  6. Порізка макета
  7. Робота з FTP
  8. Налаштування деплоймента на FTP в PhpStorm
  9. Знайомство з Git

Верстка (HTML, CSS)

  1. Типові елементи веб-сторінки
  2. Модель даних веб-сторінки
  3. Знайомство з HTML
  4. SGML
  5. Абсолютні та відносні шляхи до файлів
  6. Doctype, head
  7. Строкові і блочні елементи
  8. Теги span та div
  9. Списки
  10. Спецсимволи
  11. Порізка і модель даних сайта Колесов
  12. Хостинг на github.io
  13. GitHub Pages (окремі репозиторії як папки проекта github.io)
  14. Пісочниця розробника jsFiddle
  15. Введення в CSS
  16. Стилі браузера
  17. Стилі шрифта
  18. Одиниці вимірювання, формат кольору
  19. Розміри елемента
  20. Відступи
  21. Фон (background)
  22. Бордери, границі, рамки
  23. Стилі display, visibility
  24. Вирівнювання плаваючих блоків (float)
  25. Вага стилів
  26. Модифікатори :hover, :active, :visited, :link
  27. Акуратність коду
  28. Семантика HTML5
  29. Коментарі
  30. Інструмент Emmet
  31. Псевдоелементи :before та :after
  32. Стиль position
  33. Стиль z-index
  34. Спрайти
  35. Селектори CSS
  36. Більше стилів богу стилів
  37. GitHub SSH (паролі та SSH-з'єднання)
  38. Таблиці
  39. Таблиці CSS
  40. Алгоритм по випадаючому меню
  41. Рідко вживані теги
  42. Консоль розробника, дебаггінг верстки
  43. Підключення шрифтів

Веб-форми, аудио-відео, фрейми, верстка e-mail

  1. Основні теги веб-форм
  2. Випадаючий список select
  3. Атрибути елементів веб-форм
  4. Елементи вебформ, добавлені в HTML5
  5. Аудио та відео
  6. Вбудований контент iframe
  7. Верстка e-mail
  8. Веб-сервер
    Відправка даних форм на e-mail
  9. Гілки Git
  10. Практика по гілкам Git
  11. Типові алгоритми дій в Git

Адаптивна верстка

  1. Медіа-запити
  2. Адаптивна та чуйна верстка
  3. 12-колоночна css-сітка
  4. Фреймворк Бутстрап
  5. Бутстрап 4
  6. Препроцесори
  7. Flexbox
  8. Grid, grid
  9. Про CSS
    Препроцесори, зборщики і пакетні менеджери: gulp, grunt, webpack, composer
  10. Технологія іменування класів БЕМ

CMS

  1. Веб-сервер
  2. Бази даних
  3. Створення власної теми Wordpress