Кому підійде цей курс
Новачкам в розробці
Ви освоїте актуальний навик розробника за 6 місяців, навіть якщо раніше ніколи не чули про HTML, CSS і JavaScript.
початківцям верстальникам
Ви систематизуєте свої знання по верстці, прокачаєте навички, поповните портфоліо новими проектами і зможете заробляти більше.
Дизайнерам і backend-розробникам
У вас з'явиться додатковий скілл по frontend-розробці, який допоможе закривати багато проектів самостійно.
чому ви навчитеся
- Блокова, гумова та адаптивна верстка
- Верстка інтернет-магазину
- Робота з системою контролю версій Git
- перевірка сайту на доступність
- основи CSS, HTML і JavaScript
- Робота з сучасними інструментами
основи верстки
Як працюють сайти. Верстка. Backend і frontend
Можливості HTML, CSS, JS
Налаштування робочого оточення
Правила написання коду. Робота з devtools
Github pages. Інтеграція з vs code
HTML
Елементи HTML розмітки. Теги
Види тегів. Парні/непарні теги
Службові теги
Основні теги
Атрибути тегів
Текстові теги. Перетворення тексту
Теги картинок і посилань
Теги для списку
Теги для таблиць
Інші теги
HTML5-семантика
Стандарти та валідність
Форми та медіа-елементи
Тег form
Як правильно розмічати форми
Атрибути елементів форми
Теги для аудіо та відео. Нюанси використання
Тег iframe
Доступність
Поняття доступності
Агіа
Шкідливі і корисні поради
Перевірка доступності
Перевірка сайту. Виправлення
Працюємо з макетом
Робота з макетом. Photoshop і Avocode, Figma
Формати зображень
Підключення зображень
SVG. Введення та вставка на сторінку
CSS
Знайомство з CSS
Селектори: як звертатися до елементів, вага селектора
Одиниці виміру CSS
Властивості для тексту
Блокові та інлайн елементи
Позиціонування, float, відступи
Кольори, фон
Підключення шрифтів
Форматування css-коду
Бем-Неймінг
Псевдокласи і псевдоелементи, складні селектори, функції
Практика. Flexbox
Створюємо каркас
Стилізація. Flexbox
Додаткові властивості flexbox
Бонус. Відео по bootstrap 4
Адаптивність і кросбраузерність
Що таке адаптивна, гумова, мобільна верстка. Pixel perfect. Mobile first
Відносні одиниці виміру
Медіа запити, viewport
Кросбраузерність: загальні підходи та тестування
Javascript для верстальника
Типи даних і змінні
Умови
Цикли та функції
Масиви та об'єкти
Обробка подій
Робота з DOM
Ajax
Плагіни. Установка і гнучка настройка слайдера на сайті
jQuery
Бонус. Практикум
Введення. Розбираємо макет на блоки
Верстка блоку №1
Верстка блоку №2
Верстка блоку №3
Робота з хостингом
Купівля та налаштування хостингу
FTP. Робота з файлами, вивантаження сайту
Створення піддоменів і Пошти
Курсовий. Міні-проект в портфоліо
ПРО
Верстка HTML-листів
Загальні правила верстки листів. Поштовики
Інструменти
Практика: верстаємо лист
Збирачі
Введення. Налаштовуємо оточення
Gulp. Пишемо перший таск
Gulp. Допрацьовуємо збірку
Webpack. Робимо просту збірку
Webpack. Допрацьовуємо збірку
Союз двох збирачів
Препроцесори і постпроцесори
Введення в препроцесори
Sass. Можливості
Огляд Less, postcss
CSS Grid
Поняття Display: grid
Властивості контейнера
Властивості дочірніх елементів
Практика: створюємо сайт
Анімація
Введення в анімацію CSS3
Як можна анімувати простіше-animate.css
Можливості анімації через JavaScript
CMS
Введення в CMS
CMS WordPress. Установка
CMS WordPress. Розділення шаблону
CMS WordPress. Підключення стилів і скриптів
CMS WordPress. Виводимо дані на сторінку з адміністративної панелі
Майбутнє верстки
Що нас чекає в майбутньому?
Нові HTML-теги
Нові властивості CSS
Як працюють сайти. Верстка. Backend і frontend
Можливості HTML, CSS, JS
Налаштування робочого оточення
Правила написання коду. Робота з devtools
Github pages. Інтеграція з vs code
HTML
Елементи HTML розмітки. Теги
Види тегів. Парні/непарні теги
Службові теги
Основні теги
Атрибути тегів
Текстові теги. Перетворення тексту
Теги картинок і посилань
Теги для списку
Теги для таблиць
Інші теги
HTML5-семантика
Стандарти та валідність
Форми та медіа-елементи
Тег form
Як правильно розмічати форми
Атрибути елементів форми
Теги для аудіо та відео. Нюанси використання
Тег iframe
Доступність
Поняття доступності
Агіа
Шкідливі і корисні поради
Перевірка доступності
Перевірка сайту. Виправлення
Працюємо з макетом
Робота з макетом. Photoshop і Avocode, Figma
Формати зображень
Підключення зображень
SVG. Введення та вставка на сторінку
CSS
Знайомство з CSS
Селектори: як звертатися до елементів, вага селектора
Одиниці виміру CSS
Властивості для тексту
Блокові та інлайн елементи
Позиціонування, float, відступи
Кольори, фон
Підключення шрифтів
Форматування css-коду
Бем-Неймінг
Псевдокласи і псевдоелементи, складні селектори, функції
Практика. Flexbox
Створюємо каркас
Стилізація. Flexbox
Додаткові властивості flexbox
Бонус. Відео по bootstrap 4
Адаптивність і кросбраузерність
Що таке адаптивна, гумова, мобільна верстка. Pixel perfect. Mobile first
Відносні одиниці виміру
Медіа запити, viewport
Кросбраузерність: загальні підходи та тестування
Javascript для верстальника
Типи даних і змінні
Умови
Цикли та функції
Масиви та об'єкти
Обробка подій
Робота з DOM
Ajax
Плагіни. Установка і гнучка настройка слайдера на сайті
jQuery
Бонус. Практикум
Введення. Розбираємо макет на блоки
Верстка блоку №1
Верстка блоку №2
Верстка блоку №3
Робота з хостингом
Купівля та налаштування хостингу
FTP. Робота з файлами, вивантаження сайту
Створення піддоменів і Пошти
Курсовий. Міні-проект в портфоліо
ПРО
Верстка HTML-листів
Загальні правила верстки листів. Поштовики
Інструменти
Практика: верстаємо лист
Збирачі
Введення. Налаштовуємо оточення
Gulp. Пишемо перший таск
Gulp. Допрацьовуємо збірку
Webpack. Робимо просту збірку
Webpack. Допрацьовуємо збірку
Союз двох збирачів
Препроцесори і постпроцесори
Введення в препроцесори
Sass. Можливості
Огляд Less, postcss
CSS Grid
Поняття Display: grid
Властивості контейнера
Властивості дочірніх елементів
Практика: створюємо сайт
Анімація
Введення в анімацію CSS3
Як можна анімувати простіше-animate.css
Можливості анімації через JavaScript
CMS
Введення в CMS
CMS WordPress. Установка
CMS WordPress. Розділення шаблону
CMS WordPress. Підключення стилів і скриптів
CMS WordPress. Виводимо дані на сторінку з адміністративної панелі
Майбутнє верстки
Що нас чекає в майбутньому?
Нові HTML-теги
Нові властивості CSS
https://privatelink.de/?https://skillbox.ru/course/weblayout/