Курс Верстальник – HTML, CSS, JavaScript

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Чого ви навчитеся

– Верстка веб-сторінок за макетами
– Блокова верстка
– Семантична і валідна верстка
– Адаптив і кросбраузерність
– Анімації і трансформації
– БЕМ
– FlexBox
– Препроцесор SCSS
– Bootstrap 4
– Нарізка макетів Photoshop, Figma, Zeplin
– JavaScript для верстальника
– Використання js-бібліотек

Вимоги

– Базове володіння ПК та Інтернет

Опис

Колись уже вивчали HTML і CSS, але так і не навчилися верстати макети? Або просто виявляєте перший інтерес до веб-розробки? Курс Компетенція Верстальник стане чудовим стартовим майданчиком для того, щоб увійти у світ IT.

Отримайте необхідний набір навичок по роботі з HTML, CSS, JavaScript і додатковими інструментами, створіть собі портфоліо і станьте професіоналом.

У рамках курсу ви навчитеся верстати за дизайнерськими макетами – адаптивно, семантично, кросбраузерно, з анімацією та інтерактивними JavaScript елементами. Навчитеся писати js-код самостійно і використовувати готові, перевірені часом рішення.

Почніть свій шлях у світ IT з вебу. І цей курс стане для вас чудовою платформою для подальших успіхів у професії.

Для кого цей курс:

Веб-розробники-початківці
Ті, хто колись вивчав верстку і хоче актуалізувати знання та стати професіоналом
Хто вже працює, але відстав від технологій або не міг раніше освоїти JS

Матеріали курсу

Основи HTML, CSS

Основи HTML
Основи CSS
Робота з текстом
Робота з блоковими елементами
Стилізація блокових елементів
Робота з посиланнями та кнопками
Робота із зображеннями та іконками
Автоматичне форматування в VS Code
Псевдокласи і псевдоелементи CSS
Структура сайту і типи макетів
Таблиці і таблична верстка
Блокова модель верстки old-style
Позиціонування, меню, що випадає
Введення у FlexBox
Блокова модель верстки на флексах

Робота з макетами

Нарізка макета в Photoshop
Zeplin та імпорт з Photoshop або Figma
Майстер-клас з верстки макета
Макети

Просунуті техніки HTML, CSS

Основи БЕМ
Елементи форм
Фільтри CSS
Семантичні теги HTML5
Кросбраузерність
Трансформації CSS3
Анімації CSS3
Робота з адаптивом
Базове використання препроцесора SASS|SCSS
Просунуте використання SASS|SCSS

Bootstrap 4

Загальні можливості Bootstrap
Робота з сіткою Bootstrap
Використання компонентів Bootstrap

JavaScript для верстальника

Вступ до JavaScript
Розгалуження і цикли
Об’єкти і масиви JS
Функції JS
Поняття DOM і вузлів
Обробка події за кліком
Створення слайдера на JS
Створення модального вікна
Створення табів
Створення фільтра карток

Бібліотеки JavaScript

Основи jQuery
Галерея FancyBox
Анімації ParollerJS, ParallaxJS
Анімації ScrollMagic
Адаптивний слайдер SwiperJS

БОНУС: Специфікація CSS Grid

CSS Grid. Базова термінологія
Базові можливості CSS Grid
Шаблони та фракції
Grid області та робота з ними
Вирівнювання
Методи адаптиву
Нюанси використання

Проєкт Верстки макета від і до

Огляд шаблону для верстки
UI Kit – що і навіщо
Налаштування оточення
Змінні та типографіка
Компонент “Особливість”
Компонент “Скріншот”
Компонент “Відгук”
Компонент “Ціна”
Компоненти форми та соц іконок
Вступний блок сайту
Блок “Про продукт”
Блок “Особливості”
Блок “Скріншоти”
Блок “Відгуки”
Блок “Ціни”
Блок “Підвал сайту”
Валідація верстки
Production-збірка