Тренинг Веб-разработчик 5.0. Продвинутый HTML/CSS + JQUERY Артем Исламов
Сайт: | up-skills.ru показать |
Дата публикации: | 02.05.2017 |
Размер: | 9,15 гб |
Год: | 2016 |
Направление: | Программирование |
Курс по верстке 5.0: научись создавать сайты с нуля за 5 недель под руководством наставника.
Программу курса Веб-разработчик:
Урок 1. Установка программ и подготовка рабочего пространства.
— Установка редактора кода (На примере Sublime text 3)
— Установка Node.js и NPM
— Установка Browser-sync
— Установка Git и его первоначальная настройка
Урок 2. Работа с дизайн-макетом.
— Как быстро вырезать графику из макета.
— Как работать с макетом, если нет фотошопа под рукой.
— Полный обзор сервиса Assets от Adobe.
— Векторизируем иконки.
Урок 3. Создание папки с проектом.
— Установка и настройка Gulp.
— Пишем свои первые таски на Gulp.
— Директория с проектом.
— Первая компиляция нашего кода.
Урок 4. Работа с репозиторием GitHub.
— Регистрация аккаунта на GitHub.
— Синхронизация директории с проектом и репозитория.
— Как вносить изменения в проект.
— Как разместить свой сайт на бесплатном хостинге yourname.GitHub.io.
Урок 5. Классы в HTML. Модель БЭМ.
— Когда заканчивается фантазия. Или как называть классы и переменные.
— Модель БЭМ и ее основные принципы.
— Блок. Элемент. Модификатор. Как применять на практике.
Урок 6. Работа со шрифтами.
— Установка шрифтов с Google Fonts.
— Установка кастомных шрифтов и их конвертация.
— Правила быстрой загрузки шрифтов.
— Билдим шрифты в продакшн.
Урок 7. Пишем стили для нашего сайта. Препроцессоры.
— Почему не нужно писать на чистом CSS.
— Какой препроцессор выбрать?
— Примеры препроцессоров с обзором функций.
— Обзор возможностей препроцессора LESS/SASS.
— Пишем таск Gulp для компиляции LESS/SASS кода.
— Минимизируем CSS.
— Ставим префиксы.
Урок 8. Иконочные шрифты.
— Иконочный шрифт Font Awesome.
— Подключение иконочных шрифтов к сайту.
— Создание своего иконочного шрифта.
Урок 9. Сниппеты в работе над проектом.
— Для чего нужны сниппеты и как их применять в работе.
— Записываем свой HTML сниппет.
— Как писать CSS, LESS, SASS, JS cниппеты.
Урок 10. Эффекты при наведении и свойство transition.
— Как задать эффект при наведении мышью.
— За что отвечает свойство transition.
— Пишем миксин для transition.
— Бонус: набор красивых эффектов при наведении.
Урок 11. Всплывающие окна без JS.
— Как сделать всплывающее окно, используя :target.
— Свойства для оверлеев.
— Свойства для модального окна.
— Как закрыть окно при клике на пустое пространство.
Урок 12. Подключение сеток к сайту.
— Использование сетки Bootstrap 3.
— Обзор сетки FlexBox Grid CSS colums как использовать и почему это не сетка.
— Обзор других сеток на Flex’ах.
Урок 13. Анимация на CSS3.
— Свойство animation в CSS3.
— Значения для правила @keyframes.
— Готовые библиотеки с распространенными анимациями.
— Подключение библиотеки wow.js.
Урок 14. Верстка на Flexbox.
— Что такое Flexbox и в чем его преимуществ.
— Основные свойства flex верстки.
— Верстка примера на flex’ах.
Урок 15. Адаптивная верстка сайта.
— Верстка Pixel perfect, Адаптивная верстка, Резиновая верстка.
— Как адаптировать сайт под разные размеры экранов.
— Правило @media. Как использовать его?
— Единицы измерения для адаптивности сайта (em, rem, vw, vh, %, px).
— Популярные расширения экранов.
— Как протестировать свою верстку на адаптивность.
Урок 16. JQUERY.
— Язык JavaScript и фреймворк JQuery.
— Почему на старте нужен JQuery (JQ).
— Синтаксис и правила написания JQ кода.
— Функции, переменные, DOM и прочее волшебство.
— Справочник JQuery.
— Пишем меню на JQ.
Урок 17. Аккордеон и табы для сайта.
— Использование сторонних библиотек JS и JQuery.
— Подключение библиотеки JS к сайту.
— Настройка аккордеона и табов.
Урок 18. JQUERY. Работа с формами.
— Проверка форм при помощи JQuery.
— Маска ввода для поля «Телефон», «e-mail» и т.д.
— Простой калькулятор на JQuery.
Урок 19. Всплывающие окна на JQUERY.
— Простое всплывающее окно.
— Окно с анимацией на SVG.
— Полноэкранное модальное окно.
Урок 20. Видео-фон на сайте.
— Где бесплатно скачать видео для фона на сайт.
— Подключаем библиотеку с адаптивным видео фоном к сайту.
— Как подключить видео-фон через YouTube.
Урок 21. Parallax эффект на сайте.
— Библиотеки с эффектами параллакс для сайта.
— Обзор Parallax.js (реакция на поведение мыши).
— Обзор Rellax.js (параллакс при скролле).
Урок 22. Немного о PHP.
— Что такое хостинг/домен?
— Зачем нужен OpenServer?
— Инструкция по установке и запуску OpenServer. Настройка OpenServer.
— Основы PHP. Синтаксис PHP.
— Настраиваем HTML-форму перед отправкой на почту.
— Пишем простой обработчик формы на PHP.
— Минусы отправки письма средствами Mail().
— Настройка и отправка письма через SMTP (готовый скрипт).
— Отправка письма без перезагрузки страницы (AJAX запрос).
Урок 23. Оптимизация скорости загрузки сайта.
— Проверка скорости загрузки сайта при помощи Google Page Speed.
— Оптимизация под Google Page Speed.
— Оптимизация под мобильные устройства.
— Оптимизированный шаблон для Google Page Speed.
— Настраиваем HTML-форму перед отправкой на почту.
— Файл .htaccess для Google Page Speed.
— Оптимизация изображений руками и через Gulp.
Урок 24. Валидность. Как писать правильный код.
— Для чего нужно проходить проверку на валидность кода.
— W3C валидация.
— Сайты для проверки кода (HTML и CSS).
Урок 25. Верстка под WordPress.
— Установка WordPress на OpenServer.
— Распаковываем и переделываем шаблон HTML.
— Создаем правильные пути до картинок и иконок.
— Настройки стилей, подвала, шапки и сайдбаров.
— Настраиваем панель администратора.
— Выгружаем сайт на хостинг и запускаем его.
Урок 26. Установка на сайте счетчиков аналитики.
— Что такое Яндекс.Метрика, Google Analytics, Пиксель Ретаргетинга и Пиксель Facebook.
— Как установить и настроить метрику.
— Установка целей в метрике (простые и на JS).
— Установка и настройка счетчиков от Google.
Урок 27. Установка карт от Яндекс и Google.
— Изучаем API Яндекс.Карт.
— Устанавливаем простые карты на сайте.
— Устанавливаем и настраиваем свои отметки на карте.
— Установка Google Maps и Карт 2GIS.
Урок 28. Система оплат на сайте.
— Как подключить онлайн оплату быстро.
— Обзор онлайн-касс для приема платежей.
— Гибкая настройка приема Яндекс.Денег.
— Прием QIWI платежей через копилку и PayPal.
— Настройка Яндекс.Кассы.
Урок 29. Продвижение себя как специалиста.
— Какие навыки стоит прокачивать в 2017 году.
— Области роста для веб-разработчика.
— Сценарии развития: студия и фриланс (подробно).
— Как оформлять свое портфолио, где нужно быть зарегистрированным.
— БлогБастер. Почему нужно вести блог. Где это лучше делать.
— Фриланс-биржи.
Урок 30. Поиск клиентов. CRM. Продажи.
— Как оформить портфолио.
— Холодные продажи (с примерами).
— Партнерские продажи.
— Встречи и Skype.
— Ведение клиентов. Общение.
— CRM система учета заказов.
Скачать:
Отзывов еще нет
Оставить свой отзыв