Фронтенд, група fe15

Зміст

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

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

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

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

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

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

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

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

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

  1. Медіа-запити
  2. Адаптивна та чуйна верстка
  3. 12-колоночна css-сітка
  4. Фреймворк Бутстрап
  5. Бутстрап 4
  6. Препроцесори
  7. Flexbox

CMS

  1. Веб-сервер
  2. Бази даних (і, власне, весь вордпрес поки що тут)

Основи JavaScript

  1. Введення в програмування, алгоритми
  2. Алгоритми, практика
  3. Введення в JavaScript
  4. Розгалуження алгоритму if
  5. Введення в функції
  6. Повернення результату функцією
  7. Аргументи функції
  8. Іменовані та анонімні функції
  9. Область видимості змінних
  10. Чисті та брудні функції
  11. Операції зі строками
  12. Спецсимволи
  13. Методи строк
  14. Регулярні вирази
  15. Бібліотека Math
  16. Цикли
  17. Алгоритми, практика 2
  18. Масиви
  19. Вказівник на складний тип даних, копіювання масивів
  20. Методи масивів
  21. Набори, колекції
  22. Об'єкти
  23. Рекурсія, глибоке копіювання об'єктів
  24. Оператор let
  25. Методи об'єктів
  26. Об'єкт this
  27. Самовиклик функцій
  28. Масив arguments
  29. Spread - три крапки
  30. Дебагінг
  31. Callback-функції, call та apply
  32. Об'єкти window та document
  33. Пошук елементів в DOM
  34. Навігація по DOM
  35. Робота зі стилями
  36. Вміст тега
  37. Атрибути елементів
  38. Робота з класами
  39. Створення елементів
  40. Розміри та позиція елемента
  41. Події
  42. Прослуховувач подій addEventListener
  43. Робота з датою і часом
  44. Методи для роботи з датою/часом
  45. Таймери
  46. Практика: datepicker
  47. Location
  48. Cookie
  49. Localstorage
  50. Користувацькі стилі та скрипти (user-css, user-script)
  51. Drag-n-drop
  52. Drag-n-drop практика

jQuery

  1. Символ долара в імені змінної
  2. Бібліотека функцій jQuery
  3. Сфера застосувань
  4. Головна функція jQuery
  5. Навігація по DOM
  6. Робота з елементами
  7. Модифікація DOM
  8. Події (events)
  9. Домашнє завдання
  10. Анімація jQuery та CSS
  11. Пркатика по jQuery
  12. Підключення сторонніх плагінів
  13. Бібліотеки
  14. Створення jQuery-плагінів

Асинхронна передача даних

  1. Ajax
  2. Асинхронний JS, Fetch
  3. Розробка соціальної мережі

Single-Page Application

Веб-графіка, анімація

  1. Анімація елементів
  2. Формат зображень SVG
  3. Робота з canvas