Проверь свои знания в HTML верстке
Пройди тест и получи гарантированную скидку до 10%

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

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
Ознакомимся с основными инструментами, научимся работать с макетом и узнаем преимущество Figma
  • Изучим макет
  • Изображения для web
  • Шрифты
  • Smart animate
1 Час теории 1 Час практики
  • Импорт-экспорт изображений
  • Работа со smart animate
  • Библиотека шрифтов
  • Плагины
  • Слои, области и компоненты
БЭМ — аббревиатура от слов Блок, Элемент, Модификатор — методология именования, изобретённая парнями из Яндекса. Это изящный путь именования классов с целью сделать их понятнее и прозрачнее для других разработчиков.
  • Построение layout
  • Логические блоки HTML5, их назначение
  • БЭМ – методология именования классов
  • Модульная верстка
  • Изменение блочной модели
1 Час теории 1 Час практики
  • Наименование классов по БЭМ
  • Правильная структура HTML 5
  • Вложенность
  • Настройка HTML файла
  • Построение рабочего шаблона.
Работа с линейными и радиальными градиентами, плавные переходы при наведении.
  • Тени
  • Градиенты
  • Плавные переходы
  • Трансформации
  • Анимация на CSS
  • Префиксы
1 Час теории 1 Час практики
  • • Примеры использования, при создании кнопок с разным градиентом
  • • Простой градиент из двух цветов
  • Сложный градиент из трех разных цветов
  • Резкий переход между двумя цветами, через градиент
  • Плавные переходы
  • Создание меню с плавными переходами.
  • Вендорные префиксы
  • Трансформации
Благодаря адаптивной верстке, ваш сайт будет выглядеть одинаково хорошо на всех устройствах.
  • Медиа – запросы
  • Относительные единицы
  • Оптимизация изображений и видео
  • Оптимизация под retina дисплеи
  • Понятие breakpoint
1 Час теории 1 Час практики
  • Гибкие шрифты
  • Создание гибкой сетки.
  • Гибкие поля и отступы
  • Гибкие изображения.
  • Медиа-запросы
Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.
  • Располагать элементы в одном из четырех направлений
  • Переопределения порядка
  • Горизонтальное и вертикально центрирование
  • Одинаковая высота колонок
1 Час теории 1 Час практики
  • порядок отображения элементов
  • Автоматически определять размеры элементов
  • Переносить элементы внутри контейнера
  • порядок отображения элементов
Grid решает похожие задачи, что и Flex, но в основе - двумерный макет, который предназначен для разделения интерфейса.
  • Различия между Grid и Flex
  • Расположения элементов по двум осям
  • Доли
  • Управление элементами сетки и ссылки на них
1 Час теории 1 Час практики
  • В каких ситуациях лучше использовать Grid
  • Столбцы и строки, функция repeat
  • Единица измерения Fr
  • Отступы, начальные и конечные точки элемента сетки, области
Bootstrap – это готовый набор css и различные заготовки для сайта
  • Система сеток
  • Типографика и код
  • Хелперы
  • Выпадающий список
  • Bootstrap темы
1 Час теории 1 Час практики
  • Работа с Bootstrap
  • Подключение стилей Bootstrap
  • Построение сеток
  • Добавление на сайт готовых элементов Bootstrap
Запишитесь на курс и получите консультацию по программе обучения
7000 сом8000 сом
полная стоимость курса
4000 сом / 2 неделя
оплата частями

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

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

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

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

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

IT Тренер курса Front End Разработчику

Общий стаж работы в сфере ИТ – более 6 лет

Действующий разработчик с международным стажем опыта работы более 5 лет.  Имеет опыт работы в проектах разного масштаба, начиная от простых веб-систем до сложных корпоративных платформ с внешними программными сервисами.

Верстка - это этап разработки сайтов, на котором визуальные макеты переводятся в код, который обеспечивает отображение страниц в браузерах. Условно это можно представить так: верстальщик переводит страницу с визуального языка дизайнера на язык браузеров. Именно на этом курсе мы научим вас создавать это!
Раимжанов Халим
Тренер Front End Разработчик

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

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

IT-профессии сегодня считаются наиболее перспективными с точки зрения трудоустройства и уровня заработной платы. Одна из них – HTML-верстальщик. Этот специалист выполняет верстку веб-страниц – создаёт HTML-шаблон для сайта с учётом графического оформления и особенностей стиля. По сути, он переводит на компьютерный язык то, что клиент хочет видеть на своём сайте в итоге.

Плюсы профессии HTML-верстальщика

Хотя работа HTML-верстальщика похожа на работу программиста, но отличия между этими смежными специальностями есть. Первые служат как бы связующим звеном между дизайнером и программистом и подготавливают техническую часть художественного макета.

Плюсов у этой профессии несколько:

  1. Популярность. Только за последние два года заработная плата таких специалистов увеличилась почти вдвое. Их услугами пользуются и digital-агентства, и крупные интернет-проекты, и студии веб-дизайна, а также частные клиенты, которым необходим сайт.
  2. Освоить специализацию можно достаточно быстро. При наличии должной заинтересованности и хотя бы минимальных навыков уже через 2–6 месяцев можно вполне переходить на реальные проекты.
  3. Возможность освоения смежных профессий, например, web-дизайнера или фронтенд- разработчика. Освоив HTML-верстку, другим специализациям можно обучиться в несколько раз быстрее, что открывает новые перспективы для карьерного роста.

В этой профессии, как и во многих других, нужно постоянно развиваться. Сфера верстки не стоит на месте, она динамична и постоянно меняется.

Где научиться HTML-верстке

Самый простой способ постичь азы HTML-верстки – получить знания на курсах. Программа курса включает изучение различных программ и инструментов:

  1. Это удобные инструменты для создания веб-приложений и сайтов, которые включают CSS- и HTML-шаблоны для создания блоков навигации, формы, меток, кнопок и других элементов интерфейса сайта.
  2. С помощью этого графического редактора можно работать с изображениями и векторными инструментами.
  3. С помощью этого инструмента можно задавать шрифты, цвета, располагать на странице блоки и другим образом формировать внешний вид веб-страницы.
  4. Это база для HTML-верстальщика – стандартный язык разметки. Он считывается разнообразными браузерами, форматирует обычный контент, который отображается на экране компьютера.

После освоения HTML-верстки выпускники курсов могут осваивать смежные профессии. Один из вариантов – освоить программирование, второй – JS- фреймворки. Классический путь многих верстальщиков – освоение frontend- разработки.

Курсы HTML-верстки от It Club – это удобный способ получить большой объем знаний, практических навыков и быстро освоить профессию. В небольших группах по 10–12 человек занятия происходят вживую, домашние задания и тесты можно обсуждать с куратором в классе или в закрытом чате онлайн. Записаться на занятия можно уже сейчас по телефонам и через онлайн-форму на сайте.

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

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

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

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