Скрыть объявление
Вебтренинг

- Более 16 000 обучающих материалов
- Ежедневные обновления
- Регистрируйся прямо сейчас и получи комплект тренингов в подарок!
Быстрая Регистрация

[Андрей Гаврилов] Веб-верстальщик: Код фрилансера (2017)

Тема в разделе "Курсы по программированию", создана пользователем Lixord, 9 июн 2018.

  1. Lixord

    Lixord Модератор

    Сообщения:
    12.490
    Симпатии:
    97
    [Андрей Гаврилов] Веб-верстальщик: Код фрилансера (2017)

    Программирование

    [Андрей Гаврилов] Веб-верстальщик: Код фрилансера (2017)

    ЧЕМУ ВЫ НАУЧИТЕСЬ:

    HTML
    Создавать валидную HTML-разметку страниц, использовать стандарт HTML5 и проектировать лаконичную структура проектов любой сложности

    CSS
    Писать грамотный CSS-код. Использовать стандарт CSS3, медиа-запросы для создания адаптивности, а также работать профессионально с препроцессором SASS (SCSS)

    JAVASCRIPT
    Использовать базовые возможности языка Javascript и использовать библиотеку Jquery. Устанавливать плагины на все случаи жизни: всплывающие окна, галереи, слайдеры и т.д.

    BOOTSTRAP
    Использовать самый популярный фреймворк для веб-разработки Bootstrap, а также его аналоги. Поддерживать и управлять контентом веб-приложений с помощью Bootstrap

    NODE.JS
    Устанавливать и использовать в работе пакетные менеджеры, типа Bower, NPM. Использовать инструменты для прогрессивной frontend-разработки и сборщики проектов, типа Gulp и Grunt

    SASS
    Использовать препроцессор SASS (SCSS) для быстрого модульного написания CSS-кода. Работать с перемеными, наследованием, миксинами и условиями для ускорения work flow

    ADAPTIVE
    Создавать адаптивные и отзывчивые (resposinve) веб-сайты с использованием современных инструментов, а также работать над максимально сложными в верстке проектами

    CMS
    Устанавливать, настраивать и работать с самой прогрессивной и гибкой CMS MODx - системой управления контентом или «движком».



    Блок #1 ВВЕДЕНИЕ В ПРОФЕССИЮ

    Знакомство с коучингом и профессией
    • Знакомимся с участниками
    • О коучинге и процессе обучения
    • Как выжать максимум из программы
    • Перспективы развития на фрилансе
    Принципы, инструменты и понятия веб-разработки
      • Как работают сайты
      • Понятия "домен" и "хостинг"
      • Протоколы FTP и SSH
      • Инструментарий: SublimeText, WinSCP, DevTools, Photoshop и др.
    • Блок #2 HTML-ПРОЕКТИРОВАНИЕ
    • Знакомство с HTML
      • Что такое HTML
      • Основные теги языка разметки
      • Понятие блочных и строчных элементов
      • Ссылки
      • Атрибуты
      • Классы и айди
      • Как быстро запомнить основные теги
    Создание HTML-разметки страницы
      • Структура документа HTML
      • Семантические принципы проектирования
      • Понятие валидности кода, W3C
      • Форматирование кода
      • Комментирование
      • Работа с путями
    HTML5, формы и таблицы
      • Теги HTML5
      • Назначение и применение тегов HTML5
      • Использование видео и аудио
      • Структура форм в HTML
      • Теги для разработки форм
      • Методы отправки форм
      • HTML-структура таблиц
      • Форматирование и стилизация таблиц
      • Создание таблиц любой сложности
    Блок #3 CSS-РАЗРАБОТКА

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

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

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

    Node.js, NPM и Bower
      • Работа с командной строкой (терминалом/консолью)
      • Понятие "пакетный менеджер"
      • Установка оболочки Git
      • Установка Node.js, NPM, Gulp, Bower
      • Полезные дополнения и функции Gulp
      • Автоматическая минификация графики, CSS, JS
      • Настройка личной среды разработки
      • Ускорение рабочего процесса в 3 раза
    Работа с GULP, SASS + Git
      • Установка самого популярного сборщика frontend - Gulp
      • Подробная инструкция по использованию Gulp
      • Что такое препроцессоры
      • Преимущества препроцессора SASS (SCSS)
      • Переменные
      • Наследование
      • Миксины
      • Условия
      • Ускорение work flow с использованием SASS
      • Работа с серверами Github
    Блок #7 ХОСТИНГ И CMS

    Установка сайта и CMS на хостинге
      • Какой хостинг и тариф выбрать
      • Покупка и привязка домена к хостингу
      • Принцип установки любой CMS на примере MODx
      • Подключение к хостингу по FTP и SSH
      • Основы работы с Базами Данных (БД)
      • Управление БД с помощью phpMyAdmin
      • Файловая структура дискового пространства
    Интеграция верстки с CMS MODx
      • Основные точки интеграции
      • Возможности интеграции
      • Формирование удобного Backend с помощью MODx
      • Работа с TV-параметрами, сниппетами, чанками
      • Установка расширений в MODx
      • Интеграция галерей изображений
      • Интеграция форм обратной связи
      • Принцип работы с любой CMS: Wordpress, Joomla, Drupal и др.
    Бонус: работа с CMS Opencart
      • Почему именно Opencart для магазинов?
      • Возможности интеграции с CMS Opencart
      • Разбор Opencart на винтики
      • Масштабы использования Opencart
    Блок #8 ФРИЛАНС И ЗАРАБОТОК

    Работа на фрилансе
      • Обзор самых прибыльных бирж фриланса
      • Создание идеального профиля
      • Секреты формирования портфолио
      • Эффективный метод поиска клиентов
      • Мои секреты и фишки поиска клиентов
    Пять контрольных точек
      • 5 встреч онлайн в течение последнего месяца
      • Мои постоянные консультации и поддержка
      • Помощь в работе с клиентами
      • Вдохновение и мотивация
    Выпускное занятие
      • Долгожданное занятие!
      • Обсуждение результатов
      • Речь каждого студента
      • Напутствие от наставника
      • Выдача дипломов
      • Советы по развитию
      • Неформальная беседа и виртуальное чаепитие

     
Загрузка...