Front-end

Курс

В ходе курса рассматриваются все необходимые теоретические и практические аспекты программирования и разработки Front-end, каждый из которых закрепляется практическим заданием.

Данный курс рассчитан на людей, которые имеют минимальные знания html и css, но хотели бы продолжить обучение в данном направлении.  Здесь Вы научитесь создавать сайты и по окончанию курса, получите возможность двухнедельной стажировки в ИТ-компании, а так же принять участие в интернатуре с возможностью участия в реальном проекте в течение нескольких месяцев.

ДЕТАЛИ НАБОРА

  • Продолжительность:  3 месяца
  • Периодичность: 2 раза в неделю
  • Длительность занятия: 2 часа
  • Время: вечернее
  • Размер группы: 6–10 человек

  • Стоимость месяца обучения — 1800 грн
  • Студентам скидка — 10%
  • Оплата более 2-х месяцев скидка — 10%
  • Скидка выпускникам INIT, BrainBasket — 50%
html-verstalshhik-frontend-razrabotchik-stazhirovka

КУРС ВЕДЕТ

Курс ведет: Денисов Денис.

Разработчик web приложений. Опыт работы в IT более 5-ти лет, два года преподавания.

Модуль 1. Введение и основные понятия

  • Как это работает? Что такое web-сервер, web-сайт, web-страница
  • Цели и задачи языка HTML
  • HTML-разметка. Элементы
  • Структура HTML-документа
  • Использование комментариев
  • Базовые элементы разметки
  • Атрибуты элементов
  • Специальные символы
  • Практическая работа по теме

Модуль 2. Анатомия страницы

  • Понимаем, как мы пишем: синтаксис HTML
  • Элементы форматирования текста
  • Понимаем, что мы пишем: семантика элементов
  • Валидация HTML-документа
  • Структурные элементы разметки
  • Практическая работа по теме

Модуль 3. Гиперссылки

  • Понятие гиперссылок в WWW
  • Внешние и внутренние гиперссылки
  • Типы адресов в WWW
  • Дополнительные атрибуты гиперссылок
  • Практическая работа по теме

Модуль 4. CSS. Каскадные таблицы стилей: основные свойства

  • Основные понятия CSS
  • Способы определения стилей
  • Каскадирование и наследование
  • Единицы измерения в CSS
  • Основные типы селекторов
  • Псевдоклассы и псевдоэлементы
  • Свойства шрифтов
  • Свойства текста
  • Свойства цвета и фона
  • Практическая работа по теме

Модуль 5. Использование изображений на странице

  • Типы изображений используемые в WWW
  • Вставка изображений на страницу
  • Атрибуты элемента img
  • Практическая работа по теме

Модуль 6. Структурирование информации при помощи списков

  • Неупорядоченный список
  • Упорядоченный список
  • Список определений
  • CSS свойства для списков
  • Практическая работа по теме

Модуль 7. Представление табличных данных при помощи таблицы

  • Основные элементы таблицы
  • CSS свойства элементов таблиц
  • Объединение ячеек таблицы
  • Дополнительные элементы таблицы
  • Практическая работа по теме

Модуль 8. Встраивание внешних данных при помощи фрейма

  • История фреймов
  • Встраиваемые фреймы
  • Фреймы и гиперссылки
  • Практическая работа по теме

Модуль 9. Передача пользовательских данных при помощи формы

  • Что такое веб-формы?
  • Элемент form и его атрибуты
  • Элементы формы: текстовые поля и кнопки
  • Элементы формы: элементы выбора
  • Дополнительные атрибуты элементов формы
  • Практическая работа по теме

Модуль 10. Использование CSS для макетирования

  • Оформление границ элемента
  • Внутренние отступы элемента
  • Наружные отступы элемента
  • Размеры элемента
  • Плавающие элементы
  • Видимость элемента
  • Практическая работа по теме

Модуль 11. Дополнительные возможности HTML и CSS

  • Практическая работа для закрепления изученных тем
  • Стили для различных типов носителей
  • Свойства курсора
  • Встраивание аудио- и видео-файлов
  • Практическая работа по теме

Модуль 12. Мета-информация на странице

  • Использование мета-информации
  • Элемент meta и его атрибуты
  • Поясняющая мета-информация
  • Мета-информация для роботов
  • Эмуляция заголовков ответа сервера

Модуль 13. Выбор хостинга и поддержка сайта

  • Понятие хостинга
  • Поиск хостера
  • Услуги хостера
  • Использование FTP-клиента
  • Доступ к ftp-серверу через проводник Windows

Модуль 14. Что дальше?

  • Обзор HTML5 API
  • Тонкая настройка сайта на стороне сервера
  • Динамические элементы на странице
  • Динамическое создание контента на сервере
  • Современные способы предоставления информации

Модуль 15. Веб-стандарты и их поддержка

  • Стандарты W3C. Документация
  • DOCTYPE
  • Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах
  • Протокол HTTP

Модуль 16. Элементы и атрибуты HTML5 и структура страницы

  • Секции, выноски, статьи, навигационные, «шапка», «подвал»
  • Элементы форм и их атрибуты

Модуль 17. Эффективное использование инструментов разработки веб-страниц

  • Инструментарий разработчика:, FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper
  • Составление и анализ требований к вёрстке веб-страниц . Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц
  • Практическая работа: построение структуры страницы с использованием вспомогательных программ

Модуль 18. Селекторы в HTML5

  • Селекторы перешедшие из HTML4/xHTML
  • Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML
  • Ролловеры, спрайты
  • Практическая работа: использование специфических селекторов при верстке страницы

Модуль 19. Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов

  • Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности
  • Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей
  • Семинар: Учет удобства использования сайтов

Модуль 20. Продвинутые технологии HTML и CSS

  • Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление «подвала» внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display
  • Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание «фреймообразной» вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y
  • Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание «фреймообразной» вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат
  • Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах
  • Практическая работа: использование на практике CSS-свойств позиционирования, отображения и др

Модуль 21. Совместимость веб-страниц с различными браузерами

  • Условные комментарии
  • Скрипты для поддержки селекторов и изменения поведения старых браузеров
  • Программы эмуляторы старых версий IE
  • Фильтры
  • Практическая работа: использование кроссбраузерной верстки

Модуль 22. Использование свойств CSS2 и CSS3

  • Градиенты, анимация, трансформация (2D и 3D), переходы
  • Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
  • @font-face (веб-шрифты), текстовые эффекты
  • Многоколоночная верстка
  • Работа с фоном (+градиенты)
  • Закругление углов, модель Flex-блоков
  • Определение технологий, поддерживаемых браузером
  • Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

Модуль 23. Верстка макета

  • Принципы нарезки макета из psd-файла
  • Выбор размеров и вариантов верстки
  • Верстка
  • Практическая работа: нарезка макета страницы
  • Практическая работа: верстка страницы по заданному макету

Модуль 24. Типовые решения

  • CSS-фреймворки
  • Динамический CSS (на примере SCSS)
  • Шаблоны CMS
  • Решения на JavaScript

 

СТОИМОСТЬ И ДЕТАЛИ НАБОРА

ДЕТАЛИ НАБОРА

  • Продолжительность:  3 месяца
  • Периодичность: 2 раза в неделю
  • Длительность занятия: 2 часа
  • Время: вечернее
  • Размер группы: 6–10 человек

  • Стоимость месяца обучения — 1800 грн
  • Студентам скидка — 10%
  • Оплата более 2-х месяцев скидка — 10%
  • Скидка выпускникам INIT, BrainBasket — 50%