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. Як не загубитися на ринку праці. Працевлаштування, пошук замовлень, оцінка роботи

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