CSS-код используя
Люкс CSS3
Программа курса
“ВЕРСТКА WEB-САЙТОВ: HTML, CSS, JS”
Открытие курса
- Приветственное слово команды – руководителя и спикера курса.
- Этапы подготовки выпускной работы и обсуждение темы.
Принципы web-разработки
- Начало карьеры в IT. Web-разработка.
- Этапы разработки хорошего сайта.
- Структура web-страницы.
- Требования к коду web-верстальщика: адаптивность, валидность кода, кроссбраузерность.
- 10 этапов web-верстки проекта.
- Размещение сайтов в сети. Хостинг в Беларуси.
- Выбор программы для верстки. Jetbrains WebStorm.
Разметка HTML для структуризации
- Язык HTML: версии и структура элемента.
- Структура web-страницы: разделение на логические блоки и элементы.
- Выбор тэгов HTML-документа.
- Формирование контейнера для ограничения ширины страницы.
- Написание валидного кода в программе WebStorm.
- Создание HTML-форм. Спецсимволы.
- Комментарии в HTML. Верстка новой страницы проекта.
- Сервис для совместной разработки проектов GitHub.
- 2 способа обновления репозиториев на GitHub.
Adobe Photoshop в работе верстальщика
- Анализ PSD-макета. Настройка Photoshop и инструменты для верстальщика.
- Копирование текста в HTML-код. Определение параметров шрифтов.
- Экспорт изображений в png или jpg.
- Отступы и размеры элементов макета. Параметры слоев: цвет фона, уровень прозрачности и эффекты слоев.
- Выделение компонентов проекта в style guide.
- Тест №1
Шрифты в верстке web-сайта
- Начало работы со шрифтами.
- Конвертация шрифтов для браузеров.
- Подключение шрифтов к проекту и тэгам.
- Подключение иконочных шрифтов для сайта.
CSS для стилизации web-страниц
- Алгоритм стилизации в CSS.
- Селекторы как способ обращения к HTML-элементам.
- Подготовка проекта к стилизации: настройка стилей для элементов web-страницы, body и контейнера.
Начало стилизации проекта в CSS
- Стилизация текста с помощью CSS.
- Выбор подключения изображений:
или background.
- Приоритеты CSS селекторов.
CSS-позиционирование блоков
- Размещение блоков на странице.
- Позиционирование блоков обтеканием.
- Блочный способ позиционирования.
- Позиционный способ размещения блоков.
- Табличный способ позиционирования.
- Позиционирование элементов технологией Flexbox.
- Позиционирование элементов технологией CSS Grid.
- Тест №2
Завершение стилизации проекта и его тестирование
- Стилизация блоков проекта: тень, градиент, рамка.
- Создание блока со ссылкой.
- Создание псевдоэлементов – before, after, placeholder.
- Псевдоклассы – hover, focus, active, checked. Эффекты перехода и префиксы кроссбраузерности.
- CSS-анимация: применение, ключевые кадры, подключение.
- 4 способа тестирования верстки. Расширение PerfectPixel.
Техника адаптивной верстки
- Адаптивная верстка как важный этап web-разработки.
- Техника адаптивной верстки по psd-макетам.
- Техника адаптивной верстки без psd-макетов.
JavaScript в верстке web-сайтов
- Применение функционала JavaScript на web-сайтах.
- Инструменты JS в работе верстальщика: переменные, условия, функции.
- Создание часов на языке JavaScript с функцией setInterval.
- Понимание логики языка JavaScript на примере создания слайдера изображений.
Библиотека jQuery в web-разработке
- jQuery как Люкс в верстке.
- Селекторы и функции для элементов.
- Создание функций для событий и эффекты в jQuery.
- Тест №3
Готовые решения функционала для сайта
- Плагины и их подключение.
- Создание карусельного слайдера с плагином OwlCarousel.
- Подключение плагина jQuery UI Tabs для вкладок
- Плагин jQuery Selectric для создания выпадающего меню.
- Плагины горизонтального выбора значений и печатающегося текста.
- Библиотека Highcharts для создания графиков.
Рекомендации по проекту и его сдача
- Препроцессор SASS как инструмент для расширения возможностей CSS.
- Чек-лист проверки сверстанного проекта перед тестированием.
- Оценка времени web-верстки проекта.
- Оптимизация сайта по итогам верстки.
- Формирование портфолио и рекомендации для эффективной работе web-верстальщика.
Занятия два дня в неделю, группа офлайн 8 мест или онлайн 25 мест
Домашки, которое учат применять знания на практике
Проверка заданий и развернутая обратная связь спикеров
База знаний: авторский конспект занятий с разборами и схемами
База знаний: файлы и готовые шаблоны из практики
Поддержка в закрытом чате, спикеры отвечают на любые вопросы
Заряженные на успех фирменные ручка, блокнот и стикерпак
Сертификат при условии защиты проекта и сдачи всех домашек
Сертификат об обучении государственного образца
Стоимость обучения в группе
Учеба в формате интерактива, когда спикер обучает на примере кейсов из опыта, а клиент сразу повторяет
Удобочитаемый конспект каждого дня учебы, который станет настольной книгой и помощником в работе
Материалы курса: файлы реальных проектов, важные программы для работы, полезные сервисы, сайты
Этапы учебы по модели Колба, 99% доходимость клиента до результата, анализ эффективности и метрики прогресса
Поддержка 24/7, домашние задания по реальным проектам клиента, обратная связь на видеовстречах раз в неделю
Закрытая группа в Telegram, возможность задавать вопросы, получать ответы
Домашние задания раз в неделю и письменный отчет, отправленный спикеру до времени дедлайна
Проведение итогового теста, подробный разбор, анализ результатов каждого клиента было стало, выпускной
Место в группе по видеосвязи через ZOOM электронный конспект учебы в pdf формате
Место в группе у нас с компьютером и новым Soft, фирменная упаковка: бумажный конспект, ручка, блокнот, стикер
Сертификат курсов USPEHEDUCATION
Сертификат об обучении государственного образца
Учеба в формате интерактива, когда спикер обучает на примере кейсов из опыта, а клиент сразу повторяет
Удобочитаемый конспект каждого дня учебы, который станет настольной книгой и помощником в работе
Материалы курса: файлы реальных проектов, важные программы для работы, полезные сервисы, сайты
Этапы учебы по модели Колба, 99% доходимость клиента до результата, анализ эффективности и метрики прогресса
Поддержка 24/7, домашние задания по реальным проектам клиента, обратная связь на видеовстречах раз в неделю
Закрытая группа в Telegram, возможность задавать вопросы, получать ответы
Домашние задания раз в неделю и письменный отчет, отправленный спикеру до времени дедлайна
Проведение итогового теста, подробный разбор, анализ результатов каждого клиента было стало, выпускной
Место в группе по видеосвязи через ZOOM электронный конспект учебы в pdf формате
Место в группе у нас с компьютером и новым Soft, фирменная упаковка: бумажный конспект, ручка, блокнот, стикер
Сертификат курсов USPEHEDUCATION
Сертификат об обучении государственного образца
Учеба в формате интерактива, когда спикер обучает на примере кейсов из опыта, а клиент сразу повторяет
Удобочитаемый конспект каждого дня учебы, который станет настольной книгой и помощником в работе
Материалы курса: файлы реальных проектов, важные программы для работы, полезные сервисы, сайты
Этапы учебы по модели Колба, 99% доходимость клиента до результата, анализ эффективности и метрики прогресса
Поддержка 24/7, домашние задания по реальным проектам клиента, обратная связь на видеовстречах раз в неделю
Закрытая группа в Telegram, возможность задавать вопросы, получать ответы
Домашние задания раз в неделю и письменный отчет, отправленный спикеру до времени дедлайна
Проведение итогового теста, подробный разбор, анализ результатов каждого клиента было стало, выпускной
Место в группе по видеосвязи через ZOOM электронный конспект учебы в pdf формате
Место в группе у нас с компьютером и новым Soft, фирменная упаковка: бумажный конспект, ручка, блокнот, стикер
Сертификат курсов USPEHEDUCATION
Сертификат об обучении государственного образца
занятий ул. Карбышева, д. 74
этаж 3, офис 9/3
г. Брест
возможен гибкий график
Для регистрации переходите по ссылке в Telegram и напишите слово Учавствую
Вам предложат выбрать комфортный
формат учебы и дату старта группы
Подпишем договор на учебу,
оплачиваете курс полностью или бронь места
После оплаты заберем в закрытую
платную группу, где будет вся информация
Остались вопросы по тарифам и оплате, напишите нам в Telegram