Консультування по HTML5 / CSS3 кодуванню

Кодування html5/css3 + js на професійному рівні. Напрямок для тих, хто бажає професійно кодувати сторінки на основі макетів.

Консультування по окремим питання, так і на основі програми, якщо навчання з нуля.

З умовами проведення консультувань можна ознайомитися на сторінки Консультування. Як зі мною зв'язатися і узнати часи роботи - на сторінці Контакти.

Програма навчання з нуля

  1. Введення в веб.
    1. Що таке віртуальний сервер та інтернет-сайт. Порядок створення інтернет-сайту, роли розробників.
    2. Інструменти необхідні для кодування сайту: редактори кода, інспектори, корисні веб-ресурси.
    3. Засоби для перегляду веб-сторінок. Браузер, принцип роботи клієнт-сервер. Яки бувають, відмінності в версіях.
  2. Введення в HTML. Форматування документа
    1. Що таке HTML і для чого потрібен. Основні теги. Порядок використання тегів.
    2. Кодування документа та файлів. Їх види.
    3. Основні теги для форматування тексту: h1-h6, p, strong, em, br.
    4. Використання спецсимволів (мнемонік).
    5. Посилання. Атрибути посилань. Відносний і абсолютний шлях.
    6. Додавання графічних елементів на сторінку.
    7. Створення упорядкованого і не упорядкованого списків.
    8. Якоря. Використання якорів на сторінці.
    9. Стандарти w3.org, html Валідатор.
  3. Каскадні таблиці стилів (CSS)
    1. Що це таке і для чого потрібні.
    2. Підключення CSS файлу, використання “риби” для html та css. Використання style в документі.
    3. Стандартні відступи у елементів або що таке CSS-reset.
    4. Що таке class, id. Відмінність.
    5. Форматування тексту.
  4. Порядок кодування веб-сторінки
    1. Порядок створення веб-сторінки: що таке макет і для чого він потрібен.
    2. Стандарти PixelPerfect або кодування 1:1 до макету — якщо у дизайнера були мізки, коли він створював макет, то це можливо.
    3. Тестування на відповідність з макетом.
    4. Деякі особливості веб-браузерів, емулятори Internet Explorer різних версій. Що таке віртуальна машина.
    5. фіксований та респонсівний макет. Частково фіксований.
    6. Стандартне розташування блоків на сторінки: одна, дві, три колонки. вкладеність блоків.
    7. Поняття SEO оптимізації і що таке стандарт WGAC. Перевернута шапка.
  5. Порядок нарізки макета
    1. Робота з шарами в Photoshop.
    2. Визначення основного блоку.
    3. Візуальне розбиття сторінки на основні та другорядні елементи. Стандартне найменування блоків.
    4. Використання внутрішніх та зовнішніх відступів - margin / padding. У чому відмінності. Центрування блоку по горизонталі
    5. Використання float при розташуванні колонок на сторінці. Розташування блоків за допомогою table
    6. Форматування тексту. Скорочена і повна запис.
    7. Застосування списків для навігаційного меню. Меню, що випадає на css
    8. Абсолютна і відносне позиціонування. Для чого іспольузется. Що таке z-index. Центрування блоку по вертикалі.
  6. Таблиці
    1. Для чого необхідні таблиці, де використовувалися. Відмінності таблиць від блоків. Використання таблиць в даний час.
    2. Структура таблиці: основні теги.
    3. Форматування таблиць: колір і кордони.
    4. Об'єднання осередків, рядків: colspan, rowspan. розміри таблиці.
  7. Форми
    1. Основні елементи форм.
    2. Відмінності відображення елементів форм від браузера до браузеру.
    3. Кастомізація елементів форм за допомогою CSS і jQuery. відмінності.
  8. Використання JavaScript на сторінці
    1. Бібліотека jQuery і jQuery UI. Використання jQuery плагінів. Загальний принцип підключення скриптів.
    2. Підключення jQuery галереї
  9. Шрифти
    1. Сімейства шрифтів: стандартні та нестандартні.
    2. Відмінності між шрифтами в різних операційних: Windows, OS X, Linux.
    3. Використання @ font-face, Google Font. Плюси і мінуси.
  10. Розміщення HTML сторінок на сервері
    1. Протокол FTP/SFTP.
    2. Налаштування FTP клієнта. Слінковка сторінок і вивантаження файлів на сервер
  11. Адаптування сторінок під різні екрани (Responsive кодування)
    1. Інструменти для верстки під мобільні пристрої. Адаптування сторінки під різні пристрої за допомогою медіа-запитів
    2. Для чого застосовуються CSS-фреймворки і їх використання для адаптації сторінки під різні пристрої. Вимоги до макетів.
    3. Огляд CSS-фреймворків: Bootstrap, Grid 960, Grid 1140, Skeleton
    4. Особливості відображення елементів і поведінки для Android / iOS
  12. Використання Bootstrap
    1. Підключення бібліотек і особливості сітки
    2. Використання компонентів і JavaScript
  13. Портфоліо
    1. Для чого необхідно портфоліо
    2. Як створити портфоліо