Придбаний [HTML Academy] HTML і CSS. Професійна верстка сайтів, 7-8 листопада 2020

[Gadzhi]

​

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

Під час курсу ви будете працювати як справжні верстальники: попрацюєте з системою контролю версій в GitHub Desktop і з графічним макетом в редакторі Figma, створите виразну і доступну розмітку, побудуєте сітки сторінок на грідах, попрацюєте з кастомними властивостями, анімацією, ретинової графікою, оптимізуєте код і підготуєте завершений проект до публікації. На кожному етапі вашу роботу буде перевіряти і коментувати особистий наставник.

програма курсу
Тиждень 1
Розділ 1
Старт
Вступна лекція
Познайомимося з учасниками і процесом на курсі, розглянемо пристрій Інтернету і ваше місце в професії, підготуємо інструменти для роботи.

як проходить курс.

• огляд особистих проектів.
• технічне завдання та критерії якості.
• структура курсу.
• автори, куратори, наставники.
• Робота з наставником.
• захист особистого проекту.

хто і як робить сайти.

• З чого складається сайт в Інтернеті: сервер, браузер, верстка.
• хто робить сайти: дизайн, верстка, бекенд.
• відповідальність верстальника: зручність, доступність, перфоманс.

Інструменти та процес.

• редактори та інспектори графіки: Figma, Photoshop.
• редактори коду, браузери, налагоджувачі.
• Система контролю версій.
• Процес роботи над проектом.

Спойлер: "інформація"

Розділ 2
Вступ до HTML
Основи семантичної розмітки
Проаналізуємо макет перед версткою, дізнаємося синтаксис HTML і базову структуру сторінки, подивимося як працює специфікація і розберемо складні випадки розмітки.

створення сторінок по макету.

• аналіз макета.
• Структура проекту.

Синтаксис HTML

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

базова структура сторінки.

• метадані та підключення ресурсів.
• Контент сторінки.
• Теги для виведення і підключення.

Семантика та специфікації.

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

неочевидні складності розмітки.

• альтернативні засоби перегляду.
• Пошуковики, скрінрідери, режими читання.
• візуальне проти смислового.

другий тиждень
РОЗДІЛ 3
Вступ до CSS
Основи сучасних стилів
Розділимо макет на блоки, створимо структуру стилів, зануримося в основи CSS, попрацюємо з типографікою і підключимо шрифти.

пристрій і логічні частини макета.

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

файли та структура для блоків.

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

занурення в стилі для блоків.

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

успадкування, каскад, специфічність

• Які властивості успадковуються, які ні.
• чим font-size відрізняється від background-color.
• каскадування та специфічність.

розміри та центрування макета.

• вимірювання блоків у Figma.
• центрування макета за допомогою Значення auto.

шрифти.

• використання системних шрифтів.
• підключення шрифтів проекту.
• Використання та налаштування Google Fonts.
• використання шрифтів у стилях.

Розділ 4
Редактори та інспектори графіки
Інструменти та формати графіки
Подивимося, які є редактори та інспектори графіки, вивчимо інтерфейс Figma, розберемося в форматах графіки, навчимося вибирати правильні, експортувати і оптимізувати.

відмінності редактора від інспектора.

• огляд редакторів: Photoshop, Illustrator, Sketch, Figma.
• огляд інспекторів: Zeplin, Avocode.
• вибір відповідного інструменту.

інтерфейс Figma і робота з макетом.

• сторінки, фрейми, шари, інспектор.
• параметри блоків: прозорість, фон, тіні, координати.
• параметри тексту: сімейство, накреслення, розмір.

формати графіки і принцип вибору.

• Растрова, векторна та генерована графіка.
• формати GIF, JPEG, PNG, WebP і SVG.
• вибір формату по деталізації зображення.
• налаштування експорту графіки з Figma.

оптимізація графіки після експорту.

• Установка Squoosh і SVGOMG на десктоп.
• оптимальні налаштування Squoosh і SVGOMG.
• Пакетна оптимізація графіки.

файлова структура і вказівка шляхів.

• Структура папок для зберігання графіки.
• шляхи до ресурсів на прикладі графіки.

третій тиждень
Розділ 5
Сітки і розкладки
Введення в модульні сіткипонеділок з 19:00 до 21:00лектор: Вадим Макєєв

Навчимося розуміти систему сіток і розкладку блоків, розглянемо принципи роботи Grid Layout і Flexible Boxes, навчимося передбачати переповнення сітки і розберемося в блокової моделі.

модульна система і сітки.

• напрямні, колонки, рядки і відступи.
• сітка як основа, але не суворе правило.

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

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

Специфікація Flexible Boxes і розкладка всередині блоків.

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

переповнення сіток.

• відступи при малій кількості блоків.
• багаторядкові списки блоків.
• кінцеві блоки: гума, вирівнювання.

Блокова модель.

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

Розділ 6
Декоративні та контентні елементи
Візуальне відображення елементів сторінки

Поговоримо про те, якими правилами оперує дизайн при побудові макетів. Розглянемо стану і позиціонування елементів на сторінці. Зробимо інтерфейс стійким до переповнення.

До онтентна і оформлювальна графіка в Інтернеті.

• відмінності контентної та оформлювальної графіки.
• Вставка оформлювальної в стилі і розмітку.
• програмована графіка, відповідне використання.

Візуальні правила та типографіка.

• теорія близькості та оптична компенсація.
• типографіка та характеристики тексту.

інтерактивність інтерфейсу.

• стани та події елементів інтерфейсу.
• переходи, анімація, плавність інтерфейсу.

Розкладка контенту: мультиколонки і флоати.

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

переповнення контенту.

• зміна числа елементів у списках.
• Вставка картинок і відео.
• довгі та короткі слова, багаторядковість та перенесення

Четвертий тиждень
Розділ 7
Доступність
Основи доступності інтерфейсів
Поговоримо про доступність, розглянемо можливості поліпшення зручності інтерфейсів. Попрацюємо з інструментами перевірки і налагодження доступності.

ситуації з незручним інтерфейсом, введення в доступність.

• неконтрастні кольори, підкладки для тексту.
• Універсальний доступ, умови та фізіологія.
• альтернативні засоби: пошуковики, режими читання, скрінрідери.

доступність вбудованих в HTML елементів.

• вбудовані інтерактивні елементи.
• орієнтири і навігація в скрінрідерах.

способи взаємодії з інтерфейсом.

• Миша і ховер.
• клавіатура та фокус.
• клавіатура і голос.

популярні патерни інтерфейсу.

• кнопки-посилання.
• Радіокнопки, чекбокси, селект.
• випадаючі меню, спойлери.
• каруселі, таби, модалки.

підписи до інтерактивних і контентних елементів.

• Заголовки областей контенту.
• підписи до контентних елементів: картинки, відео, фрейми.
• доступна инлайновая вставка SVG.
• форми та підписи до полів.
• додавання підписів в складних випадках: заголовки, іконки.

інструменти перевірки та налагодження доступності.

• Дерево доступності в браузерних налагоджувачах.
• розширення для перевірки доступності: aXe, Siteimprove.
• огляд скрінрідерів: VoiceOver, NVDA, JAWS.

П'ятий тиждень
Розділ 8
JavaScript у верстці
Основи JavaScrpipt
Поговоримо про те, де застосовується JavaScript, чим відрізняється DOM і HTML-дерево. Підключимо і налаштуємо JavaScript-компоненти.

скрипти в веб-інтерфейсах.

• вбудовані в браузер віджети.
• стану інтерфейсу, навіщо потрібен JavaScript.
• погана інтерактивність на чистому CSS.
• приклади роботи скриптів в інтерфейсах.
• Сучасна архітектура, SPA.
  https://privatelink.de/?https://htmlacademy.ru/intensive/htmlcss