Курс по Front-end разработке (продвинутые знания HTML, CSS, BOOTSTRAP, SASS, GULP) (FRONT-END) - Программа курса

Программа курса

Знакомство с средой разработки – 5 часа

  • Общие принципы построение рабочего места
  • Знакомство с редакторами: Sublime Text, Atom, Visual Studio Code, JetBrains PhpStorm
  • Углублённое знакомство с Sublime Text
    • Установка
    • Элементы окна программы\ Колонки
    • Цветовая схема (выборочно по желанию учащихся)
    • Package Controll
    • Установка плагинов (Emmet, ColorPicker и другие)
    • Знакомство с плагинами
    • Сочетание клавиш
    • Сниппеты
  • Браузеры
  • Первая страница Hello World
  • Практика (1 час)

HTML – 7 часов

  • Рассказ о кодировке (UTF-8)
  • Синтаксис Html – элементов
  • Декларация
  • Теги
  • Атрибуты
  • Заголовки и работа с текстом
  • Списки
  • Ссылки
  • Вставочные блоки (iframe)
  • Формы
  • Таблицы
  • Изображения
  • Head
  • Практика (1 час)
  • Тестирование (1 час)

CSS – 7 часов

  • Введение
  • Разбор возможных вариаций подключения
  • Синтаксис
  • Основные понятия
  • Селекторы
    • Приоритет стилей
    • Индексы
    • Классы
    • Атрибуты
    • Псевдо-классы
    • Псевдо-элементы
  • Позиционирование элементов
  • Оформление текста
    • Текст
    • Списки
    • Шрифты
  • Фигуры
    • Рамки
    • Закругление углов
    • Треугольники
  • Цвет\Тени
  • Фон\Множественный фон\Спрайты\Градиенты
  • Плавные переходы\Трансформации\Анимации
  • Медиа запросы
  • Вёрстка сайта
    • Блочная
    • Flex-box
    • Многоколоночный текст
  • Практика (2 часа)
  • Тестирование (1 час)

Gulp - 4 часа

  • Введение (что такое Gulp)
  • Сравнение с Grunt и Webpack
  • Установка и запуск
    • Установка Node.js
    • Установка gulp
    • Работа с консолью
  • Сборка стилей
  • Сборка скриптов
  • Инкрементальная сборка (watch)
  • Авто перезагрузка браузера (browser-sync)
  • Обработка ошибок
  • Минификация сборки
  • Кроссбраузерность
  • Хэширование файлов
  • Организация Gulp файла
  • Практика (1 час)
  • Тестирование (1 час)

Sass - 4 час

  • Введение (что такое Sass)
  • Синтаксис
  • Cравнение c Less, Scss, Stylus, CSS
  • Работа с селекторами
  • Миксины
  • Инклюды
  • БЭМ
  • Практика (1 час)
  • Тестирование (1 час)

Js & Jq (Первое знакомство) 3 часа

  • Знакомство с js
  • Подключение библиотеки jq
  • Синтаксис
  • Управление dom деревом
  • Внедрение динамики
  • Практика (1 час)

Работа с базой данных 2 часа

  • Работа в phpMyAdmin
  • Синтаксис SQL запросов
  • Выбор кодировки
  • Создание, удаление, изменение таблиц
  • Создание SQL запросов
  • Практика (1 час)

Дополнительные библиотеки и примеры реализации 12 часов

  • Bower
    • Установка
    • Сохранение библиотек
  • Bootstrap 4
    • Установка фреймворка
    • Система сеток
    • Настройка сеток
    • Вёрстка
  • Слайдер
    • Bootstrap
    • owl carousel
    • Fancy box
  • Шрифтовые иконки
    • font awesome
    • material icons
  • Меню
    • Bootstrap
    • SuperFish
    • Multi menu
  • Модальные окна
    • Bootstrap
    • Magnific popup
  • Alert
    • Bootstrap
    • Sweet alert
  • Спойлеры
    • Bootstrap
    • Реализация
  • Аккордеоны
    • Bootstrap
    • Реализация
  • Подключение нужных скриптов для SEO
  • Практика (4 часа)
  • Тестирование (2 часа)