Front-end - одна из самых востребованных профессий в Украине !
Кол-во ак.ч. 48
Время: Занятия в утреннее (10.00-12.30), дневное (14.00-16.30) или вечернее (18.30-21.00) время; группа выходного дня по субботам
Cрок обучения в группе 2 месяца
Цена 4100,00 грн за 1 мес.
По окончании курса выдается сертификат
Front-end разработка – это создание пользовательского интерфейса, то есть клиентской части веб-сайта.
Во время обучения Вы получите начальные навыки работы в HTML и CSS, а также научитесь применять интерактивные возможности последних версий – HTML 5 и CSS 3.
В рамках курса ведется работа над проектом «Создание веб-сайта. Наполнение сайта текстом, изображениями и видео».
Вы изучите основы языка разметки HTML, способы применения CSS и основы построения сайтов. Вы сможете сами создавать страницы, проектировать навигационное меню и другие элементы сайта. Научитесь грамотно размещать изображения и текстовые блоки на странице. Сможете самостоятельно работать со стилями в CSS, использовать фреймы и мета-информацию. А также получите практические советы, как выбрать хостинг и техподдержку сайта.
Наши слушатели научатся:
- создавать web-страницы, содержащие все необходимые компоненты: текстовое наполнение, гиперссылки, графическое наполнение;
- самостоятельно создавать полноценный сайт путем определения иерархии взаимодействия web-страниц между собой;
- грамотно разрабатывать интерактивные формы для взаимодействия пользователя с web-сервером;
- эффективно использовать возможности каскадных таблиц стилей CSS для повышения функциональности и улучшения оформления web-сайта;
- использовать технологию фреймов;
- узнают о новых возможностях HTML 5 и CSS 3.
В курсе много практической информации, которую можно будет сразу использовать на реальных проектах.
Работы наших выпускников
Наши преподаватели
Отзывы об обучении
Темы занятий:
Тема 1. Введение и основные понятия . Основы разработки web-ресурсов. Модели информационной архитектуры. Принципы «юзабилити». Понятие web-интерфейса. Основные элементы web-страницы и способы их компоновки. Разработка структуры сайта и системы навигации. Обзор форматов web-графики. Стандарты HTML5 и CSS3. Стандарты разработки HTML5-документов. Meta-теги, keywords (элементы поисковой оптимизации).
Методы верстки web-страниц
HTML5 структура страницы
Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются
Структура HTML5-документа. Понятие элементов и атрибутов
Зачем нужна инструкция <!DOCTYPE>
Что такое тег? Типы тегов. Теги - header, nav, section, article,aside,footer и др. Правила оформления HTML5-документа
Использование комментариев.
Создание HTML5-документа в программе Sublime Text 3
Возможности программы Sublime Text 3: Основы работы. Управление web-сайтом. Редактирование html5-кода
Подбор ключевых слов для своего сайта – с помощью сервисов http://wordstat.yandex.ua/ https://adwords.google.ru/KeywordPlanner
Анализ конкурентов
Создание новых файлов и папок.
Тема 2. Создание гиперссылок , таблиц и списков. Покупка домена и хостинга. Использование программы FilleZilla.
Структурирование информации на WEB-странице при помощи списков. Типы списков
Структурирование информации на странице при помощи списков и таблиц
Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML5
Создание гиперссылок с помощью элемента A и его атрибутов. Типы ссылок
Размещение иллюстрации на web-странице. Типы файлов иллюстраций. Элемент IMG и его атрибуты
Распределение иллюстраций по страницам сайта: приемы и советы
Добавление иллюстраций и ссылок на сайты
Тема 3. CSS3. Технология CSS, её версии и поддержка браузерами.
Понятие, область применения и принципы построения каскадных таблиц стилей (CSS).
Использование CSS3 на веб-страницах, способы задания стилей и оформления отдельных элементов.
Обзор инструкций CSS3 для оформления сайтов.
CSS-свойства: определение, способы задания, единицы измерения, использование для оформления html-элементов. Box model(модель коробки или боксовая модель)
Виды CSS - внутренние стили глобальные или встроенные внешние или связанные
Определение классов и идентификаторов
CSS-селекторы . Блочная модель. Управление типами элементов – свойство display (block, inline, inline-block…)
Создание и управление таблицами стилей в программе Sublime Text 3
Тема 4. Алгоритм создания CSS сайта Горизонтальные и вертикальные CSS меню
Верстка web-страниц со стандартными элементами - шапка, навигация, содержание и подвал.
Создание меню с помощью маркированных списков.
Введение понятия псевдоклассов.
Определение float для позиционирования элементов меню.
Сознание веб страничек и связей между ними.
Хостинг. HTML-элементы: виды, параметры...
Тема 5. Работа с текстом. Механизмы представления текстовой информации: оформление, выравнивание, отступы и др.
Использование CSS-свойств: Особенности отображения текста на web-странице.
CSS-свойства, используемые для оформления текста.
Примеры работы со шрифтами, общие способы и методы применения шрифтов, их характеристики и атрибуты.
Тема 6. Float, background, position, z-index, flex-box
Определение, основные свойства.
Создание слоев в Sublime Text 3. Элементы DIV и SPAN.
Особенности разработки элементов макетов для блочной верстки.
Использование свойства float: выравнивание изображений, реализация эффекта таблицы.
Способы позиционирования элементов.
Абсолютное и относительное позиционирование.
Точное размещение блочных элементов HTML-разметки в окне браузера: размеры блока, абсолютные и относительные координаты.
Наложение и вложение слоев, свойство z-index.
Управление видимостью слоя и видимостью содержания слоя.
Тема 7. Способы верстки RWD сайтов при помощи CSS.
Адаптивный дизайн и создание мобильных сайтов. Изучаем media-запросы
Что что такое адаптивный дизайн и насколько важно сегодня адаптировать свои сайты под различные устройства
Что такое медиа-запросы, как их корректно составлять и использовать для выбора разных CSS-стилей в зависимости от особенностей пользовательского дисплея или устройства, таких как ширина области просмотра и разрешение экрана.
Тема 8. Программирование на JavaScript
Теоретические знания и практические навыки для эффективного использования современных клиентских Web-технологий на примере JavaScript.
Особенности синтаксиса JavaScript, объектно-ориентированный подход в программировании на JavaScript и его основные встроенные функции.
Создавание динамических меню, закладок, акордионов, галлерей и других элементов страниц.
Сценарии в HTML, язык JavaScript
Внедрение сценариев в HTML документ
Синтаксис
Переменные и типы данных
Написание первого сценария – таблицы умножения
Условные операторы
Операторы циклов
Оператор обработки исключений использование циклов
Создание фотогалерей
Тема 9. Функции и объекты JavaScript
Описание и вызов функций
Аргументы функций
Возврат значений
Область видимости переменных
Рекурсивный вызов функций
Использование функций
Объекты JavaScript
Объекты типов данных
Массивы
использование объектов
Тема 10. Шаблоны создания объектов и повторное использование кода
Шаблоны для уменьшения количества глобальных переменных: модуль, открытие модуля, изолированное пространство имен
Классические шаблоны наследования
Современные шаблоны наследования
Тема 11. Шаблоны проектирования в JavaScript
Что такое шаблон проектирования или паттерн? DHTML DOM
Разновидности шаблонов проектирования Объекты DOM
Примечание о классах в JavaScript Свойства и методы объектов DOM
Типы данных в JavaScript Манипуляция свойствами элементов
Порождающие шаблоны
Строительный шаблон (Builder pattern)
Прототипный шаблон (Prototype pattern)
Структурные шаблоны
Тема 12. Шаблоны работы с DOM
Шаблоны и антишаблоны работы с DOM
Как замерять скорость выполнения участка JavaScript кода
Как правильно подключить сценарий к HTML странице
Как оптимизировать страницу и ускорить ее загрузку
Тема 13. Начало работы с bootstrap
Загрузка Bootstrap файлов
Bootstrap Grid System
Работа в Bootstrap Grid System
Создать макеты с Bootstrap Grid System
видимость элемента в зависимости от размеров экрана устройства
Создание Фиксированный макет с Bootstrap
Создание макета жидкости с Bootstrap
Создание Отзывчивый макет с Bootstrap
Небольшое устройство (таблетка)
Дополнительное небольшое устройство (телефон)
параграфы
Создание простой таблицы с Twitter Bootstrap
Используйте Контекстная классы в Bootstrap таблице
Twitter Bootstrap Список
Создать Twitter Bootstrap Forms.
Создание Вертикальная форма Макет
Создание горизонтального макет формы
Статическая форма управления
Создание Инлайн Форма Макет
Twitter Bootstrap Изображения
Twitter Bootstrap Миниатюры
Twitter Bootstrap медиа-объектов
Twitter Bootstrap Nav
Создание выпадающего меню с Twitter Bootstrap Счета и таблетки
Twitter Bootstrap NavBar
Создание фиксированных NavBar с Twitter Bootstrap
Тема 14. Разработка сайта на Twitter Bootstrap 3
установить- HTML документ с необходимыми файлами
Bootstrap заголовок и отзывчивый навигация
Добавление баннера на ваш загрузочный шаблона
Использование системы сетки Bootstrap для создания контента область
Создание загрузочного отзывчивый колонтитул..
Тема 15. CSS пост/препроцессоры SASS/LESS
переменные
математика
функции
вложенность
импортирование
наследование
миксины
директива функции
Тема 16. Система контроля версий GIT (SVN), наличие GitHub аккаунта с примерами кода
1.Устанавливаем Git.
2. Создаем репозиторий Git.
3. Устанавливаем SmartGit для работы с репзиторием.
4. Основы Работа с репозиторием Git.
5. Создаем проект для работы с репозиторием.
6. Добавляем первый файл в локальный репозиторий.
7. Вносим изменение в локальный репозиторий.
8. Добавляем строки в файл.
9. Изменяем строки в файле.
10. Удаляем строки из файла.
11. Отменяем изменения до загрузки в локальный репозиторий.
12. Добавляем новые файлы в репозиторий.
13. Удаляем файл из репозитория.
14. Просматриваем историю изменений репозитория.
15. Изменяем комментарий коммита.
16. Отменяем последний коммит.
17. Создаем новую ветку.
18. Новая ветка относительно последнего коммита.
19. Новая ветка относительно выбранного коммита.
20. Удаляем ветку.
21. Объединяем ветки.
22. Конфликты и их разрешение.
23. Добавляем выбранный коммит из одной ветки в другую.
24. Rebase или как упростить историю коммитов.
25. Работа с удаленным репозиторием.
26. Настраиваем связь между сервером и клиентом по SSH.
27. Клонируем репозиторий с ЭВМ-сервера на ЭВМ-клиент.
28. Основы работы с удаленным репозиторием.
По окончании курса Фронтенд –разработчик (фронт енд менеджер) слушатель будет иметь проект готового сайта, выполненного с учетом использования передовых технологий в WEB. Обучение будет проводиться достаточно интенсивно, научится создавать веб-сайты не только красивыми, но и динамичными.