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

Зміст

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

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

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

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

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

  1. Типові елементи веб-сторінки
  2. Модель даних веб-сторінки
  3. Знайомство з HTML
  4. SGML
  5. Абсолютні та відносні шляхи до файлів
  6. Doctype, head
  7. Строкові і блочні елементи
  8. Теги span та div
  9. Списки
  10. Порізка і модель даних сайта Колесов
  11. Хостинг на github.io
  12. Спецсимволи
  13. Пісочниця розробника jsFiddle
  14. Введення в CSS
  15. Стилі браузера
  16. Стилі шрифта
  17. Одиниці вимірювання, формат кольору
  18. Розміри елемента
  19. Відступи
  20. Фон (background)
  21. Бордери, границі, рамки
  22. Стилі display, visibility
  23. Вирівнювання плаваючих блоків (float)
  24. GitHub Pages (окремі репозиторії як папки проекта github.io)
  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. Flexbox
  5. Grid, grid
  6. Препроцесори
  7. Зборщики проектів
  8. Про CSS
    Препроцесори, зборщики і пакетні менеджери: gulp, grunt, webpack, composer
  9. Технологія іменування класів БЕМ
  10. Фреймворк Бутстрап
  11. Бутстрап 4

CMS

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

Останні теми

  1. Трансформація та анімація CSS