Курс Верстальщик — 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-складання