Основы программирования

Категория курса: Информационные и цифровые технологии

Возраст: 12-18 лет

Курс предназначен для подростков 12-18 лет и адаптирован для пошагового прохождения и достижения цели стать веб-разработчиком или верстальщиком.

Задача курса: передать уникальные знания в области веб-разработки и вёрстки и научить их использовать в работе веб разработки и вёрстки.

Cодержание курса

  1. Введение в курс. Принципы, инструменты и понятия веб-разработки.
    • Понятия «домен» и «хостинг».
    • Протоколы FTP и SSH.

    HTML-проектирование

  2. Знакомство с HTML.
    • Что такое HTML.
    • Основные теги языка разметки.
    • Понятие блочных и строчных элементов.
    • Ссылки.
    • Атрибуты.
    • Классы и id.
    • Как быстро запомнить основные теги.
  3. Создание HTML-разметки страницы
    • Структура документа HTML.
    • Семантические принципы проектирования.
    • Понятие валидности кода, W3C.
    • Форматирование кода.
    • Комментирование.
    • Работа с путями.
  4. HTML5, формы и таблицы
    • Теги HTML5.
    • Назначение и применение тегов HTML5.
    • Использование видео и аудио.
    • Структура форм в HTML.
    • Теги для разработки форм.
    • Методы отправки форм.
    • HTML-структура таблиц.
    • Форматирование и стилизация таблиц.
    • Создание таблиц любой сложности.

    CSS-разработка

  5. Введение в CSS.
    • Зачем нужен CSS.
    • Возможности CSS.
    • Способы подключения CSS к HTML.
    • Структура CSS-документов.
    • Быстрые способы написания кода.
  6. Свойства, правила, форматирование + БЭМ.
    • Работа с селекторами.
    • Наследование.
    • Псевдоклассы :before, :after, nth-child и др.
    • Работа с цветовыми моделями rgb, rgba, hex, hsla.
    • Как эффективно и быстро выучить CSS-свойства.
    • Разбор современной методологии БЭМ.
  7. Практика
    • Готовим среду для разработки.
    • Создаем настоящую страницу HTML/CSS.
    • Фишки CSS3: animation, transition, rotate и др.
    • Вендорные префиксы.
    • Все преимущества HTML5 и CSS3 в примерах

    Responsive & Adaptive

  8. Photoshop и модульными сетками.
    • Интерфейс Photoshop.
    • Структура современного макета.
    • Основы минимализма и Flat-дизайна.
    • Понятие «модульные сетки».
    • Типы модульных сеток по назначению.
    • Экспорт графики для верстки.
    • Понятие форматов PSD, JPG, PNG, GIF, SVG, AI, EPS, PDF.
    • Ключевые принципы преобразования макета в код.
  9. Отзывчивость в CSS
    • Для чего нужны медиа-запросы (media queries).
    • Примеры работы с медиа-запросами.
    • Подходы mobile first и mobile last.
    • Понятие «резиновость» и «brake-points».
    • Относительные единицы измерения (%, em, rem и др.).
    • Подготовка изображений под retina-дисплеи.
    • Профессиональный подход к структуре CSS с media queries.
  10. Bootstrap CSS в активной практике
    • Подготовка структуры проекта.
    • Экспорт графики из PSD.
    • Минификация файлов для ускорения загрузки.
    • Создание HTML-разметки.
    • Блочная структура организации контента.
    • Использование всей мощи CSS3.
    • Работа со шрифтами в CSS.
    • Подключение шрифтов из Google Fonts.
    • Конвертация формата шрифтов и подключение к сайту.
    • Тестирование адаптивности и отзывчивости.
    • Инструменты для тестирования: DevTools в браузерах и др.

    JavaScript И JQuery

  11. Основы Javascript
    • Введение в язык.
    • Переменные и типы данных.
    • Управляющие конструкции.
    • Циклические и условные конструкции.
    • Функции.
    • Объекты и массивы.
    • Практика: решение задач.
  12. Знакомство с jQuery
    • Понятие библиотеки.
    • Принципы работы с jQuery.
    • Анимации.
    • Добавление/удаление классов.
    • Взаимодействие с элементами DOM.
  13. Погружение в jQuery и Bootstrap
    • Процесс установки плагинов jQuery.
    • Готовые решения: слайдеры, галереи, модальные окна..
    • Обзор решений Bootstrap для решения повседневных задач.
    • Parallax-эффекты различной сложности.
    • Основные ошибки и проблемы в использовании jQuery.

    Продвинутый уровень

  14. Node.js, NPM и Bower
    • Работа с командной строкой (терминалом/консолью).
    • Понятие «пакетный менеджер».
    • Установка оболочки Git.
    • Установка Node.js, NPM, Gulp, Bower.
    • Полезные дополнения и функции Gulp.
    • Автоматическая минификация графики, CSS, JS.
    • Настройка личной среды разработки.
    • Ускорение рабочего процесса в 3 раза.
  15. Работа с GULP, SASS + Git
    • Установка самого популярного сборщика frontend – Gulp.
    • Подробная инструкция по использованию Gulp.
    • Что такое препроцессоры.
    • Преимущества препроцессора SASS (SCSS).
    • Переменные.
    • Наследование
    • Миксины..
    • Условия.
    • Ускорение work flow с использованием SASS.
    • Работа с серверами Github.
    • Хостинг И CMS
  16. Установка сайта и CMS на хостинге
    • Какой хостинг и тариф выбрать.
    • Покупка и привязка домена к хостингу.
    • Принцип установки любой CMS на примере MODx.
    • Подключение к хостингу по FTP и SSH.
    • Основы работы с Базами Данных (БД).
    • Управление БД с помощью phpMyAdmin.
    • Файловая структура дискового пространства.
  17. Интеграция верстки с CMS MODx
    • Основные точки интеграции.
    • Возможности интеграции.
    • Формирование удобного BackEnd с помощью MODx.
    • Работа с TV-параметрами, сниппетами, чанками.
    • Установка расширений в MODx.
    • Интеграция галерей изображений.
    • Интеграция форм обратной связи.
    • Принцип работы с любой CMS: WordPress, Joomla, Drupal и др.
  18. Работа с CMS Opencart
    • Почему именно Opencart для магазинов?
    • Возможности интеграции с CMS Opencart.
    • Разбор Opencart на винтики.
    • Масштабы использования Opencart.

Этот курс преподают

  • Майя И.
    Преподаватель информатики, дизайна и программирования
    2018 – школа в Израиле. 2017 – 2018 Фриланс в области веб-дизайн. 2007 – 2015 Учитель информатики в школе. 2004 – 2007 Соликамский... Подробнее...
  • Оставайтесь на связи: