Фронтенд разработка – верстка на HTML, CSS/SASS, Bootstrap4/5

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

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

Цель курса:

• Приобрести практические навыки фронт-энд верстальщика
• Получить практические знания о специальных инструментах фронт-энд разработчика
• Получить практические знания верстки HTML5 и CSS3, SASS/LESS
• Получить базовые навыки программирования на JavaScript
• Научиться встраивать Bootstrap 4 в свою веб-страницу и использовать возможности адаптивной верстки веб-страницы
• Научиться создавать анимацию на CSS
• Умеет настраивать WebPack (или подобные системы) для конвертации и оптимизации файлов.

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

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

Программа:

• Базовые знания GIT – 2 академических часа, (теория+практика).
  • Инициализация GIT проекта
  • Создание проекта на gitlab.com и github.com
  • Сценарий исправления конфликтов при разработке
  • Создание веток и их слияние
  • Публикация проекта на центральном сервере gitlab.com или github.com
  • Практика (2 академических часа)
    • Регистрируем на центральном сервере gitlab.com или github.com
    • Создаем личный репозиторий
    • Разбираемся с использованием команд GIT (commit, push, pull, branch и др)
    • Публикуем проект на центральном сервере, используя команды GIT
• Создание README файла HTML5 – 4 академических часа (теория 1 час+3 часа практика)
  • Теги: списки, таблицы, формы
  • Стили: классы, id (связывание тэгов с CSS )
  • Использование быстрой верстки emmet.io
  • Практика (4 часа):
    • Создать скелет страницы используя все элементы HTML5
• CSS3 – 8 академических часов (теория 2 часа+6 часов практика)
  • Синтаксис языка стилей
  • Манипулирование как одним HTML элементом тая и несколькими одновременно
  • Форматирование объектов: Цвета, шрифт, отступы, прозрачность, тени, геометрические фигуры (color, font-face, margin, padding, float, shadow, geometry …)
  • Создание скелета страницы и Структура объектов (Header, section, aside, footer, display, loat…)
  • Адаптивная верстка (responsive design) – мобльный, планшет, монитор (разные разрешения)
  • Практика (6 часов)
    • создать верстку страницы по картинке
    • создать скелет страницы: меню, элементы дизайна, итд
    • Сверстать макет страницы используя знания HTML, CSS
• Bootstrap4/5 – 10 академических часов (теория 2 часа+8 часов практика)
  • Установка Bootstrap 4 в html-страницу
  • Использование Bootstrap 4 для адаптивной верстки: Flexbox и позиционирование блоков
  • Как использовать компоненты, формы, склететы
  • Как верстать блоки с помощью Grid System
  • Практика Bootstrap4 (8 часов)
    • создать галерею изображений или товаров на сайте
    • Программирование поведения компонентов с помощью Javascript и jQuery
    • Как сделать модальное окно на сайте
    • Как создавать верстку страниц с помощью Bootstrap 4
• SASS – 4 академических часа (теория 1 час+3 часа практика)
  • Зачем использовать Sass/SCSS вместо CSS?
  • Препроцессор Sass
  • Синтаксис: Пререквизиты. Переменные. Вложенные правила. Амперсанд.
  • Миксины (они же примеси)
  • Арифметические операции: Сложение и вычитание. Умножение. Деление. Остаток.
  • Операторы сравнения: Логические операторы. Строки.
  • Операторы управления потоками: if(), @if
  • Директива @for, @each, @while
  • Функции в Sass/SCSS
  • Практика SASS (3 часа)
    • создать свой SASS файл и настраиваем webpack для компиляции в CSS
    • Верстаем веб страницу с помощью SASS
• Базовые знания Javascript – 4 академических часа (теория 1 час+3 часа практика)
  • Переменные (var, let), типы, преобразование типов
  • Функции, использование функций
  • Массивы, объекты (json формат)
  • Циклы (for, foreach), циклы для объектов
  • События, связывание событий и html элементов
  • Практика по Javascript (3 часа)
    • создание аналоговых часов (html, css, javascript)
    • создание лендинга и работа с памятью и сессиями (html, css, javascript)
    • привязываем обработчик событий к элементам HTML, манипулируем тэгами
  • HTML
  • Реактивные формы
  • Шаблон управляемых форм
  • HTTP-запросы

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

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

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

• Ученику дается картинка, на которой изображен элемент дизайна или шаблон или часть шаблона, или другое, связанное с фронт-эндом. Ученик должен детально воспроизвести, то что видит, используя 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