Длительность курса 5 недель. Один раз в неделю общий вебинар с преподавателем для ответов на все вопросы, получения обратной связи по домашним заданиям и возникшим трудностям. Постоянная поддержка преподавателя курса и проверка домашних заданий. Личное общение с преподавателем курса.
За время курса мы изучим и научимся пользоваться средствами современной среды разработки, изучим html, css, препроцессоры less и sass, изучим сетку фреймворка bootstrap, научимся подключать сторонние js и css библиотеки и сверстаем 2 макета. А так же у вас есть возможность выбрать третий макет для верстки самостоятельно. Будет рассмотрена автоматизация процессов разработки через gulp.
Программа курса разбита на 5 недель:
- Подготовка рабочей среды (текстовые редакторы, нужные плагины, работа с ними, сопутствующие программы). Изучение
HTML5
. Неделя посвящена полностью изучению языка гипертекстовой разметки. - Изучение
CSS3
. Неделя посвящена полностью изучению каскадных таблиц стилей, а также препроцессоровLESS
иSASS
. - Практика. Верстка первого шаблона . Верстка адаптивная, но без применения сеток. После верстки первого макета - изучение сетки
Bootstrap
. - Практика. Верстка второго шаблона . Верстка адаптивная с применением сетки Bootstrap. Верстка собственного шаблона.
- Базовые знания JS и jQuery. Автоматизация с помощью GULP. Валидация и оптимизация работы сайта. Установка локального сервера и установка
Wordpress
. Установка карт на сайт (карты от google, yandex, 2gis). Установка на сайт карусели и баннера на примере OwlCarousel.
Видеоуроки первой недели:
- Как смотреть видео.
- Текстовый редактор
brackets
. - Текстовый редактор
sublimetext3
. - Текстовый редактор
atom
. - Программы для скриншотов. Как делать скриншот и сразу вставлять картинку.
- Сокращения
emmet
. - Github. Что это и зачем нужно. Регистрация на
github
и использование хостингаgithub pages
. - Вводный урок html css.
- Как создавать, открывать и редактировать html файлы.
- Понятие тег, базовая структура документа.
- Абзац и заголовки.
- Ссылки.
- Атрибуты.
- Ссылки - продолжение.
- Изображения.
- Списки.
- Таблицы.
- Комментарии.
- Предварительное форматирование
pre
. - div и span.
- Жирный и курсив (форматирование текста).
- Формы.
- Семантические теги.
- Практика верстки
html
.
Видеоуроки второй недели:
- Установка node npm browser-synk.
- Лицензия sublimetext3. Папка проекта, подключение стилей.
- Селекторы.
- Селекторы потомков.
- Псевдоселекторы ссылок.
- Цвет.
- Семейства шрифтов.
- Единицы измерения шрифт.
- Жирный и курсив.
- Подчеркивание и выравнивание.
- Свойства для текста.
- Сокращенная запись и комментарии.
- Наследование стилей.
- Каскадность.
- Вес селекторов.
- Блочная модель.
- Вендорные префиксы. Автопрефиксер.
- border-radius.
- Сетка из 4-х блоков.
- Единицы измерения.
- Блочные и строчные элементы.
- Свойство display.
- Позиционирование.
- Свойство z-index.
- Видимость элементов.
- Сниппеты sublimetext3.
- Препроцессоры
less
иsass
. Программы, работа сless
. - Практика позиционирования.
- Фоновое изображение.
- Форматирование таблиц.
- Сетки.
- Три варианта верстки.
- Практическое по фону и позиционированию.
Видеоуроки третьей недели:
- Структура и графика. Создание файла html макета, вырезание графики из макета сайта .psd
- Шапка сайта. Верстаем шапку сайта (логотип, меню, дескриптор).
- Работа со шрифтами. Подключение и использование.
- Меню и анимация.
- Контент и футер.
- Изображения и фон.
- z-index. Позиционирование по глубине.
- Медиазапросы. Адаптивная верстка.
- reset.css normalize.css
- Bootstrap. Когда и как лучше использовать. Способы подключения. Сетка Bootstrap.
Видеоуроки четвертой недели
- Структура и графика. Создание файла html макета, вырезание графики из макета, подключение шрифтов.
- Шапка сайта. Фон, лого, корзина, меню, заголовок.
- Верстаем кнопки, делаем второй экран. Фисированный фон.
- Делаем третий экран. Цепляем фиксированное изображение.
- Четвертый экран. Карточки товара.
- Доделываем карточки товара. Кнопка купить.
- Пятый экран. Форма.
- Верстаем подвал. Иконочный шрифт font awesome.
- Анимация меню и кнопок.
- Добавляем адаптивность.
- Анимация animate.css и wow.js.
- Создаем эффект параллакса фона. Плагин parallax.js.
- Анимация меню.
Видеоуроки пятой недели
- Валидация и скорость загрузки сайта.
- Карты геолокации для сайта (Google, яндекс, 2gis).
- Основы JS.
- Основы jQuery.
- Gulp. Принцип работы.
- Используем готовую сборку тасков GULP.Первый шаблон сайта заганяем в GULP и автоматически делаем билд в продакшен.
- Второй шаблон сайта заганяем в GULP и автоматически делаем билд в продакшен.
- Установка локального сервера.
- Установка
Wordpress
. - Основы работы с
Wordpress
. - Микро cms
textolite
. - Установка карусели на сайт на примере
OwlCarousel2
.