Вы научитесь пользоваться

HTML
Стандартизированный язык разметки документов в сети. Язык HTML интерпретируется браузерами, а полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
CSS
Используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц.
Photoshop
Adobe Photoshop — многофункциональный графический редактор, в основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты.
Bootstrap
Свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Программа курса

Рассмотрим необходимые программы для начала работы, полезные онлайн сервисы.
  • Установка необходимых программ
  • Установка дополнительных пакетов для редактора кода
  • Ознакомление с инструментами
1 Час теории
Научимся создавать HTML Файл, разберем структуру документа, переход меж файлами, работа с ссылками.
  • Как устроен сайт
  • Виды сайтов
  • Процесс разработки сайта
  • Разборка тэгов и атрибутов
1 Час теории 1 Час практики
  • Структура документа
  • Текстовые абзацы
  • Заголовки и подзаголовки
  • Ссылки
  • Изображение
  • Списки
  • Таблицы
  • Комментарии
  • Типы тегов
Форма Функциональность сайтов, предоставляющих пользователю возможность ввода данных и получения результатов их обработки, обеспечивается использованием программ, работающих на стороне сервера — серверных приложений.
  • Формы
  • Элементы формы
  • Обязательные поля
  • Списки
1 Час теории 1 Час практики
CSS-стили можно писать внутри HTML-кода страницы или подключать их как внешний файл.
  • Способы подключение CSS
  • Работа CSS с цветами
  • Все о фоновых изображениях
  • Псевдо классы
  • Псевдо элементы
1 Час теории 1 Час практики
  • Подключение стилей
  • Основные единицы измерения CSS
  • Цвет и размеры шрифтов в CSS
  • Селекторы
  • Основные свойства CSS
Узнаем что такое блок, научимся менять поведение тэгов, создадим простой пример сайта.
  • Блочные и строчные элементы
  • Основные элементы для верстки
  • Написание правильной структуры и группировки файлов
  • Изменение поведения элементов
  • Значимость и зависимость селекторов
1 Час теории 1 Час практики
  • Параметры css для фона
  • Параметры текста в css
  • Границы элементов в css
  • Блочные и строчные элементы в css
Научимся работать с обтеканием и позиционировать элементы сайта.
  • Плавающие элементы
  • Позиционирование элементов
  • Правила позиционирования
  • Изменение наложения элемента
1 Час теории 1 Час практики
  • Правильное построение сайта с помощью Float
  • Способы применения position
Узнаем, как нужно работать с макетом сайта, научимся нарезать макет, познакомимся с необходимыми инструментами.
  • Исследуем макет
  • Нарезка макета
  • Изображения для web
  • Спрайты
  • Нестандартные шрифты
1 Час теории 1 Час практики
  • Выгрузка изображений
  • Объединение слоев
  • Работа со спрайтами
  • Подключение шрифтов
  • Подключение нестандартных шрифтов
БЭМ — аббревиатура от слов Блок, Элемент, Модификатор — методология именования, изобретённая парнями из Яндекса. Это изящный путь именования классов с целью сделать их понятнее и прозрачнее для других разработчиков.
  • Построение layout
  • Логические блоки HTML5, их назначение
  • БЭМ – методология именования классов
  • Модульная верстка
  • Изменение блочной модели
1 Час теории 1 Час практики
  • Наименование классов по БЭМ
  • Правильная структура HTML 5
  • Вложенность
  • Настройка HTML файла
  • Построение рабочего шаблона.
Работа с линейными и радиальными градиентами, плавные переходы при наведении.
  • Тени
  • Градиенты
  • Плавные переходы
  • Трансформации
  • Анимация на CSS
  • Префиксы
1 Час теории 1 Час практики
  • • Примеры использования, при создании кнопок с разным градиентом
  • • Простой градиент из двух цветов
  • Сложный градиент из трех разных цветов
  • Резкий переход между двумя цветами, через градиент
  • Плавные переходы
  • Создание меню с плавными переходами.
  • Вендорные префиксы
  • Трансформации
Благодаря адаптивной верстке, ваш сайт будет выглядеть одинаково хорошо на всех устройствах.
  • Медиа – запросы
  • Относительные единицы
  • Оптимизация изображений и видео
  • Оптимизация под retina дисплеи
  • Понятие breakpoint
1 Час теории 1 Час практики
  • Гибкие шрифты
  • Создание гибкой сетки.
  • Гибкие поля и отступы
  • Гибкие изображения.
  • Медиа-запросы
Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.
  • Располагать элементы в одном из четырех направлений
  • Переопределения порядка
  • Горизонтальное и вертикально центрирование
  • Одинаковая высота колонок
1 Час теории 1 Час практики
  • порядок отображения элементов
  • Автоматически определять размеры элементов
  • Переносить элементы внутри контейнера
  • порядок отображения элементов
Bootstrap – это готовый набор css и различные заготовки для сайта
  • Система сеток
  • Типографика и код
  • Хелперы
  • Выпадающий список
  • Bootstrap темы
1 Час теории 1 Час практики
  • Работа с Bootstrap
  • Подключение стилей Bootstrap
  • Построение сеток
  • Добавление на сайт готовых элементов Bootstrap
Запишитесь на курс и получите консультацию по программе обучения
5000 сом6500 сом
полная стоимость курса
2167 сом / неделя
оплата частями

Как проходит обучение

  • Занятия
    Живые занятия в классах. Обсуждение материала лекций в закрытом комьюнити студентов.
    1
  • Практика
    После каждого занятия — тестирование и практическое задание. Оценки и правильные решения с подробными комментариями.
    2
  • Сопровождение
    Помощь и поддержку преподавателей курса можно получить непосредственно на занятиях а также в специальном закрытом чате группы.
    3
  • Карьера
    По окончанию курса лучшие ученики получают не только сертификат, но еще и рекомендательные письма от руководителя IT-club.
    4
Какие документы я получу после окончания программы обучения?

Успешным выпускникам всех курсов вручается сертификат о прослушивание курса установленного образца.

Отзывы студентов

О преподавателе

Преподаватель курса HTML Верстальщик

Стаж работы Web-разработчиком более 7 лет

Верстка — это этап разработки сайтов, на котором визуальные макеты переводятся в код, который обеспечивает отображение страниц в браузерах. Условно это можно представить так: верстальщик переводит страницу с визуального языка дизайнера на язык браузеров. Именно на этом курсе мы научим вас создавать это!
Сергей Горячкин
Преподаватель HTML

Оплатите сразу или получите консультацию

полная стоимость курса
5000 сом6500 сом
оплата частями
2167 сом / неделя
Сэкономьте еще 20%
Приведи друга и получи скидку 20%. Пройдите курс за 4000 сом вместо 5000. Акция действует при условие полной оплаты за себя и за друга.
Как оплатить частями?
В зависимости от длительности курса, обучение делится на периоды либо недели, либо месяца. Мы предоставляем производить оплату в начале каждого периода.
Как оплатить от юрлица?
Запишитесь на курс от имени того, кто будет учиться. Закрывающие документы (счет-фактуру) можно будет получить после оплаты.
Есть еще вопросы?
Звоните нам — +996 (501) 120 130

Компании, в которых работают наши выпускники,

а также поддерживают наш проект, IT CLUB

Где проходят курсы

Мы всегда рады видеть старых и новых друзей на наших курсах