курс буде корисний, якщо ви:
- новачки, які бажають почати свій шлях в ІТ і освоїти нову професію
- Фронтенд-розробники, які добре володіють JavaScript і хочуть підтягнути верстку
- Бекенд-розробники, які переходять у фуллстек
- освоїте роботу основних і трендових інструментів верстальника
- практичні навички роботи з макетами, простими анімаціями, тінями і градієнтами, а також навички створення сторінок по техніці Pixel Perfect
- Навчіться керувати шарами документів, стилізувати скролл бар, працювати з паралакс ефектом
- Основу для свого портфоліо
- вміння орієнтуватися у вакансіях на ринку IT
тиждень 1
Модуль: основне навчання
- Як влаштований веб
Розберемося чим відрізняється HTTP від HTTPS. Познайомимося з поняттями доменного імені та URL-адреси, дізнаємося для чого потрібен DNS.
Розберемося зі стандартним воркфлоу, за яким відбувається розробка веб-додатки. Навчимося працювати з макетами в додатках Figma, Zeplin, Avocode і Adobe XD.
Модуль: основне навчання
- Створюємо повноцінну розмітку
Навчимося створювати правильну семантичну розмітку на підставі макета і технічного завдання.
Навчимося оживляти розмітку за допомогою стилів для того, щоб наблизити наш додаток до макету.
Модуль: основне навчання
- Створюємо глобальну сітку для веб-сторінки
Навчимося створювати повноцінний layout для веб-сторінки, розберемо прийоми для створення рядків і колонок.
Навчимося керувати розташуванням елементів всередині компонента.
Модуль: основне навчання
- Просунуті прийоми для поліпшення стилів
Навчимося робити PixelPerfect веб-сторінки, які будуть ідентичними графічним макетам. Перетворимо статичні елементи в динамічні за допомогою CSS-анімацій. Навчимося додавати на сторінку графічні елементи різного типу.
Навчимося додавати динаміку до веб-сторінок за допомогою CSS-анімацій. Розберемося, коли варто використовувати CSS Transition, а коли CSS Keyframes.
Модуль: робота над проектами
- Перший тиждень практики
Підготуємо оточення і приступимо до роботи над персональним проектом.
Модуль: робота над проектами
- Другий тиждень практики
Відправимо проект на код-рев'ю, імплементуємо фідбек від наставника.
Модуль: робота над проектами
- Третій тиждень практики
Відправимо другий проект на код-рев'ю, імплементуємо фідбек від наставника за другим проектом.
Модуль: основне навчання
- Як влаштований веб
Розберемося чим відрізняється HTTP від HTTPS. Познайомимося з поняттями доменного імені та URL-адреси, дізнаємося для чого потрібен DNS.
- організаційні питання
- огляд процесу навчання
- огляд інструментів
- Налаштування оточення
- Налаштування стартової точки
- порівняння популярних редакторів коду
- Налаштування редактора для комфортної роботи
- Налаштування веб-браузера
- процес запиту веб-сторінки
- зовнішні та внутрішні IP-адреси, веб-сервер
- DNS і його роль в Інтернеті
- Домени, піддомени та URL-адреси
- HTTP vs HTTPS
- HTTP/1.1 vs HTTP/2
- життєвий цикл завантаження веб-сторінки
Розберемося зі стандартним воркфлоу, за яким відбувається розробка веб-додатки. Навчимося працювати з макетами в додатках Figma, Zeplin, Avocode і Adobe XD.
- стандартне середовище процесу веб-розробки
- розбір ключових ролей у процесі розробки
- розбір основних термінів які описують процес розробки
- Як виглядає процес розробки веб-програми
- популярні організаційні помилки початківців програмістів
- Робота з графічним редактором
- навіщо верстальнику потрібен графічний редактор коду
- розбір основних інструментів для роботи з макетом в додатках Figma, Adobe XD, Adobe Photoshop
- порівняння Adobe Photoshop та Adobe XD
Модуль: основне навчання
- Створюємо повноцінну розмітку
Навчимося створювати правильну семантичну розмітку на підставі макета і технічного завдання.
- Робота з розміткою
- знайомство зі специфікацією
- Семантика, структура та API HTML-документа
- основні елементи HTML-сторінки
- Синтаксис HTML-тегів
- розбір основних тегів
- відмінність між логічними та фізичними тегами
- яку верстку можна вважати семантичною
- розбір популярних помилок при створенні розмітки сторінки
- HTML-атрибути
- коментарі в HTML
- Робота з навігацією
- Основи роботи з посиланнями
- Безпека посилань при переході на нову сторінку
- абсолютні та відносні шляхи
- Робота з якорями
- Робота з формою
- Тег & Lt; form & gt; і його атрибути
- типи & Lt; input & gt; та їх атрибути
- Radio-кнопки
- Сheckbox-кнопки
- Datalist-список
- Робота зі списками
- Теги & Lt; ul & gt; і & lt;ol & gt;
- основні відмінності і для чого їх застосовувати
- Робота з картинками
- Тег & lt; img & gt; і його атрибути
- Тег & lt;picture & gt;: відмінності і для чого застосовувати
- основне призначення тега & lt;figure & gt;
- Падинг-хак
- Робота з table
- основні теги
- особливості роботи
- Кращі практики по роботі з таблицями
- Робота з iframe
- Основи роботи з iframe
- атрибути тегу
- застосування на практиці
- Робота з quotation elements
- основні теги
- Робота з HTML Media
- відтворення аудіо при завантаженні сайту
- вбудовані можливості відтворення відео
- Робота з HTML Graphics
- З чого складається svg і його атрибути
- приклади використання
Навчимося оживляти розмітку за допомогою стилів для того, щоб наблизити наш додаток до макету.
- Робота зі стилями
- навіщо потрібні стилі
- Синтаксис CSS правил
- Що таке каскад
- способи підключення CSS до веб-документа
- розбір основних селекторів
- фільтри [class^="..."]
- Як порахувати вагу селекторів
- У чому різниця псевдо-класів і псевдо-елементів :before або :before)
- відносні значення
- функції в CSS. Працюємо з calc
- порядок CSS-властивостей
- опис шрифтів
- властивість box-sizing або як порахувати розмір елемента
- стану :link,: visited,: hover,: focus,: active
- Що таке normalize і reset
- Робота з margin і padding
- розбір популярних помилок при роботі зі стилями
- познайомимося з caniuse, caniemail, cssdb
- змінні в CSS
- простору імен і незалежні компоненти
Модуль: основне навчання
- Створюємо глобальну сітку для веб-сторінки
Навчимося створювати повноцінний layout для веб-сторінки, розберемо прийоми для створення рядків і колонок.
- Робота з CSS Grids
- розбір поняття сітка документа
- розбір блокової моделі документа
- Робота з grid-контейнером, елементами і лініями
- практичне застосування Grid track, cell і area
- розбір популярних помилок при роботі з CSS Grids
- знайомство з рецептами рішення багів
Навчимося керувати розташуванням елементів всередині компонента.
- Робота з Flexbox
- розбір основної термінології
- Робота з різними типами осей всередині flexbox-контейнера
- керування розташуванням елементів
- Управління порядком елементів
- розбір популярних помилок при роботі з Flexbox
- знайомство з рецептами рішень багів
Модуль: основне навчання
- Просунуті прийоми для поліпшення стилів
Навчимося робити PixelPerfect веб-сторінки, які будуть ідентичними графічним макетам. Перетворимо статичні елементи в динамічні за допомогою CSS-анімацій. Навчимося додавати на сторінку графічні елементи різного типу.
- просунуті техніки роботи зі шрифтами
- управління рендерингом шрифту
- розбір властивостей для налаштування параметрів букв і слів
- управління відступами
- розбір різних типів підкреслень
- розбір популярних помилок при роботі з кастомними шрифтами
- просунуті техніки роботи з графічними елементами
- абсолютне і відносне позиціонування. Координати, зміна точки початку координат
- як і коли застосовувати фіксоване позиціонування
- шари і управління порядком шарів
- Робота з градієнтом
- Налаштування тіней
- особливості при роботі з графічними елементами у форматі .png, .jpg, .svg
- розбір популярних помилок при роботі з графічними елементами
Навчимося додавати динаміку до веб-сторінок за допомогою CSS-анімацій. Розберемося, коли варто використовувати CSS Transition, а коли CSS Keyframes.
- базові анімації за допомогою CSS Transition
- управління CSS-властивостями, які потрібно анімувати
- налаштування тривалості анімації
- розбір популярних помилок при роботі з CSS Transition
- просунуті анімації за допомогою CSS Keyframes
- Що таке розкадровка і групування кадрів
- Робота з повторюваними анімаціями
- Налаштування напрямку анімації
- затримка початку анімації
- Робота зі станом до і після анімації
- розбір популярних помилок при роботі з CSS Keyframes
Модуль: робота над проектами
- Перший тиждень практики
Підготуємо оточення і приступимо до роботи над персональним проектом.
- робочий процес
- вивчимо робочий воркфлоу, за яким відбуватиметься практика
- отримаємо техзавдання для першого проекту
- налаштуємо стартову точку
- отримаємо додаткові матеріали
- приступимо до виконання перших фіч для свого проекту
Модуль: робота над проектами
- Другий тиждень практики
Відправимо проект на код-рев'ю, імплементуємо фідбек від наставника.
- робочий процес
- завершимо роботу над основною частиною свого проекту
- відкриємо пул-реквест і відправимо проект на код-рев'ю
- імплементуємо фідбек від наставника
- відкриємо пул-реквест і відправимо проект на повторне код-рев'ю
- завершимо роботу над проектом
- відкриємо пул-реквест і відправимо проект на фінальну перевірку
- приступимо до роботи над другим проектом
Модуль: робота над проектами
- Третій тиждень практики
Відправимо другий проект на код-рев'ю, імплементуємо фідбек від наставника за другим проектом.
- робочий процес
- завершимо роботу над основною частиною свого другого проекту
- відкриємо пул-реквест і відправимо проект на код-рев'ю
- імплементуємо фідбек від наставника
- відкриємо пул-реквест і відправимо другий проект на повторне код-рев'ю
- завершимо роботу над другим проектом
- відкриємо пул-реквест і відправимо другий проект на фінальну перевірку
https://privatelink.de/?https://lectrum.io/intensive/html-css