ви отримаєте: професійний навик - "побудова сіток на флексах по макету"
- поглиблена теорія, загальний обсяг 60 сторінок
- 10 кейсів: 4 легкого, 3 середнього і 3 складного рівня
- еталонні рішення кейсів, в тому числі детальні розбори демонстраційних кейсів
- підготовчий матеріал. Доповнює базові знання, отримані в інтерактивних курсах, всім необхідним для початку відпрацювання кейсів. Поглиблена теорія. 6 розділів поглибленої теорії загальним обсягом 39 сторінок. Включає наступну інформацію:
- Алгоритм розрахунку розмірів флекс-елементів і розподілу цих елементів всередині однорядкових і багаторядкових флекс-контейнерах, вкладені флекси.
- Властивість display і управління потоком документа.
- Використання властивості flex-grow для створення "адаптивності від контейнера".
- Інструкція побудови сіток на флексах по макету. Методика семантичної розмітки, загальним обсягом 21 сторінка. Включає покроковий алгоритм створення сітки за принципом" від великих блоків до дрібних " і докладний опис кожного кроку з прикладами макетів, рекомендаціями по розмітці і прикладами коду.
- демонстраційні кейси. Чотири демонстраційних кейса: 2 легкого рівня, 1 середнього рівня і 1 складного рівня. Показують як застосовувати описану вище інструкцію для створення сітки реальних проектів. У кожному кейсі в якості вхідних даних ми отримуємо дизайн і розмітку сторінок. Потім, використовуючи запропоновану методику, покроково створюємо сітку. На виході отримуємо готову розмітку з базовим оформленням і сіткою. Всі кроки детально описані.
- Інтерактивні покрокові розбори кейсів. Один або кілька розборів для кожного демо-кейса. Розбори кейсів виконані у вигляді спеціальних інтерактивних демонстрацій. У них ви бачите кожну зміну коду, результат його роботи і пояснення до цієї зміни. Для кейсів ми підготували спеціальне оформлення, яке "підсвічує" важливі частини сітки.
- тренувальний матеріал. Кейси зі зростаючою складністю і еталонними рішеннями, на яких ви і тренуєте навик. Шість тренувальних кейсів, по два для кожного рівня складності. В якості вхідних даних Ви отримуєте дизайни сторінок, на виході повинна вийти розмітка з базовою стилізацією і сіткою. Для тренувальних кейсів немає докладних розборів, але є еталонне рішення від авторів, яке можна порівняти зі своїм.
навіщо потрібен цей навик
Грамотно побудована сітка не просто вибудовує елементи як на макеті, але і робить зверстану сторінку "куленепробивною": всі елементи будуть вести себе передбачувано, не розсиплються при зміні контенту і не зажадають постійних доопрацювань через поломки в непередбачуваному місці. Флексбокс-універсальний інструмент для побудови стійких сіток. Він працює у всіх сучасних браузерах і гнучко налаштовується в коді.
Професійне завдання
Спираючись на графічний макет, потрібно побудувати сітку великих блоків сторінки з використанням флексбокса. Сітка повинна бути спроектована з урахуванням різних варіантів переповнення (переповнення контентом, зміни кількості колонок) і повинна візуально відповідати макету.
Грамотно побудована сітка не просто вибудовує елементи як на макеті, але і робить зверстану сторінку "куленепробивною": всі елементи будуть вести себе передбачувано, не розсиплються при зміні контенту і не зажадають постійних доопрацювань через поломки в непередбачуваному місці. Флексбокс-універсальний інструмент для побудови стійких сіток. Він працює у всіх сучасних браузерах і гнучко налаштовується в коді.
Професійне завдання
Спираючись на графічний макет, потрібно побудувати сітку великих блоків сторінки з використанням флексбокса. Сітка повинна бути спроектована з урахуванням різних варіантів переповнення (переповнення контентом, зміни кількості колонок) і повинна візуально відповідати макету.
https://privatelink.de/?https://htmlacademy.ru/skills/flex-layout/payment