Курсы HTML в Харькове

Профессиональный html верстальщик – специалист на вес золота. Этот факт вам подтвердят в любой веб-студии. Поэтому курсы html-вёрстки не теряют актуальности впоследние десять лет. Тем более что этой профессии современные ВУЗы пока полноценно не учат: приходится либо довольствоваться самообразованием, либо набираться опыта в специальных школах.

Что делает верстальщик? Говоря простым языком, специалист, обучившийся на html/css курсах, является связующим звеном между дизайнером и программистом, при этом не являясь ни одним, ни другим.

Основой работы верстальщика является макет, полученный от дизайнера и при помощи тегов «конструируем» дизайн-макет. В результате вместо изображения получается специально оформленная разметка, каждый элемент которой несёт своё значение. Этому вы обязательно научитесь на наших html курсах.

Следующий этап работы верстальщика – проверка, насколько хорошо страница смотрится во всех браузерах. В случае необходимости вносятся правки, а затем «эстафету» принимает программист.

На курсах html верстки вы:

  • Изучите языки разметки HTML.
  • Ознакомитесь и будете хорошо ориентироваться в CSS.
  • Научитесь пользоваться необходимыми инструментами и резать макеты в Adobe Photoshop.
  • Научим кроссбраузерной и адаптивной верстке.

Обычно специалист получает макет для вёрстки, созданный в графическом редакторе (чаще всего в формате .psd). Поэтому ему необходимо обладать как минимум базовыми навыками работы в Adobe Photoshop и других графических программах.

На HTML курсах  верстки в Харькове мы обучим работе с профессиональными html редакторами, которые ускорят вашу производительность в несколько раз. В принципе, можно работать и в любом текстовом редакторе, но специализированное программное обеспечение удобнее ввиду оснащения определённым функционалом (в частности, подсветкой тегов и ошибок).

Главная задача верстальщика – сделать просмотр веб-страницы для пользователя максимально комфортным и простым. На курсах html в Харькове обучим студентов верстать страницы с учётом того, что их будут просматривать на различных устройствах с разными разрешениями, в разных браузерах и разных версиях одного и того же браузера, со включенными скриптами и без них. Одна и та же страница должна выглядеть одинаково хорошо, на каком бы устройстве или браузере её ни открыли.

Словом, нюансов в работе верстальщика предостаточно. С большинством подводных камней вы ознакомитесь на курсах по верстке.

Кому подойдут курсы верстальщика сайтов?

Не секрет, что представителям той или иной профессии необходимы определенные качества. Не стали исключением и html/css верстальщики. Хорошими специалистами в этой сфере становятся усидчивые и внимательные к деталям люди, способные скрупулезно работать с мелочами.

В ряде случаев приходится дорабатывать дизайн и вносить правки. Поэтому творческому человеку в этой профессии будет проще.

Если вы обладаете вышеназванными качествами, чувствуете в себе силы и желание стать хорошим верстальщиком, то будем рады вам на курсах HTML верстки! Мы, в свою очередь, сделаем всё возможное, чтобы вы (а также ваши будущие работодатели) остались довольны пройденным курсом обучения.

Видеообращение преподавателя
Для кого данный курс?
  • для тех, кто хочет научиться создавать сайты
  • для специалистов по Internet-рекламе
  • для владельцев собственного бизнеса
  • для дизайнеров
  • для контент-менеджеров
Зачем этот курс?
  • чтобы создавать веб-страницы
  • чтобы использовать технологию фреймов
  • чтобы узнать о новых возможностях HTML 5 и CSS 3
  • чтобы грамотно разрабатывать интерактивные формы для взаимодействия пользователя с веб-сервером
Программа курса
Модуль 1
Занятие №1
ль 1 Знакомство. Что такое IT в целом и какое место занимает front-end в веб разработке в частности. Этапы разработки проекта. Обзор инструментов для разработки. Структура HTML документа. Основные теги. Особенности HTML5. Понятие кроссбраузерности и валидности.
Занятие №2
Внутренние стили. Основные CSS свойства. Рендеринг страницы. Поведение элементов. Блочные-строчные. Различия, особенности, их выравнивание. Вендорные префиксы, caniuse.
Занятие №3
Селекторы. Глобальные таблицы стилей. Значимость селектора, вес от типа обращения. Взаимоотношение блоков: вложенный, дочерний, соседствующий, родительский. Использования взаимоотношения в селекторах. Массовые обращения. Цветообразование. rgb. hex. opacity vs rgba. Комментирование кода.
Занятие №4
Абсолютный и относительный путь. Внешние таблицы стилей. Импорт стилей. Сброс стилей по-умолчанию. CSS reset. Изображения как часть контента. Ссылки. Многостраничные сайты. FTP. Работа с сервером.
Занятие №5
Выстраивание элементов с использованием свойств: table-cell, inline-block, float. Особенности. Отмена обтекания. Распорка. Псевдоэлементы. Использование, назначение. Использование псевдоэлемента как распорки. Сравнение способов взаимодействия. Плюсы и минусы.
Занятие №6
Позиционирование элементов, свойство position. static, relative, absolute, fixed, sticky: детальное рассмотрение каждого поведения. Выравнивание absolute и fixed. Использование нестандартных шрифтов. Как это “безопасные шрифты”. google fonts: обзор, применение. fonts squirrel: использование сервиса, аналоги.
Занятие №7
Построение меню. Теги. Многоуровневое, выпадающее меню. Что такое фоновая картинка. Отличия от image. Зона отображения фона. background-clip. Позиционирование, размеры фоновой картинки.
Занятие №8
Понятие спрайта. Назначение, плюсы и минусы. Построение меню с социальными иконками. Взаимодействие блока с фиксированной и динамической шириной. Меню с иконками + контент. Линейные и радиальные градиенты. Примеры использования.
Занятие №9
Трансформация как преобразование формы, размеров, местоположения объектов. Матрица преобразования, простые свойства. Анимации с использованием свойства transition. Кривая Безье, простые свойства. Анимации через keyframes.
Занятие №10
Геометрические фигуры на CSS: назначение, применение, анимирование. Скругления, примеры использования. Бордеры. Треугольники. Тени блоков. Составные фигуры. Рисование картинок. Сервис single div.
Занятие №11
Формы. Назначение, принцип работы. Стилизация элементов форм. Подсказки, паттерны. Новые элементы в HTML5. Стилизация checkbox. Векторная графика. SVG. Анимирование.
Модуль 2
Занятие №12
Тестирование по пройденной теории. Семантические теги. Назначение, использование, преимущества. Ускорение и автоматизация верстки. Emmet. Программы для работы с макетами: PS, avocode, photopea, figma, zeplin. Принцип верстки макета.
Занятие №13
Проверка сделанного. Рекомендации. Индивидуальные консультации. Идеальность верстки. PerfectPixel. Обзор плагинов. Особенности верстки под IE. Скрипты. Условное комментирование. Сдача макетов.
Занятие №14
Понятие адаптивной верстки. История появления. “Резиновые сайты”. Поведение контента при изменении размеров. Медиазапросы как условия для изменения верстки. Варианты использования. Принципы построения адаптивной верстки. Desktop and mobile first. Сравнение. Сравнение breakpoints, популярные брикпойнты. DPR. Viewport. Визуальные особенности мобильных версий. Тестирование, инструменты для тестирования и дебаггинга: mobile-friendly test, google chrome.
Занятие №15
Что такое FrameWork, актуальность использования. Bootstrap. Подключение, принцип работы. Bootstrap grid. Bootstrap компоненты.
Занятие №16
Обзор и построение элементов на bootstrap js. Недостатки BS slider. owl carousel, как аналог. Преимущества, подключение, опции. Принцип построения сайта AIDA. JS фреймворк Fullpage js.
Занятие №17
Проверка сделанного. Рекомендации. Индивидуальные консультации. Идеальность верстки в адаптиве. Исправление популярных ошибок. Сдача макетов.
Занятие №18
Что такое JS, как работает. Сравнение VanillaJS vs JQuery,React, VUE, Angular. Node.js. Основы синтаксиса. Построение функции. Зависимые функции. Литература по теме.
Занятие №19
Extensions. Переменные. Кеширование. Условия (if else). Популярные функции на примерах. Практика. Построение scrollUp, popup, carousel, image gallery, используя JS и разбор синтаксиса.
Занятие №20
JS. Scroll. Paralax. Отслеживание скролла, создание “прилипающих” блоков. Получение координат расположений блоков. Смена скорости скролла объектов, принципы параллаксов. Построение параллакс эффекта с “замиранием” блоков и сменой скорости скролла. Рекомендации по самостоятельному изучению JS. Подборка литературы.
Занятие №21
Автоматизация работы. GIT, LESS. Удаленная работа с файлами. Использование препроцессоров, принципы, основы. Разбор препроцессоров на примере LESS. Сборщики. Обзор функциональности. Gulp. Плагины. Что такое GIT и зачем он нужен. Литература и рекомендации по глубокому самостоятельному изучению рассмотренных тем.
Занятие №22
Что такое FlexBox и зачем он нужен. Рассматриваем синтаксис и поведение блоков. Особенности Bootstrap 4. Миграция. Freelance как возможность трудоустроиться. Сам себе предприниматель. Подводные камни, особенности работы, хитрости. Что такое CMS и зачем их знать front-end разработчику. Обзор популярных CMS. Как произвести впечатление на работодателя, подготовить оригинальное резюме и в сжатые сроки устроиться на работу. Подготовка резюме, портфолио. Вручение дипломов. After Party.
Инструменты курса
adobe-photoshop-cs6
Photoshop
HTML5_logo_black
HTML/CSS
javascript
Javascript
visual-studio-code
Visual Studio Code
PostCSS_Logo.svg
PostCSS
jquery-logo
jQuery
bootstrap-svg-icon
Bootstrap
git-logo-png-transparent
Git и Github
Prepod2018new (19)
Преподаватель курса
Алексей Пузич
Senior Front-end Developer
FLY-STUDIO
  • 10+ лет опыта в IT-сфере;
  • Senior Front-end developer;
  • Руководитель и и основатель Веб-студии;
  • 4+ года опыт преподавания в IT-школах;
  • Более 30 успешных выпусков;
  • Верстает не верстаемое и анимирует неанимируемое.
01
IT меняет жизни людей, дает огромные возможности, открывает новые границы как в прямом, так и в переносном смысле. В этом убедились уже 1500+ выпускников школы.
Пропустил занятие?
Не страшно, мы ведем видеозапись лекции и она будет доступна в личном кабинете на платформе Lemon.School
Мы не просто IT-школа, мы - IT-компания, Которая всегда ищет таланты!
www.art-lemon.com
Плюшки Студентам
Сертификат
Проявил себя и выжал максимум — сертификат твой!
Партнеры
Отправляем резюме лучших студентов рекрутерам ведущих IT-компаний.
Скидка 10%
Каждому выпускнику Lemon.School скидка 10% на любой другой курс.
Lounge Room
Релакс-зона, где в приятной обстановке ты сможешь обсудить новые IT-технологии.
Чат 24/7
Общий чат и постоянная онлайн-поддержка от преподавателя.
Расположение
Школа расположена в самом сердце города возле метро и удобной транспортной развязкой.
Lemon Bar
Безлимит на божественный чай, ароматный кофе и воздушные печеньки.
Закрытая платформа
Студенты автоматически попадают в закрытую платформу нашей школы.
Вакансии наших партнеров
partner-
ART LEMON
Junior project manager
Intern Web Designer
Junior SEO Specialist
partner-
PROMODO
Junior UI/UX Designer
Junior PPC specialist
Junior SEO Specialist
partner-
Epam
Support engineer (atlassian)
Junior JavaScript engineer
Test engineer
partner-
Nix Solution
Junior QC/QA
Senior Javascript Developer
Junior Java developer
partner-
SOFTSERVE
Junior QA engineer
Recruiter
partner-
G5
IT recruiter
Junior QA engineer
partner-
ALEXSOFT
Junior UI Designer
Recruiter
partner-
NETPEAK
Middle PPC Specialist
Junior + PPC Specialist
Мы гарантируем трудоустройство при окончании курса на 85 баллов и выше. Посмотреть все вакансии наших партнеров можно здесь:
ВСЕ ВАКАНСИИ
Выпускники
Закрыть
Закрыть
anastasiya_popup
Анастасия
Администратор школы
График работы:
с 10:00 до 18:00 (Пн - Пт)
Закрыть
Закрыть
Спасибо! Ваша заявка была отправлена
Если вы уже точно решили записаться на данный курс, у Вас есть возможность оплатить курс online, и сэкономить 5% от стоимости курса.
Закрыть