Front-end разработка и веб-дизайн

Курс для начинающих, которые хотят изучать программирование.
Группа формируется с учетом предварительных знаний.
Предварительные необходимые знания: базовая компьютерная подготовка – Windows и Интернет. Интерес к программированию.

Целевая группа: курс предназначен для тех, кто желает научиться эффективно использовать возможности программы Excel.

Цель курса:

• Приобрести практические навыки фронт-энд дизайнера
• Получить практические знания о специальных инструментах фронт-энд разработчика
• Получить практические знания верстки HTML5 и CSS3
• Научиться понимать и использовать JavaScript и библиотеки jQuery в проектах
• Научиться эффективно использовать готовые алгоритмы и решения на основе bootstrap фреймворка

Продолжительность: 120 академических часов. Аудиторная и практическая работа в классе с преподавателем 60 академических часа. В процессе обучения необходимо не менее 60-ти часов самостоятельной работы.
Аттестация проводится в виде теста на последнем занятии или на основании оценок практических работ, выполняемых во время обучения на курсе.

Как оцениваются знания ученика: по окончании обучения на курсе проводится итоговая аттестация. Аттестация проводится в виде теста на последнем занятии.

Программа:

В начале курса обговаривается рапределение нагрузки так, чтобы затронуть наиболее проблемные места в зависимости от общей начальной подготовки.

• Базовые знания GIT (4 академических часа)
  • Инициализация git проекта
  • Создание проекта на gitlab.com и github.com
  • Сценарий исправления конфликтов при разработке
  • Создание веток и их слияние
  • Публикация проекта на центральном сервере gitlab.com или github.com
• Базовые знания HTML (2 академических часа)
  • Теги: списки, таблицы, формы
  • Стили: классы, id (связывание тегов с CSS)
• Базовые знания CSS (2 академических часа)
  • Синтаксис языка стилей
  • Манипулирование как одним HTML элементом тая и несколькими одновременно
  • Форматирование объектов: Цвета, шрифт, отступы, прозрачность, тени, геометрические фигуры (color, font-face, margin, padding, float, shadow, geometry …)
  • Создание скелета страницы и Структура объектов (Header, section, aside, footer, display, float…)
  • Адаптивная верстка (responsive design) – мобильный, планшет, монитор (разные разрешения)
• Практические уроки по адаптивной верстке (8 академических часа)
  • Задание 1 (с учителем): создать верстку страницы по картинке
  • Задание 2 (с учителем): создать скелет страницы: меню, элементы дизайна, и т.д.
• Базовые знания Javascript (8 академических часов)
  • Переменные (var, let), типы, преобразование типов
  • Функции, использование функций
  • Массивы, объекты (json формат)
  • Циклы (for, foreach), циклы для объектов
  • События, связывание событий и html элементов
• Практические уроки по Javascript (8 академических часа)
  • Задание 1 (с учителем): создание аналоговых часов (html, css, javascript)
  • Задание 2 (с учителем): создание лендинга и работа с памятью и сессиями (html, css, javascript)
• jQuery использование в приложениях (4 академических часов)
  • DOM манипуляции, эффекты и анимация
  • События и их привязка к HTML элементам
  • Использование plug-in-ов
  • Создание своих приложений
  • AJAX
  • API (RESTful), использование API и JSON для своего приложения
• Практические уроки по использованию jQuery (4 академических часа)
  • Задание 1 (с учителем): использование эффектов
  • Задание 2 (с учителем): потребление сервисов API и использование на своей странице
• Bootstrap 4 возможности и синтаксис (2 академических часа)
  • Установка Bootstrap 4 в html-страницу или веб-сайт (также установка через NodeJS и NPM)
  • Как верстать блоки на сайте с помощью Grid System
  • Flexbox и позиционирование блоков
  • Компоненты
• Практические уроки Bootstrap 4 (8 часов)
  • Задание 1 (с учителем): создать галерею изображений или товаров на сайте
  • Задание 2 (с учителем): Программирование поведения компонентов с помощью Javascript и jQuery
  • Задание 3 (с учителем): Как сделать модальное окно на сайте
  • Задание 4 (с учителем): Как создавать верстку страниц с помощью Bootstrap 4
• TypeScript как основа для Angular (4 академических часа)
  • Быстрый старт. Экосистема TypeScript.
  • Система типизации TypeScript: области декларации, основные типы и структуры данных, интерфейсы и их применение
  • Обобщения (Generics) и типизация сложных структур, условные типы (Conditional
  • Types) и сопоставленные типы (Mapped Types)
  • Функции и классы в TypeScript: особенности типизации и перегрузка функций.
  • ООП в TypeScript (модификаторы доступа, safe и hard privacy, абстрактные классы, миксины …)
  • Декораторы и аннотации
• Практические уроки TypeScript (2 академических часа)
  • Задание 1 (с учителем): Пишем свои декораторы и аннотации (логирование, обработка ошибок, runtime проверка типа данных, валидация …).
• Sass как основа для Angular (6 академических часа)
  • Зачем использовать Sass/SCSS вместо CSS?
  • Препроцессор Sass
  • Синтаксис: Пререквизиты, Переменные, Вложенные правила, Амперсанд
  • Миксины (они же примеси)
  • Арифметические операции: сложение и вычитание, умножение, деление, остаток
  • Операторы сравнения: Логические операторы, Строки
  • Операторы управления потоками: if(), @if
  • Директива @for, @each, @while
  • Функции в Sass/SCSS
  • Тригонометрия
• Angular основы и уровень не начинающего специалиста (10 академических часов)
  • Компоненты
  • Стили
  • Шаблоны
  • Привязка данных и событий
  • Строковая интерполяция
  • Директивы: ng*: ngIf, ngFor, ngStyle, ngClass…
  • Пайпы (pipes)
  • Внедрение зависимостей
  • Сервисы
  • Маршрутизация
  • Модули
  • Реактивные формы
  • Шаблон управляемых форм
  • HTTP-запросы

В конце курса обучающийся:

• Умеет создавать дизайн сайта используя приемы фронт-энд
• Умеет верстать сайт с помощью HTML5 и CSS3
• Умеет использовать фреймворк Bootstrap 4
• Умеет использовать специальные инструменты фронт-энд разработчика
• Умеет писать код на JavaScript и использовать библиотеку jQuery

Как оцениваются знания ученика:
После разбора теоретической и практической части ученик должен сделать контрольную работу. Контрольная работа состоит из следующих действий:

• Ученику дается картинка, на которой изображен элемент дизайна или шаблон или часть шаблона, или другое, связанное с фронт-эндом. Ученик должен детально воспроизвести, то что видит, используя HTML5, CSS3, Javascript или Angular. Использовать можно знания которые были приобретены на практических уроках, а также знания, которые ученик приобрел в ходе самостоятельных работ.

Контрольная работа делается самостоятельно и в классе, при физическом присутствии учителя. Во время контрольной работы разрешается пользоваться интернетом и мобильным телефоном для поиска информации и документации.

Оценочная шкала:
Для усвоения материала ученик должен получить минимальный проходной балл.
Минимальный проходной балл для данного курса – 60%. Минимальный проходной балл показывает, что ученик усвоил материал. Для получения минимального проходного балла в контрольной работе ученик должен использовать более 60% приёмов и наработок, представленных во время практических занятий. Финальная работа оценивается учителем на месте.

Продолжительность: 40 академических часов. Аудиторная и практическая работа в классе с преподавателем 24 академических часа. В процессе обучения необходимо не менее 16-ти часов самостоятельной работы дома.

Оцениваются два навыка, которые должен усвоить обучающийся:

• Умение делать поиск в интернете по документации к технологии, которой пользуется для решения задания.
• Умение применить знания для написания разметки кода и программирования приложений на Javascript и Angular.

Лектор:
Vladimir Kjahri
Tallinna Tehnikaülikool – magistrikraad – eriala: IT , lisaeriala: infotöötlus Infotehnoloogia projektide juhendamine, programmeerimine. Tallinna Pedagoogikaülikool – bakalaureusekraad. IT-spetsialist, programmeerija, tarkvaraarendaja

Занятия проводятся вечером, с 17.15 в мини группах (2-3 человека) по 4 академических часа в день, два раза в неделю. Дни и время проведения занятий согласовываются при регистрации на курс. Есть возможность выбрать форму обучения: контактную или дистанционную.