Базовый курс верстки для дизайнеров

Длительность курса 5 недель. Один раз в неделю общий вебинар с преподавателем для ответов на все вопросы, получения обратной связи по домашним заданиям и возникшим трудностям. Постоянная поддержка преподавателя курса и проверка домашних заданий. Личное общение с преподавателем курса.

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

За время курса мы изучим и научимся пользоваться средствами современной среды разработки, изучим html, css, препроцессоры less и sass, изучим сетку фреймворка bootstrap, научимся подключать сторонние js и css библиотеки и сверстаем 2 макета. А так же у вас есть возможность выбрать третий макет для верстки самостоятельно. Будет рассмотрена автоматизация процессов разработки через gulp.

Программа курса разбита на 5 недель:

1. Подготовка рабочей среды (текстовые редакторы, нужные плагины, работа с ними, сопутствующие программы). Изучение HTML5. Неделя посвящена полностью изучению языка гипертекстовой разметки.
2. Изучение CSS3. Неделя посвящена полностью изучению каскадных таблиц стилей, а также препроцессоров LESS и SASS.
3. Практика. Верстка первого шаблона . Верстка адаптивная, но без применения сеток. После верстки первого макета - изучение сетки Bootstrap.
4. Практика. Верстка второго шаблона . Верстка адаптивная с применением сетки Bootstrap. Верстка собственного шаблона.
5. Базовые знания JS и jQuery. Автоматизация с помощью GULP. Валидация и оптимизация работы сайта. Установка локального сервера и установка Wordpress. Установка карт на сайт (карты от google, yandex, 2gis). Установка на сайт карусели и баннера на примере OwlCarousel.

Первая неделя

Видеоуроки первой недели:

1. Как смотреть видео.
2. Текстовый редактор brackets.
3. Текстовый редактор sublimetext3.
4. Текстовый редактор atom.
5. Программы для скриншотов. Как делать скриншот и сразу вставлять картинку.
6. Сокращения emmet.
7. Github. Что это и зачем нужно. Регистрация на github и использование хостинга github pages.
8. Вводный урок html css.
9. Как создавать, открывать и редактировать html файлы.
10. Понятие тег, базовая структура документа.
11. Абзац и заголовки.
12. Ссылки.
13. Атрибуты.
14. Ссылки - продолжение.
15. Изображения.
16. Списки.
17. Таблицы.
18. Комментарии.
19. Предварительное форматирование pre.
20. div и span.
21. Жирный и курсив (форматирование текста).
22. Формы.
23. Семантические теги.
24. Практика верстки html.

Вторая неделя

Видеоуроки второй недели:

1. Установка node npm browser-synk.
2. Лицензия sublimetext3. Папка проекта, подключение стилей.
3. Селекторы.
4. Селекторы потомков.
5. Псевдоселекторы ссылок.
6. Цвет.
7. Семейства шрифтов.
8. Единицы измерения шрифт.
9. Жирный и курсив.
10. Подчеркивание и выравнивание.
11. Свойства для текста.
12. Сокращенная запись и комментарии.
13. Наследование стилей.
14. Каскадность.
15. Вес селекторов.
16. Блочная модель.
17. Вендорные префиксы. Автопрефиксер.
18. border-radius.
19. Сетка из 4-х блоков.
20. Единицы измерения.
21. Блочные и строчные элементы.
22. Свойство display.
23. Позиционирование.
24. Свойство z-index.
25. Видимость элементов.
26. Сниппеты sublimetext3.
27. Препроцессоры less и sass. Программы, работа с less.
28. Практика позиционирования.
29. Фоновое изображение.
30. Форматирование таблиц.
31. Сетки.
32. Три варианта верстки.
33. Практическое по фону и позиционированию.

Третья неделя

Видеоуроки третьей недели:

1. Структура и графика. Создание файла html макета, вырезание графики из макета сайта .psd
2. Шапка сайта. Верстаем шапку сайта (логотип, меню, дескриптор).
3. Работа со шрифтами. Подключение и использование.
4. Меню и анимация.
5. Контент и футер.
6. Изображения и фон.
7. z-index. Позиционирование по глубине.
8. Медиазапросы. Адаптивная верстка.
9. reset.css normalize.css
10. Bootstrap. Когда и как лучше использовать. Способы подключения. Сетка Bootstrap.

Четвертая неделя

Видеоуроки четвертой недели

1. Структура и графика. Создание файла html макета, вырезание графики из макета, подключение шрифтов.
2. Шапка сайта. Фон, лого, корзина, меню, заголовок.
3. Верстаем кнопки, делаем второй экран. Фисированный фон.
4. Делаем третий экран. Цепляем фиксированное изображение.
5. Четвертый экран. Карточки товара.
6. Доделываем карточки товара. Кнопка купить.
7. Пятый экран. Форма.
8. Верстаем подвал. Иконочный шрифт font awesome.
9. Анимация меню и кнопок.
10. Добавляем адаптивность.
11. Анимация animate.css и wow.js.
12. Создаем эффект параллакса фона. Плагин parallax.js.
13. Анимация меню.

Пятая неделя

Видеоуроки пятой недели

1. Валидация и скорость загрузки сайта.
2. Карты геолокации для сайта (Google, яндекс, 2gis).
3. Основы JS.
4. Основы jQuery.
5. Gulp. Принцип работы.
6. Используем готовую сборку тасков GULP.Первый шаблон сайта заганяем в GULP и автоматически делаем билд в продакшен.
7. Второй шаблон сайта заганяем в GULP и автоматически делаем билд в продакшен.
8. Установка локального сервера.
9. Установка Wordpress.
10. Основы работы с Wordpress.
11. Микро cms textolite.
12. Установка карусели на сайт на примере OwlCarousel2.