HTML і CSS Професійний курс частина 1

Відео запис курсу. На цьому курсі ви навчитеся робити справжні проєкти, такі ж за рівнем складності, як в індустрії. І робитимете їх правильно, щоб після навчання видавати результат високого рівня, за який компанії готові платити.

– Актуальні стандарти якості: не потрібно перенавчатися після курсу.
– Розуміння повного циклу роботи верстальника.
– Фундаментальні та структуровані знання необхідних технологій.
– Досвід роботи з дедлайнами та планування роботи.

Зміст

1. Вступ (Теоретична лекція)Вступна лекція про роль і місце верстальника у світі веб-технологій.

– Що насправді відбувається, коли ви вводите в браузері адресу сайту і натискаєте Enter?
– IP-адреса, сервер і веб-сервер, “віртуальні хости”.
– Доменні імена, URL-адреси та система DNS.
– Завантаження та “збірка” веб-сторінки.
– Особливості HTTP і HTTPS. Протоколи HTTP/1.1 і HTTP/2.
– Прийоми оптимізації веб-сторінок.
– Інструменти веб-розробника та робочий процес на інтенсиві.
– Системи контролю версій.
– Інструменти верстки: редактори коду, інспектори, корисні веб-сервіси.
– Трохи про браузери, браузерні рушії та відмінності між ними.

2. Розмітка (Теоретична лекція). Створимо логічну HTML-розмітку сторінок навчального та особистого проєктів. Попрактикуємося використовувати відповідні теги, задавати імена класів, оцінювати складність розмітки.

– Введення в HTML.
– Синтаксис HTML, типи HTML-тегів.
– Структура найпростішого HTML-документа.
– Як працювати зі специфікацією HTML.
– Огляд HTML-тегів з особистих проєктів.
– Якісна розмітка та стилі кодування.
– Проста, зрозуміла, читабельна та логічна розмітка: приклади й антиприклади.
– Типові помилки розмітки: “посилання або кнопка”, “картинка або тло” тощо.
– Модульність розмітки або використання “просторів імен”.
– Коли використовувати <article>, <section> і <div>?

– Кодгайди для розмітки.
– Алгоритми створення розмітки: “сторінка як документ”, “сторінка як додаток”, “дів’янка” – Створюємо розмітку головної сторінки навчального проєкту.

3.Фотошоп для верстальника (Практична лекція). Розберемо все необхідне для роботи верстальника у Фотошопі. Підготуємо графіку для проєктів.

– Типові завдання верстальника у Фотошопі.
– Налаштування інтерфейсу Фотошопа.
– Робота з шарами, типи шарів.
– Отримання параметрів тексту.
– Вимірювання розмірів блоків, відступів, отримання інформації про колір.
– Отримання параметрів складних декоративних ефектів: тіні та інше.
– Експорт графіки, робота з повторюваними патернами.
– Огляд форматів графіки в інтернеті.
– Растрова графіка – PNG, JPEG, GIF.
– Векторна графіка – SVG.
– Як вибрати відповідний формат?
– Оптимізація графіки.

Огляд альтернатив.

– Adobe Extract.
– Zeplin.
– Avocode.
– Sketch.
– Figma.

Розбір графічних макетів проєктів.

4. Доступність (Практична лекція). Навчимося робити інтерфейси зручні та доступні для всіх. Керування фокусом, важливість семантики, тестування і скрінрідери.

– Інтерфейси – не картинки.
– Які є шари інтерфейсу, крім графіки.
– Навіщо потрібні інтерактивні елементи.
– Неочевидне використання інтерфейсів.
– Поняття доступності.
– Що заважає користуватися інтерфейсами.
– Щоденні ситуації недоступності.
– Фізіологічні та ментальні особливості.
– Взаємодія з клавіатури.
– Інтерфейси без покажчика.
– Навіщо потрібен фокус на елементах.
– Як зробити елементи інтерактивними.
– Значущі елементи.
– Навіщо семантика і як не підхопити диватоз.
Чому не потрібно переробляти елементи.
– Кнопки і посилання, у чому різниця?
– Лейбли елементів.
– Кому потрібні описи елементів.
– Розбір помилок у реальних інтерфейсах.
– Інспектори доступності та скрінрідери.

5. Вступ до CSS (Практична лекція). Розберемося з базовими механізмами CSS і почнемо стилізацію проєктів.

– Вступ до CSS.
– Синтаксис CSS.
– CSS-селектори, псевдокласи та псевдоелементи.
– Спадкоємність, каскадність і пріоритети в CSS.
– Одиниці виміру в CSS: абсолютні, відносні, для управління кольором.
– CSS-функції та директиви.
– Практика стилізації.
– Навіщо потрібна нормалізація.
– Простори імен і незалежні компоненти.
– Стилі кодування для CSS.
– Робота з нестандартними шрифтами.
– Стилізація станів інтерактивних елементів.
– Починаємо стилізацію головної сторінки навчального проєкту.
– Задаємо глобальні стилі документа, описуємо текстові параметри елементів і стани інтерактивних елементів.

6. Сітки (Теоретична лекція). Розберемося з блоковою моделлю документа. Створимо сітки сторінок навчального та особистого проєктів.

– Потік документа та блокова модель документа.
– Поняття сітки та потоку документа.
– Блокові та рядкові елементи та їхні особливості.
– Властивості блокової моделі: розміри, рамки та відступи.
– Тонкощі блокової моделі: “схлопування” та “випадання” зовнішніх відступів, width: 100% та width: auto, властивість box-sizing та інші.
– Властивість display. Управління типом елементів.
– Створення сіток на флексбоксах.
– Введення у флексбокс.
– Флекс-контейнер, флекс-елементи, флекс-осі.
– Алгоритм розрахунку розмірів флекс-елементів.
– Вирівнювання і розподіл флекс-елементів уздовж осей.
– Однорядковий і багаторядковий флекс-контейнер, управління флекс-рядами.
– Особливості флексів при створенні сіток.
– Створюємо сітку головної сторінки навчального проекту.

7. Декоративні елементи (Практична лекція). Познайомимося з прийомами створення декоративних елементів. Завершимо верстку головних сторінок навчального й особистого проєктів.

– Позиціонування.
– Відносне позиціонування.
– Абсолютне позиціонування: координати, зміна точки початку координат, відносні координати та розміри, координати за замовчуванням.
– Фіксоване позиціонування.
– Керування порядком шарів.
– Прийоми створення елементів інтерфейсу.
– Блочно-рядкові елементи та їхні особливості.
– Боротьба з пробілами між блочно-рядковими елементами.
– Особливості флексів при створенні елементів інтерфейсів.
– Типовий прийом “псевдоелемент з абсолютним позиціюванням”.
– Використання CSS-графіки для створення декоративних елементів.
– Завершуємо верстку головної сторінки навчального проекту.

8. Оформлення контенту (Практична лекція). Завершимо верстку внутрішніх сторінок і підготуємо проєкти до публікації. Почнемо готуватися до захисту особистого проєкту.

– Практикуємося у верстці елементів вмісту.
– Зверстаємо текстову сторінку навчального проекту. Підготуємо універсальні стилі змісту, які добре працюватимуть під час наповнення сторінки з CMS.
– Зверстаємо спливаючі вікна з формою входу та інтерактивною картою. Розберемо прийоми стилізації нестандартних елементів форм.
– Підготуємо зверстаний навчальний макет до публікації або передання замовнику.
– Розбираємо типові випадки переповнення і способи боротьби з ними.
– Готуємо проєкт до захисту. Докладний розбір критеріїв захисту випускних проєктів.

9. Вступ до JavaScript (Практична лекція). Познайомимося з JavaScript, дізнаємося що таке Vanilla JS і оживимо деякі блоки верстки.

– Мова програмування JavaScript.
– Роль програмування в житті верстальника.
– Що таке DOM і навіщо нам об’єкт document.
– Навіщо потрібен об’єкт window.
– Типові випадки використання JavaScript.
– Як знайти будь-який елемент на сторінці.
– Як реагувати на події, що відбуваються на сторінці.
– Як змінювати CSS-стилі в елементів.
– Як використовувати анімацію на сторінці.
– Пожвавлюємо спливаюче вікно і вставляємо інтерактивну мапу на головній сторінці навчального проекту.

10. Найкращі практики (Теоретична лекція). Дізнаємося як правильно застосовувати практичні знання, як вчитися новому і розвиватися в професії.

– Сумісна верстка.
– Прогресивне поліпшення.
– Поступова деградація.
– Ціна сумісності.
– Незалежні шари поліпшення.
– Реальне тестування.
– Різноманіття браузерів і пристроїв.
– Інспектори, емулятори, віртуальні машини.
– Слабкі пристрої та повільні мережі.
– Мініфікація, стиснення, оптимізація.
– Емпатія, пріоритети, спочатку контент.
– Кореневі технології.
– Веб-стандарти і фантазійні велосипеди.
– Ваніль проти бібліотек і фреймворків.
– Мода, хайп, вічне і світле.
– Розвиток у професії.
– Як не втратити актуальність знань.
– Обмін знаннями, події, виступи.
– Прикордонні дисципліни.

11. Як не загубитися на ринку праці. Працевлаштування, пошук замовлень, оцінка роботи

– Яка взагалі буває робота?
– В офісі
– На фрілансі
– Пошук роботи
– Як оцінювати себе і проходити співбесіди