Кодування HTML5 / CSS3

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

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

Консультування з питань, які виникають у процесі кодування – помилки та застосування властивостей елементів.

Також можливе навчання з нуля за програмою.

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

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

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 оптимізації
5. Порядок нарізки макета
   1. Робота з шарами в Photoshop, Figma.
   2. Визначення основного блоку.
   3. Візуальне розбиття сторінки на основні та другорядні елементи. Стандартне найменування блоків.
   4. Використання внутрішніх та зовнішніх відступів – margin / padding. У чому відмінності. Центрування блоку по горизонталі
   5. Використання float при розташуванні колонок на сторінці. Розташування блоків за допомогою table, table-row, table-cell
   6. Використання Flex
   7. Форматування тексту. Скорочена і повна запис.
   8. Застосування списків для навігаційного меню. Меню, що випадає на css
   9. Абсолютна і відносне позиціонування. Для чого іспольузется. Що таке 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. Використання Less, Sass
14. Портфоліо
    1. Для чого необхідно портфоліо
    2. Як створити портфоліо