Распродажа!

HTML и CSS Профессиональный курс часть 2

390 грн

 Вы экономите: 800 грн (67%)
 Поторопитесь! Заканчивается через

Видео запись курса HTML и CSS. На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.

Безопасные платежи

Защита персональных данных

100% уникальные материалы

Гарантия лучшей цены

Вместе дешевле на 20% (количество курсов меняется галочками)

HTML и CSS Профессиональный курс часть 2 + HTML5 и CSS3. Создание адаптивных сайтов - видеокурс + HTML5, CSS3, FlexBox верстка сайтов - видеокурс + HTML и CSS Профессиональный курс часть 1
Цена за все курсы: 1,248 грн

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

Видео запись курса. На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.

– Актуальные стандарты качества: не нужно переучиваться после курса.
– Понимание полного цикла работы верстальщика.
– Фундаментальные и структурированные знания необходимых технологий.
– Опыт работы с дедлайнами и планирования работы.

Содержание

1. Введение (Теоретическая лекция). Системы контроля версий.

Зачем нужны системы контроля версий.
– Обзор возможностей и работа с Гитом.
– Работа с ветками: создание, синхронизация, слияние.
– Конфликты и их разрешение.
– Обзор Гитхаба.
– Рабочий процесс на интенсиве.
– Зависимость заданий.
– Настройки личных проектов.
– Создание мастер-репозитория.
– Структура личных проектов.

2. Методологии вёрстки (Теоретическая лекция). Приёмы создания надёжной вёрстки.

Зачем нужны методологии.
– Порядок в коде.
– Работа в команде.
– Недостатки технологий.

Обзор подходов к вёрстке.
– Классический подход.
– Независимые блоки.
– Атомарный подход.
– Компоненты и модули.

Методология БЭМ.
– Зачем всё так усложнять.
– Как разбить интерфейс на блоки.
– Элементы и модификаторы.
– Ошибки и узкие места.

Разбор учебного проекта по БЭМу.

3. Препроцессоры и автоматизация (Практическая лекция). Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.

Стили на стероидах.
– Обзор препроцессоров.
– Фантазийный CSS.
– Новые возможности CSS.

Основные возможности.
– Сравнение Less и Sass.
– Переменные и математика.
– Вложенные селекторы.
– Операции с цветами.

Дополнительные возможности.
– Подключение файлов.
– Примеси и расширения.
– Организация кода.
– Сборка стилей.

Настройка окружения.
– Система сборки на Node.js.
– Сборщики Gulp и Grunt.
– Автоматизация сборки и вотчеры.

4. Адаптивные сетки (Практическая лекция). Узнаем как создавать адаптивные сетки с использованием флексбоксов.

Создание сеток на флексбоксах.
– Введение во флексбокс.
– Флекс-контейнер, флекс-элементы, флекс-оси.
– Алгоритм расчёта размеров флекс-элементов.
– Выравнивание и распределение флекс-элементов вдоль осей.
– Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
– Особенности флексов при создании сеток.

Адаптивные сетки.
– Принципы «перестройки сетки».
– Медиавыражения, макро- и микробрейкпоинты.
– Организация кода разных версий страницы: мобильной, планшетной и десктопной.
– «Проблема двух вьюпортов» на мобильных.
– Настройка вьюпорта.

Создаём адаптивные сетки БЭМ-блоков учебного проекта с помощью флексбоксов.

5. Адаптивные декоративные элементы (Практическая лекция). Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.

Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.

– Переход от фиксированных сеток к резиновым. Тонкости флексбокса.
– Отличие «резины» от «фикса».
– Переход от пикселей к процентам.
– Резиновые колонки с точными размерами на флексбоксе.
– flex-grow для создания «неточных» резиновых колонок.
– Флекс-контейнер внутри флекс-контейнера и резиновые по высоте элементы.
– Когда использовать резиновые сетки и насколько они дороже фиксированных.

Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта.

6. Адаптивная графика (Теоретическая лекция). Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.

Графика для экранов повышенной чёткости.
– В чём разница между физическими и логическими пикселями.
– Что такое «ретиновая» графика.
– Приёмы ретинизации содержимого веб-страницы.

Адаптивная графика.
– Тег на все случаи жизни — .  – Ретинизация контентных изображений с помощью атрибута srcset.  – Кадрирование изображений с помощью.  – Использование современных форматов графики с помощью.  – Изображения неопределённых размеров и .

Ретинизируем и добавляем адаптивную графику в учебном проекте.

7. Векторная графика и оптимизация (Теоретическая лекция). Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.

Использование SVG.
– Плюсы и минусы векторной графики.
– Подключение SVG внешним ресурсом.
– Встраивание SVG.

SVG-спрайты.
– Зачем нужны, в каких случаях полезны.
– Варианты реализации.

Стилизация SVG.
– Что можно, а что нельзя.
– Анимация.
– Адаптивность.

Оптимизация и доступность SVG.
– Особенности экспорта из Illustrator и Sketch.
– Дожимаем и оптимизируем SVG.
– Доступность.

Оптимизация растровой графики.
– Сжатие lossless и с потерей качества.
– Обзор формата webp и особенностей его применения

8. Погружение в автоматизацию (Практическая лекция). Подготовим сборку проекта для его публикации.

Решим для себя, что лучше для автоматизации Gulp или Grunt.

Оптимизация.
– Минификация CSS-кода.
– Оптимизация изображений.
– Сборка и минификация SVG-спрайта.

Как держать код для разработчика удобным, а для браузеров — быстрым.

9. Производительность вёрстки (Теоретическая лекция).Разберёмся с производительностью вёрстки и попробуем оптимизировать «узкие места».

Как подключать внешние шрифты лучше всего.
– Отличается ли быстродействие сайта на десктопе от мобильного.
– Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
– Что нужно знать о перерисовке и перекомпоновке страниц.

10. Как не потеряться на рынке труда. Трудоустройство, поиск заказов, оценка работы

Какая вообще бывает работа?
– В офисе
– На фрилансе

Поиск работы

Как оценивать себя и проходить собеседования

С чем едят гриды (бонусная лекция из 13 потока)

– Введение в гриды.
– Вёртска Барбешопа.

11. Финал. Итоги интенсива.

Нужна ли регистрация?

Нет, регистрация не обязательна. Просто заполните все поля при оформлении заказа и ваш аккаунт создастся автоматически. Данные которые вы ввели на странице оплаты (почта, пароль), потом можно использовать для входа на сайт.

Как оплатить выбранный курс?

Наш сайт принимает оплату с помощью платежной системы Way For Pay. Все операции на нашем сайте безопасны и проходят с использованием шифрованного SSL соединения. Мы не собираем и не храним ваши платежные данные. Платежная система полностью гарантирует безопасность платежей.

На данный момент доступны следующие способы оплаты:

  • Банковская карта (любая)
  • Приват24
  • Терминалы Приватбанка (наличные)
  • G pay
  • Apple pay
  • Visa checkout
  • Masterpass
  • Мгновенная рассрочка для владельцев карт ПриватБанка
  • Рассрочка для владельцев карт Monobank

 

1. На странице курса нажмите “Купить”
2. Затем в открывшейся вкладке нажмите “Оформление заказа”
3. На странице оформления заполните все поля и нажмите “Купить”
4. Автоматически откроется страница платежной системы.
5. Выберите способ оплаты.
6. Введите данные и следуйте инструкциям платежной системы.
7. После успешной оплаты вы будете автоматически направлены на страницу, где сможете получить доступ к курсу. Так же вам будет выслано письмо с ссылкой на курс.

Если ни один из перечисленных способов оплаты вам не подходит, напишите нам: info@siluette.com.ua или воспользуйтесь чатом в правом нижнем углу страницы нашего сайта. Мы обязательно поможем.

Как получить оплаченные материалы?

Для того, чтобы получить материалы – просто заполните все поля при оформлении заказа (включая поле – Создать пароль учетной записи).

После оплаты — система автоматически направит вас в личный кабинет в раздел ①»Загрузки». Здесь  будет список ваших оплаченных материалов и ссылка на скачивание②.

Либо нажмите в правом верхнем углу сайта пункт Мой аккаунт, введите почту и пароль, который вы придумали, когда оформляли заказ. В разделе Загрузки есть ссылка на скачивание.

Сколько времени будут доступны материалы?

Ссылка на ваш курс будет доступна в течении 90 дней со дня оплаты. За это время вы должны скачать все материалы на свое устройство. После окончания этого срока ссылки могут стать неактивными. Это связано с нововведениями компаний, предоставляющих услуги облачного хранилища. Если вы не успели скачать купленные курсы, напишите нам на почту – info@siluette.com.ua

Отзывы

Отзывов пока нет.

Будьте первым, кто оставил отзыв на “HTML и CSS Профессиональный курс часть 2”

Ваш адрес email не будет опубликован. Обязательные поля помечены *