Набір учасників [HTML Academy] JavaScript. Професійна розробка веб-інтерфейсів. Стандартний. Вересень 2021

[Gadzhi]

Переглянути вкладення 24792
​

Курс розроблений для тих, хто хоче змінити професію і стати високооплачуваним професіоналом. Він підійде для працюючих людей, у яких мало часу.

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


Розділ 1
введення
Як проходить курс. Організаційні питання.

• огляд особистих проектів.
• Як працювати з наставником.
• критерії якості верстки.
• захист особистого проекту та отримання сертифіката.

робочий процес на інтенсиві.

• залежність завдань.
• Налаштування особистих проектів.
• Створення майстер-репозиторію.
• структура особистих проектів.

Розділ 2
методології верстки

Навіщо потрібні методології.

• Порядок в коді.
• Робота в команді.
• недоліки технологій.

огляд підходів до верстки.

• класичний підхід.
• незалежні блоки.
• атомарний підхід.
• компоненти та модулі.

методологія БЕМ.

• навіщо все так ускладнювати.
• Як розбити інтерфейс на блоки.
• елементи і модифікатори.
• помилки і вузькі місця.

розбір навчального проекту по Бему.

Другий тиждень
РОЗДІЛ 3
Препроцесори та автоматизація

стилі на стероїдах.

• огляд препроцесорів.
• нові можливості CSS.
• порівняння можливостей.

основні можливості.

• порівняння Less і Sass.
• змінні і математика.
• вкладені селектори.
• операції з квітами.

додаткові можливості.

• підключення файлів.
• домішки і розширення.
• організація коду.
• збірка стилів.

Налаштування оточення.

• система збірки на Node.js.
• Збирач gulp.
• Автоматизація збірки і вотчери.

Розділ 4
адаптивні сітки

Специфікація Grid Layout і розкладка по сітці макета.

• пристрій шаблонів: рядки, колонки, лінії, відступи.
• Ручна і автоматична розкладка.
• Специфікація Box Alignment і вирівнювання всередині сітки.
• Гриди для адаптивних макетів.

Специфікація Flexible Boxes і розкладка по сітці макета.

• введення у флекси.
• Контейнер, елементи, осі.
• Алгоритм розрахунку розмірів елементів.
• вирівнювання і розподіл елементів уздовж осей.
• однорядковий і багаторядковий контейнер, управління рядами.
• особливості флексів при створенні сіток.

адаптивні сітки.

• Принципи перестроювання сітки.
• Медіавираження та брейкпоінти.
• організація коду різних версій сторінки: мобільної, планшетної і десктопної.
• Проблема двох в'юпортів на мобільних.
• Налаштування в'юпорта.

Підручник

Навички побудови сіток на грідах і флексах.

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

Третій тиждень
Розділ 5

Розбираємося з адаптивними декоративними елементами. Робимо адаптивну верстку з гумовими сітками.

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

перехід від фіксованих сіток до гумових. Тонкощі флексів.

• відмінність "гуми"від " Фікса".
• перехід від пікселів до відсотків.
• гумові колонки з точними розмірами на флексах.
• неточні гумові колонки за допомогою flex-grow.
• Флекс всередині флексу і елементи з гумовою висотою.
• коли використовувати гумові сітки і наскільки вони складніше.

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

Четвертий тиждень
Розділ 6
Адаптивна графіка

графіка для екранів підвищеної чіткості.

• У чому різниця між фізичними та логічними пікселями.
• Що таке" ретинова " графіка.
• прийоми ретинізації вмісту веб-сторінки.

Адаптивна графіка.

• Тег на всі випадки життя- <picture & gt;.
• Ретинізація контентних зображень за допомогою атрибута srcset.
• кадрування зображень за допомогою≪ source & gt;.
• Використання сучасних форматів графіки за допомогою≪ source & gt;.
• зображення невизначених розмірів і sizes.
  Ретинізуємо і додаємо адаптивну графіку в навчальному проекті.
  
  П'ятий тиждень
  Розділ 7
  Векторна графіка та оптимізація
  
  Навчимося використовувати векторну графіку всіма можливими способами. Розберемося, як використовувати графіку оптимально.
  
  використання SVG.
  
  • плюси і мінуси векторної графіки.
  • підключення SVG зовнішнім ресурсом.
  • вбудовування SVG.
  SVG-спрайти.
  • навіщо потрібні, в яких випадках корисні.
  • варіанти реалізації.
  стилізація SVG.
  • що можна, а що не можна.
  • Анімація.
  • адаптивність.
  оптимізація та доступність SVG.
  • особливості експорту з Figma.
  • Дотискаємо і оптимізуємо SVG.
  • доступність.
  оптимізація растрової графіки.
  • стиснення з втратами і без.
  • огляд можливостей оптимізатора Squoosh.
  • огляд формату WebP і особливостей його застосування.
  Розділ 8
  занурення в автоматизацію
  
  Оптимізація.
  • Мініфікація CSS-коду.
  • оптимізація зображень.
  • збірка і мініфікація SVG-спрайту.
  як тримати код для розробника зручним, а для браузерів — швидким.
  
  Шостий тиждень
  
  Розділ 9
  продуктивність верстки
  
  Огляд трендів швидкості інтернету.
  • кількість і обсяг ресурсів.
  • різниця між типами ресурсів.
  • метрики завантаження.
  процес завантаження сторінки.
  • області відповідальності між бекендом і фронтендом.
  • пріоритети завантаження.
  • інструменти аналізу.
  • наслідки повільного завантаження.
  оптимізація шрифтів.
  • формати і браузерна підтримка.
  • негативні ефекти при завантаженні.
  • Управління отрисовкой за допомогою font-display.
  Аудит і підказки.
  • аналіз швидкості за допомогою Lighthouse.
  • читання звіту Lighthouse.
  • альтернативні інструменти.
  • підказки щодо завантаження ресурсів.
  https://privatelink.de/?https://htmlacademy.ru/intensive/javascript