Front-end Core - HTML, CSS

Базовый курс верстки для входа в профессию веб-разработчика

общие знания в IT, уверенное владение ПК и браузерами

Приглашаем всех желающих, которые хотят овладеть востребованной IT-профессией с нуля, сделать первый шаг и начать знакомиться с HTML, CSS развиваться в направлении Front-end разработки.

График занятий:

Вторник с 18:30-20:30 и Суббота с 11:00-13:00

Верстка с нуля обучение

Если ты уже решил сменить свою профессию и стать высокооплачиваемым IT специалистом, либо хочешь на практике узнать, что такое web-разработка, понять твое ли это? Начни с малого — просто оставь заявку на курс!

Стоимость: 2900 грн.

Интенсивность: 6 недель, по 2 часа /2 раза в неделю

Группы: до 10 человек

Стартовый уровень знаний: уверенное владение ПК

Результат: навыки верстки веб-страниц

По окончанию курса: сертификат + две страницы для портфолио

О КУРСЕПРОГРАММА

Курс верстки от Телесенс Академии – это первый шаг новичка в веб-технологии.
Курс нацелен на изучение инструментов для верстки веб-страниц.
В ходе курса вы будете работать как настоящий верстальщик получая теорию и практический опыт. Изучите Git, основы работы с фотошопом и аналогами. Узнаете HTML плюс основы CSS, которые активно используются в веб-разработке.
Навыки, полученные после успешного прохождения курса, позволят вам создавать адаптивные веб-странички.

Встреча 1

Инструменты вёрстки:

  1. Редакторы кода, инспекторы, полезные веб-сервисы.
  2. Системы контроля версий.
  3. Настройка компьютера для работы

Встреча 2

Введение в HTML.

  1. Синтаксис HTML, типы HTML-тегов.
  2. Структура простейшего HTML-документа.
  3. Как работать со спецификацией HTML. W3S. htmlBook

Встреча 3

Качественная разметка и стили кодирования.

  1. Логичная разметка: примеры и антипримеры.
  2. Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
  3. Модульность разметки или использование «пространств имён».
  4. Когда использовать
    ,

    и

    ?
  5. Кодгайды для разметки.

Встреча 4

Обзор основных графических редакторов

  1. Настройка интерфейса.
  2. Работа со слоями, типы слоёв.
  3. Получение параметров текста.
  4. Измерение размеров блоков, отступов, получение информации о цвете.
  5. Получение параметров сложных декоративных эффектов: тени, градиенты и прочее.

Встреча 5

Обзор форматов графики в вебе.

  1. Растровая графика — PNG, JPEG, GIF.
  2. Векторная графика — SVG.
  3. Как выбрать подходящий формат?
  4. Оптимизация графики.

Встреча 6

Введение в CSS.

  1. Синтаксис CSS.
  2. CSS-селекторы, псевдоклассы и псевдоэлементы.
  3. Наследование, каскадность и приоритеты в CSS.
  4. Единицы измерения в CSS: абсолютные, относительные, для управления цветом

Встреча 7

Поток и блочная модель документа.

  1. Понятие сетки и потока документа.
  2. Блочные и строчные элементы и их особенности.
  3. Свойства блочной модели: размеры, рамки и отступы.
  4. Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.
  5. Свойство display. Управление типом элементов.

Встреча 8

Доступность и формы

  1. Удобные и доступные интерфейсы. Управление фокусом, важность семантики, тестирование и скринридеры.
  2. Зачем нужные интерактивные элементы.
  3. Неочевидное использование интерфейсов.
  4. Понятие доступности.
  5. Физиологические и ментальные особенности.
  6. Взаимодействие с клавиатуры.

Встреча 9

  1. Зачем нужен фокус на элементах. Как сделать элементы интерактивными. Значимые элементы.
  2. Зачем семантика.
  3. Кнопки и ссылки, в чём разница? Лейблы элементов.
  4. Зачем нужны описания элементов. Разбор ошибок в реальных интерфейсах.
  5. Инспекторы доступности и скринридеры.

Встреча 10

Введение во флексбокс.

  1. Создание сеток на флексбоксах.
  2. Флекс-контейнер, флекс-элементы, флекс-оси.
  3. Алгоритм расчёта размеров флекс-элементов.

Встреча 11

  1. Выравнивание и распределение флекс-элементов вдоль осей.
  2. Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
  3. Особенности флексбоксов при создании сеток.

Встреча 12

Позиционирование.

  1. Относительное позиционирование.
  2. Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
  3. Фиксированное позиционирование.
  4. Управление порядком слоёв. Приёмы создания элементов интерфейса
РАСПИСАНИЕ И НАЛИЧИЕ МЕСТ В ГРУППЕ
Время Дни занятий Старт Количество мест Стоимость
18:30-20:30; 11:00-13:00 Вт/Сб 29 января 2019 3 2900 грн.

Курс стартует 1 раз в 2 месяца.

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

Результат после курса Front-and Core:

научитесь настраивать рабочую среду на ПК

научитесь использовать редакторы кода, IDE, системы конторя версий — Git

познакомитесь с основными форматами графики в вебе, научитесь оптимизировать и работать с PNG, JPEG, GIF, а также SVG

узнаете тонкости блочной модели документа: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

разберетесь с синтаксисом HTML5, семантическими елементами и работой со спецификациями

научитесь использовать CSS-графики для создания декоративных элементов интефейса и менять их стили

научитесь использовать и управлять флексбоксом

узнаете основные приёмы создания элементов интерфейса

научитесь самостоятельно верстать веб-страницы

самостоятельно выполните первый проект для своего портфолио

Преподаватель

Специалист-практик, который успешно занимается наставничеством, имеет опыт обучения студентов «с нуля».

Красовский Андрей
Преподаватель курса Front-End Харьков

Андрей Красовский 3,5 года занимается веб-разработкой. За это время работал в 3-х компаниях и участвовал в более чем 50 коммерческих проектах.
Постоянно посещает конференции и front-end meet-up.

Специалист в технологиях HTML, CSS, JS и фреймворках: Pug, Stylus, LESS , SASS, Angular, Backbone.
Проходил практические тренинги по построению коммуникации с людьми и группой — благодаря чему доступно объясняет материал.

Следуйте за нами в социальных сетях:
telesensacademy@gmail.com