Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.
Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.
Відео запис курсу. На цьому курсі ви навчитеся робити справжні проєкти, такі ж за рівнем складності, як в індустрії. І будете робити їх правильно, щоб після навчання видавати результат високого рівня, за який компанії готові платити.
— Актуальные стандарты качества: не нужно переучиваться после курса.
— Понимание полного цикла работы верстальщика.
— Фундаментальные и структурированные знания необходимых технологий.
— Опыт работы с дедлайнами и планирования работы.
Зміст
1. Вступ (Теоретична лекція). Системи контролю версій.
Навіщо потрібні системи контролю версій.
— Обзор возможностей и работа с Гитом.
— Работа с ветками: создание, синхронизация, слияние.
— Конфликты и их разрешение.
— Обзор Гитхаба.
— Рабочий процесс на интенсиве.
— Зависимость заданий.
— Настройки личных проектов.
— Создание мастер-репозитория.
— Структура личных проектов.
2. Методології верстки (Теоретична лекція). Прийоми створення надійної верстки.
Навіщо потрібні методології.
— Порядок в коде.
— Работа в команде.
— Недостатки технологий.
Огляд підходів до верстки.
— Классический подход.
— Независимые блоки.
— Атомарный подход.
— Компоненты и модули.
Методологія БЕМ.
— Зачем всё так усложнять.
— Как разбить интерфейс на блоки.
— Элементы и модификаторы.
— Ошибки и узкие места.
Розбір навчального проєкту з БЕМу.
3. Препроцесори й автоматизація (Практична лекція). Поглянемо на препроцесори та розберемося, чим вони допомагають у процесі верстки.
Стилі на стероїдах.
— Обзор препроцессоров.
— Фантазийный CSS.
— Новые возможности CSS.
Основні можливості.
— Сравнение Less и Sass.
— Переменные и математика.
— Вложенные селекторы.
— Операции с цветами.
Додаткові можливості.
— Подключение файлов.
— Примеси и расширения.
— Организация кода.
— Сборка стилей.
Налаштування оточення.
— Система сборки на Node.js.
— Сборщики Gulp и Grunt.
— Автоматизация сборки и вотчеры.
4 Адаптивні сітки (Практична лекція). Дізнаємося як створювати адаптивні сітки з використанням флексбоксів.
Створення сіток на флексбоксах.
— Введение во флексбокс.
— Флекс-контейнер, флекс-элементы, флекс-оси.
— Алгоритм расчёта размеров флекс-элементов.
— Выравнивание и распределение флекс-элементов вдоль осей.
— Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
— Особенности флексов при создании сеток.
Адаптивні сітки.
— Принципы «перестройки сетки».
— Медиавыражения, макро- и микробрейкпоинты.
— Организация кода разных версий страницы: мобильной, планшетной и десктопной.
— «Проблема двух вьюпортов» на мобильных.
— Настройка вьюпорта.
Створюємо адаптивні сітки БЕМ-блоків навчального проєкту за допомогою флексбоксів.
5. Адаптивні декоративні елементи (Практична лекція). Розбираємося з адаптивними декоративними елементами. Робимо адаптивну верстку з гумовими сітками.
Завершуємо адаптивну верстку БЕМ-блоків навчального проєкту.
— Переход от фиксированных сеток к резиновым. Тонкости флексбокса.
— Отличие «резины» от «фикса».
— Переход от пикселей к процентам.
— Резиновые колонки с точными размерами на флексбоксе.
— flex-grow для создания «неточных» резиновых колонок.
— Флекс-контейнер внутри флекс-контейнера и резиновые по высоте элементы.
— Когда использовать резиновые сетки и насколько они дороже фиксированных.
Робимо гумово-адаптивну верстку БЕМ-блоків навчального проєкту.
6. Адаптивна графіка (Теоретична лекція). Занурюємося в адаптивну та ретинову графіку. Розбираємося з форматами та їхнім призначенням.
Графіка для екранів підвищеної чіткості.
— В чём разница между физическими и логическими пикселями.
— Что такое «ретиновая» графика.
— Приёмы ретинизации содержимого веб-страницы.
Адаптивна графіка.
— Тег на все случаи жизни —
Ретинізуємо та додаємо адаптивну графіку в навчальному проєкті.
7. Векторна графіка та оптимізація (Теоретична лекція). Навчимося використовувати векторну графіку всіма можливими способами. Розберемося, як використовувати графіку оптимально.
Використання SVG.
— Плюсы и минусы векторной графики.
— Подключение SVG внешним ресурсом.
— Встраивание SVG.
SVG-спрайти.
— Зачем нужны, в каких случаях полезны.
— Варианты реализации.
Стилізація SVG.
— Что можно, а что нельзя.
— Анимация.
— Адаптивность.
Оптимізація та доступність SVG.
— Особенности экспорта из Illustrator и Sketch.
— Дожимаем и оптимизируем SVG.
— Доступность.
Оптимізація растрової графіки.
— Сжатие lossless и с потерей качества.
— Обзор формата webp и особенностей его применения
8. Занурення в автоматизацію (Практична лекція). Підготуємо збірку проєкту для його публікації.
Вирішимо для себе, що краще для автоматизації Gulp чи Grunt.
Оптимізація.
— Минификация CSS-кода.
— Оптимизация изображений.
— Сборка и минификация SVG-спрайта.
Як тримати код для розробника зручним, а для браузерів - швидким.
9. Продуктивність верстки (Теоретична лекція).Розберемося з продуктивністю верстки і спробуємо оптимізувати "вузькі місця".
Як підключати зовнішні шрифти найкраще.
— Отличается ли быстродействие сайта на десктопе от мобильного.
— Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
— Что нужно знать о перерисовке и перекомпоновке страниц.
10. Як не загубитися на ринку праці. Працевлаштування, пошук замовлень, оцінка роботи
Яка взагалі буває робота?
— В офисе
— На фрилансе
Пошук роботи
Як оцінювати себе і проходити співбесіди
З чим їдять гріди (бонусна лекція з 13 потоку)
— Введение в гриды.
— Вёртска Барбешопа.
11. Фінал. Підсумки інтенсиву.
Відгуки
Відгуків немає, поки що.