Курс Front-End (Angular)

HTML5 + CSS3 + JS = NaN?

Бесплатная консультация

Поможем, подскажем и найдем Ваше направление в сфере IT.

Инструктор

Николай Дигтярь
Николай Дигтярь
Senior Software Engineer
5+ лет в IT.
Работает в Trade Republic.
Обожает настольный теннис и пить кофе по ночам.

О чем курс

Front-End разработка - это одно из самых востребованных направлений в современной IT индустрии! Каждому сайту, веб-приложению и мобильному приложению нужно "лицо", которое будет правильно работать на всех возможных устройствах: начиная от вашего домашнего компьютера и заканчивая смартфоном. Именно Front-End разработчики превращают макет дизайна в "живой" сайт. Все то, что вы видите на сайте или в мобильном приложении, называется интерфейсом пользователя. Front-End разработчик с помощью программного кода и языков разметки воплощает в жизнь креативные идеи веб-дизайнеров!

В своей работе Front-End разработчики используют: язык разметки HTML, каскадные таблицы стилей CSS, язык программирования JavaScript и фреймворки, которые с ним связаны.

Поэтому во время онлайн-обучения мы подробно останавливаемся на изучении каждого из этих блоков.

Одной из наиболее популярных и востребованных библиотек для Front-End разработки сейчас является Angular. С помощью этой библиотеки можно создавать не только быстрые и многофункциональные сайты, но и мобильные приложения. Подробнее мы познакомимся с особенностями этой библиотеки на курсе!
Описание курса на сайте Agentur für Arbeit

Курс идеально подойдет для

Тех, кто хочет научиться создавать сайты face-1
Веб-дизайнеров face-2
Графических дизайнеров face-3
Контент-менеджеров face-4

Программа курса Front-End (Angular)

Модуль 1: Верстка

Знакомство с HTML.
  • Роль Front-End в мире IT. Взаимодействие "фронта" с "беком" и дизайнером.
  • Этапы жизни проекта.
  • Инструменты для разработки (редактор кода, Photoshop, devTools).
  • Рендеринг страницы.
  • Базовые принципы верстки. Кроссбраузерность и валидность - что это и почему это важно.
  • Браузеры.
  • Структура HTML-документа.
  • Взаимоотношения блоков: вложенный, дочерний, соседний, родительский.
Знакомство с CSS.
  • Что такое CSS.
  • Способы задания стилей.
  • Селекторы CSS.
  • Каскад ("вес" селекторов).
  • Комбинирование и группировка селекторов. Иерархия селекторов. Наследование.
  • Встроенные стили браузеров. CSS reset.
  • Блочная модель.
  • Свойство border.
  • Свойство display.
  • Свойство float.
  • Свойство overflow.
  • Свойство transition.
  • Свойство transform.
  • Анимация с помощью CSS3.
  • Позиционирование.
  • CSS3 Flexbox.
Responsive дизайн.
  • Разница между Adaptive дизайн и Responsive дизайн.
  • Виды "девайсов".
  • CSS-инструменты и настройки для Responsive дизайн.
  • Медиа-запросы CSS.
  • CSS Breakpoints (контрольные точки).
  • Навигация на сайте.
  • Pixel Perfect дизайн.
Практическая верстка.
  • Social networks с помощью SVG-иконок.
  • Шрифты и их подключение.
  • Практическая верстка.
Git.
  • Системы контроля версий.
  • Команда init.
  • Статусы файлов, команды status, add, commit, config, log.
  • Работа с удаленным репозиторием (GitHub), SSH ключи.
  • Основные команды.
Linux.
  • Что такое оперецаионная система.
  • Автоматизация, скрптиниг, сетевын инструменты (ssh, rsync, ftp, telnet).
  • Сети.
  • Docker.
  • Docker-Compose.
Bootstrap.
  • Framework. Что? Зачем? Почему?
  • Установка и настройка Bootstrap.
  • Компоненты Bootstrap.
  • Утилиты (Utilities).

Модуль 2: JavaScript

Что такое JavaScript?
  • ECMAScript.
  • Модель документа (DOM).
  • Автоматическое управление памятью.
  • Отсутствие строгой типизации данных.
  • Отсутствие средств для ввода и вывода информации.
  • Отсутствие доступа к функциям операционной системы.
  • Обработка действий пользователя и событий браузера.
Начало работы. Основы JavaScript.
  • Приведение типов.
  • Функции.
  • Методы.
  • Интегрирация JavaScript в веб страницы.
Типы данных.
  • Number (число).
  • String (строка).
  • Boolean (логичный тип да/нет).
  • Null (пустой обьект).
  • Undefined (неопределённый тип).
  • Object (обьект).
  • Array (массив).
Строки (String).
  • Создание строки.
  • Перенос строки.
  • Использование переменных.
  • Экранирование символов.
  • Складывание и конкатенация.
  • Массив.
  • Методы.
Числа (Number).
  • NaN и Infinity.
  • Методы.
  • Библиотека Math.
Объекты (Object).
  • Создание объектов.
  • Использование объектов.
  • Копирование объектов.
  • Дескрипторы свойств объектов.
  • Структура дескриптора.
  • Класс Object.
  • Прототипы объектов.
  • Прототипное наследование.
Массивы (Array).
  • Создание массива.
  • Доступ к элементам массива.
  • Изменение массива.
  • Методы массивов.
Переменные.
  • Объявление переменных.
  • Именование переменных.
Операторы условий.
  • Оператор условия if.
  • Оператор условия switch.
  • Тернарный оператор условия.
Циклы.
  • Цикл while.
  • Цикл do...while.
  • Цикл for.
  • Цикл for...of.
  • Цикл for...in.
  • Использование continue и break.
Функции.
  • Объявление и вызов функции.
  • Аргументы функции.
  • Ключевое слово return.
  • Стрелочные функции.
  • Контекст функции.
  • Область видимости функции.
Дата и время.
  • ISO стандрат для даты и времени.
  • Методы Date.
ООП.
  • Что такое ООП?
  • Классы в ООП.
  • Ассоциации.
  • Наследование.
  • Перегрузка.
  • Неуместное применение.
  • Абстрактные классы.
  • Полиморфизм.
  • Инкапсуляция.
  • Аксессоры (геттеры и сеттеры).
  • Абстракция.
  • Уровень абстракции.
Замыкание. Таймеры.
  • setTimeout().
  • setInterval().
  • setImmediate().
DOM.
  • Получение элементов DOM.
  • Изменение элементов DOM.
  • Удаление элементов из DOM.
Local Storage и Session Storage.
  • Promise - async /await.
  • Exceptions.
  • Fetch API.
  • Обьект window.

Модуль 3: Angular

Введение в Angular
  • Знакомство с фреймворком
  • Основные преимущества
  • Знакомство и работа с TypeScript
Первое Angular-приложение
  • Структура фреймворка
  • Описание и функционал основных модулей
  • Работа с CLI
  • Как подключать переменные и функции
Основы работы с DOM в Angular
  • Компоненты
  • Директивы
  • Pipes
  • Шаблонизации
  • Основы создания Angular Web Components — Angular Elements
Основы работы с данными в Angular
  • Декораторы
  • Сервисы
  • Привязка данных
  • Хранение данных
  • Взаимодействие между компонентами
  • Работа с HttpClient
Работа с формами в Angular
  • Формы в Angular
  • Валидация, настройка форм
  • Взятие данных из разных типов форм
  • Реактивные формы
Основные жизненные циклы приложений
  • ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy
  • constructor
Основы работы с HTTP
  • Разбор модуля HttpClient API
  • Интерфейсы для работы со всеми методами HTTP запросов
  • Создание запросов на сервер с использованием Promises
  • Краткое введение в Observables

Модуль 4: Дипломная работа

Описание.
  • Дипломная работа включает в себя создание сайта. Сайт должен содержать: регистрацию и логин, индивидуальный кабинет (зависит от конкретного проекта), роутинг, защищенный роутинг при наличии ролей на бэке, загрузка файлов, структурное расположение кода на диске, один из фреймворков или своя верстка: Bootstrap, Ant Design. Структурная верстка, разбиение на компоненты по сути. Хранилище, Redux + несколько редьюсеров, серверное взаимодействие и длительные сценарии: actionCreator + Thunk или Saga, работа с бэком.
Защита дипломной работы.
  • Необходимо сдать практику, которая предусматривает демонстрацию рабочего проекта, ответы на любые вопросы связанные с проектом, демонстрацию кода по требованию. И отдельно сдается теория по всей программе курса и по всем темам. Теория сдается в формате собеседования на Junior Developer позицию, стороннему, независимому эксперту. За оба блока можно получить от 0 до 100 баллов.

Ваше резюме после прохождения курса

Junior Front-End Developer
Зарплата от
45 000 евро в год
Профессиональные навыки:
  • HTML & CSS
  • Adaptive + Responsive designs
  • Git
  • JavaScript (DOM API, ES6+)
  • REST API
  • Angular
  • KISS, DRY, SOLID
  • SCSS, SASS
  • TypeScript
  • AJAX & HTTP
  • ООП

Так будет выглядеть твой электронный сертификат

Ты сможешь добавить этот сертификат себе в CV
Certificate Front-End (Angular)

Инструменты, которые ты освоишь

HTML
CSS
Bootstrap
JavaScript
Git
GitHub
Linux
Angular
CodePen
HTML
Язык гипертекстовой разметки страниц, который применяется для разметки документов для просмотра веб-страниц в браузере. Его используют для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт или страницу.
CSS
CSS (Cascading Style Sheets) или каскадные таблицы стилей - язык описания внешнего вида документа, написанного с помощью языка разметки. Обычно используется для описания оформления веб-страниц, написанных на языке разметки HTML.
Bootstrap
Bootstrap - свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript расширения.
JavaScript
JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript. JavaScript обычно используется как встроенный язык для программного доступа к объектам приложений.
Git
Git - это распределенная система контроля версий, которая позволяет отслеживать историю разработки ПО и совместно работать над сложными проектами из любой точки мира.
GitHub
GitHub (гитхаб) это онлайн-сервис хранения и синхронизации кода для программистов и разработчиков приложений. Главной целью этого сервиса является поддержка совместной разработки проектов и контроля версий.
Linux
Linux - это семейство операционных систем (ОС), работающих на основе одноименного ядра. Нет ни одной операционной системы Linux, как, например, Windows или MacOS. Есть множество дистрибутивов (набор файлов, необходимые для установки ПО), выполняющих конкретные задачи.
Angular
Angular - это открытый фронтенд-фреймворк для веб-приложений, разработанный Google, предназначенный для эффективной разработки динамичных и масштабируемых одностраничных приложений. С функциями, такими как декларативный пользовательский интерфейс, двустороннее связывание данных и модульная архитектура, Angular упрощает разработку, способствует организации кода и улучшает его поддерживаемость. Его мощные инструменты, включая систему внедрения зависимостей и встроенный маршрутизатор, делают его популярным выбором для создания надежных и функциональных клиентских приложений.
CodePen
CodePen - интернет-сообщество, созданное для тестирования и показа сниппетов на основе HTML, CSS и JavaScript. Сообщество было создано в 2012 году разработчиками Алексом Вазкуезом, Тимом Сабатом и веб-дизайнером Крисом Койером.

Зарплатные ожидания

Возможность карьерного роста с увеличением заработной платы как магнит притягивает новых специалистов в сферу IT.

Чтобы достичь заработка от 85 000 евро (брутто) в год и выше, нужно пройти путь от Junior до Senior. И этот путь может быть достаточно стремительным - все зависит только от тебя!
Junior
4000 евро / месяц
Middle
5500 евро / месяц
Senior
7000 евро / месяц
На позиции Junior только одна месячная зарплата в 4000 евро (брутто) позволит тебе полностью покрыть шестимесячное обучение на нашем курсе. Так что деньги вернутся к тебе очень быстро!
Опыт: начало работы
Когда вы дорастете до Middle специалиста, ваш заработок будет составлять уже от 5500 евро (брутто) в месяц и выше! Добиться такого результата можно лишь за 2 года усердной работы и постоянного саморазвития.
Опыт: 2-3 года
Senior - это специалист, который зарабатывает от 7000 евро (брутто) в месяц и выше - зависит от типа компании, опыта работы и ваших целей. Верхнюю границу заработка и карьерной лестницы определяют только ваши амбиции - поэтому не останавливайтесь на достигнутом!
Опыт: 4-5 лет

Бесплатная консультация

Поможем, подскажем и найдем Ваше направление в сфере IT.

Администратор

Никита

Телефон

+49 152 5263 7381

Телеграм

Написать в Телеграм

Все готово!

Поздравляем! Вы успешно записались на нашу бесплатную консультацию. Наши сотрудники свяжутся с Вами в ближайшее время для уточнения деталей. Приготовьтесь расширить свои знания и навыки в области IT вместе с нами в Codillas Academy!

О нет!

Приносим извинения за причиненные неудобства. При отправке контактной формы для бесплатной консультации произошла ошибка. Пожалуйста, перепроверьте информацию и повторите попытку. Для получения помощи, пожалуйста, свяжитесь с нашей службой поддержки по адресу info@codillas.com. Мы ценим ваше понимание и с нетерпением ждем возможности помочь Вам в вашем путешествии по изучению IT.

Записаться на IT-курсы

Поможем, подскажем и найдем Ваше направление в сфере IT.

Администратор

Никита

Телефон

+49 152 5263 7381

Эл. почта

hello@codillas.academy

Все готово!

Поздравляем! Вы успешно записались на наш курс по информационным технологиям. Наша команда свяжется с Вами в ближайшее время и сообщит дальнейшие подробности. Приготовьтесь расширить свои знания и навыки в области IT вместе с нами в Codillas Academy!

О нет!

Приносим извинения за причиненные неудобства. При отправке вашей контактной формы для IT курса произошла ошибка. Пожалуйста, перепроверьте информацию и повторите попытку. За помощью, пожалуйста, обращайтесь в нашу службу поддержки по адресу info@codillas.com. Мы ценим ваше понимание и с нетерпением ждем возможности помочь Вам на вашем пути обучения IT.