Front-end Core - теория и практика разработки веб-страниц

Базовый курс Front-end (HTML, CSS, Javascipt)

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

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

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

Вт с 18:30-20:30 и Сб с 11:00-13:00

Курсы Front-end Харьков

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

12 недель, 2 ч/2 раза в нед.+ 2 ч. лекция по поиску работы в IT

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

Стартовый уровень знаний: общие знания в IT, уверенное владение ПК

Результат: Junior Markup Developer (верстальщик)

По окончанию курса выдается свидетельство о завершении обучения

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

Курс верстки от Телесенс Академии – это первый шаг новичка в веб-технологии.
Курс нацелен на изучение инструментов для верстки веб-приложений, а именно: HTML, CSS, Javascipt, которые активно используются в веб-разработке.
Навыки, полученные после успешного прохождения курса, позволят вам создавать красивые и адаптивные веб-странички, успешно претендовать на позицию Junior Markup Developer (верстальщика) в IT компании.

Неделя 1
1. IP-адрес, сервер и веб-сервер, «виртуальные хосты».
2. Протоколы HTTP/1.1, HTTP/2 и HTTPS.

Инструменты вёрстки:
3. Редакторы кода, инспекторы, полезные веб-сервисы.
4. Системы контроля версий.

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

Качественная разметка и стили кодирования
8. Логичная разметка: примеры и антипримеры.
9. Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
10. Модульность разметки или использование «пространств имён».
11. Когда использовать.
12. Кодгайды для разметки.


Обзор основных графических редакторов
13. Настройка интерфейса.
14. Работа со слоями, типы слоeв.
15. Получение параметров текста.
16. Измерение размеров блоков, отступов, получение информации о цвете.
17. Получение параметров сложных декоративных эффектов: тени, градиенты и прочее.

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

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

Поток и блочная модель документа
26. Понятие сетки и потока документа.
27. Блочные и строчные элементы и их особенности.
28. Свойства блочной модели: размеры, рамки и отступы.
29. Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.
30. Свойство display. Управление типом элементов.
31. Создание сеток на флексбоксах.

Введение во флексбокс
32. Флекс-контейнер, флекс-элементы, флекс-оси.
33. Алгоритм расчёта размеров флекс-элементов.
34. Выравнивание и распределение флекс-элементов вдоль осей.
35. Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
36. Особенности флексбоксов при создании сеток.

Неделя 4

Позиционирование
37. Относительное позиционирование.
38. Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
39. Фиксированное позиционирование.
40. Управление порядком слоёв.
Приёмы создания элементов интерфейса.

Блочно-строчные элементы и их особенности
41. Особенности флексбоксов при создании элементов интерфейсов.
42. Типовой приём «псевдоэлемент с абсолютным позиционированием».
43. Использование CSS-графики для создания декоративных элементов.

Неделя 5

JavaScript
44. Типовые случаи использования JavaScript.
45. Как найти любой элемент на странице.
46. Как реагировать на события, происходящие на странице.
47. Как менять CSS-стили у элементов.
48. Как использовать анимацию на странице

Лучшие практики
49. Прогрессивное улучшение.
50. Постепенная деградация.
51. Реальное тестирование.
52. Инспекторы, эмуляторы, виртуальные машины.
53. Минификация, сжатие, оптимизация.
54. Эмпатия, приоритеты, сначала контент.
55. Развитие в профессии.
56. Как не потерять актуальность знаний.
57. Обмен знаниями, события, выступления.
58. Собеседования резюме

РАСПИСАНИЕ И НАЛИЧИЕ МЕСТ В ГРУППЕ
Время Дни занятий Старт Количество мест Стоимость
18:30-20:30; 11:00-13:00 Вт/Сб 27 ноября 2018 2 6000 грн.

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

Обратите внимание!

Для учебы на занятиях вам необходимо брать свой ноутбук поддерживающий графический редактор Adobe Photoshop

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

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

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

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

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

научитесь базовым навыкам работы с Adobe Photoshop, Avocode

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

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

научитесь основам использования JavaScript и узнаете на примерах лучшие практики

IT — это тренд! Мир высоких технологий и больших зарплат!

от 300$

Junior Markup Developer (опыт до 0,5 года)

стартовая оплата труда в Харькове по данным сайта DOU

от 500$

Junior Markup Developer (опыт 1-3 года)

стартовая оплата труда в Харькове по данным сайта DOU

от 1000$

Senior Markup Developer (опыт от 3 лет)

стартовая оплата труда в Харькове по данным сайта DOU

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

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

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

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

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