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

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

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

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

Зміст

1. Вступ (Теоретична лекція). Системи контролю версій.

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

2. Методології верстки (Теоретична лекція). Прийоми створення надійної верстки.

Навіщо потрібні методології.
– Порядок у коді.
– Робота в команді.
– Недоліки технологій.

Огляд підходів до верстки.
– Класичний підхід.
– Незалежні блоки.
– Атомарний підхід.
– Компоненти та модулі.

Методологія БЕМ.
– Навіщо все так ускладнювати.
– Як розбити інтерфейс на блоки.
– Елементи та модифікатори.
– Помилки та вузькі місця.

Розбір навчального проєкту з БЕМу.

3. Препроцесори й автоматизація (Практична лекція). Поглянемо на препроцесори та розберемося, чим вони допомагають у процесі верстки.

Стилі на стероїдах.
– Огляд препроцесорів.
– Фантазійний CSS.
– Нові можливості CSS.

Основні можливості.
– Порівняння Less і Sass.
– Змінні та математика.
– Вкладені селектори.
– Операції з кольорами.

Додаткові можливості.
– Підключення файлів.
– Домішки та розширення.
– Організація коду.
– Збірка стилів.

Налаштування оточення.
– Система збирання на Node.js.
– Збирачі Gulp і Grunt.
– Автоматизація збирання і вотчери.

4 Адаптивні сітки (Практична лекція). Дізнаємося як створювати адаптивні сітки з використанням флексбоксів.

Створення сіток на флексбоксах.
– Введення у флексбокс.
– Флекс-контейнер, флекс-елементи, флекс-осі.
– Алгоритм розрахунку розмірів флекс-елементів.
– Вирівнювання і розподіл флекс-елементів уздовж осей.
– Однорядковий і багаторядковий флекс-контейнер, управління флекс-рядами.
– Особливості флексів при створенні сіток.

Адаптивні сітки.
– Принципи “перебудови сітки”.
– Медіавирази, макро- і мікробрейкпоінти.
– Організація коду різних версій сторінки: мобільної, планшетної та десктопної.
– “Проблема двох в’юпортів” на мобільних.
– Налаштування в’юпорта.

Створюємо адаптивні сітки БЕМ-блоків навчального проєкту за допомогою флексбоксів.

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

Завершуємо адаптивну верстку БЕМ-блоків навчального проєкту.

– Перехід від фіксованих сіток до гумових. Тонкощі флексбоксу.
– Відмінність “гуми” від “фікса”.
– Перехід від пікселів до відсотків.
– Гумові колонки з точними розмірами на флексбокс.
– flex-grow для створення “неточних” гумових колонок.
– Флекс-контейнер усередині флекс-контейнера і гумові за висотою елементи.
– Коли використовувати гумові сітки та наскільки вони дорожчі за фіксовані.

Робимо гумово-адаптивну верстку БЕМ-блоків навчального проєкту.

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

Графіка для екранів підвищеної чіткості.
– У чому різниця між фізичними та логічними пікселями.
– Що таке “ретинова” графіка.
– Прийоми ретинізації вмісту веб-сторінки.

Адаптивна графіка.
– Тег на всі випадки життя – … – Ретинізація тематичних зображень за допомогою атрибута srcset. – Обрізання зображень за допомогою. –Використання сучасних форматів графіки за допомогою. – Зображення невизначених розмірів і .

Ретинізуємо та додаємо адаптивну графіку в навчальному проєкті.

7. Векторна графіка та оптимізація (Теоретична лекція). Навчимося використовувати векторну графіку всіма можливими способами. Розберемося, як використовувати графіку оптимально.

Використання SVG.
– Плюси і мінуси векторної графіки.
– Підключення SVG зовнішнім ресурсом.
– Вбудовування SVG.

SVG-спрайти.
– Навіщо потрібні, в яких випадках корисні.
– Варіанти реалізації.

Стилізація SVG.
– Що можна, а що не можна.
– Анімація.
– Адаптивність.

Оптимізація та доступність SVG.
– Особливості експорту з Illustrator і Sketch.
– Дотискаємо та оптимізуємо SVG.
– Доступність.

Оптимізація растрової графіки.
– Стиснення lossless і з втратою якості.
– Огляд формату webp і особливостей його застосування.

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

Вирішимо для себе, що краще для автоматизації Gulp чи Grunt.

Оптимізація.
– Мініфікація CSS-коду.
– Оптимізація зображень.
– Збірка та мініфікація SVG-спрайту.

Як тримати код для розробника зручним, а для браузерів – швидким.

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

Як підключати зовнішні шрифти найкраще.
– Чи відрізняється швидкодія сайту на десктопі від мобільного.
– Що потрібно знати, коли користуєшся CSS-анімацією і плавними переходами.
– Що потрібно знати про перемальовування і перекомпонування сторінок.

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

Яка взагалі буває робота?
– В офісі
– На фрілансі – На фрілансі

Пошук роботи

Як оцінювати себе і проходити співбесіди

З чим їдять гріди (бонусна лекція з 13 потоку)

– Вступ до грідів.
– Вертська Барбешопа.

11. Фінал. Підсумки інтенсиву.