WEB-разработчик 2020
Освой все, что необходимо для создания web-сайтов и начни зарабатывать на этом!


Описание:
Этот курс направлен на подробное обучение созданию сайтов, без воды, но главное, что здесь мы немедленно применяем все знания на практике.
Это значит, что вы получите весь материал для работы и мы вместе будем создавать реальные проекты шаг за шагом.
Для кого подойдет этот курс?
- Если вы ничего не знаете про создание сайтов, но хотите начать
- Если вы новичок в html/css, хотите быстро их освоить и начать применять в работе
- Если у вас был опыт в этой сфере несколько лет назад, ведь web-технологии очень быстро меняются и совершенствуются
Что внутри курса?
Мы с вами пройдем путь от установки своего первого редактора кода до создания полноценных, полностью функционирующих и расположенных в интернете сайтов. Мы будем изучать теоретическую часть и сразу же применять её на реальных проектах. Все ссылки на ресурсы, дополнительные материалы и бонусные макеты для практики будут предоставлены внутри курса.
- мы изучим основы web-разработки: что такое web-сайт, зачем он нужен, циклы создание и многое другое
- мы научимся работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode...
- мы научимся работать с графикой для web'a, в том числе с SVG
- мы узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах
- мы узнаем основы JS и Jquery, научимся применять их в своих проектах
- мы научимся работать с Git и GitHub
- мы научимся работать с Bootstrap 4 и с технологией FlexBox
- мы научимся использовать препроцессоры Sass/Scss/Less в своих проектах
- мы научимся создавать мобильную адаптацию сайтов и приложений
- мы научимся использовать методологию БЭМ
- мы поймем, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
- мы научимся автоматизировать процессы при помощи планировщика задач Gulp
- мы научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
- мы научимся работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
В виде бонуса будут предоставлены несколько реальных макетов для самостоятельного закрепления полученных знаний.
Программа курса:
Модуль 1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS
- Зачем нам этот модуль
- Классификация сайтов. Этапы создания.
- Установка и настройка редактора кода
- Работа с Adobe Photoshop в вебе
- Работа с современными редакторами: Avocode, Zeplin, Figma...
- Бонус. Что такое "сетки" и преобразование иконок в SVG формат
- Создаем свой первый проект. Основы HTML
- Основные теги HTML на практике
- Семантические теги HTML5
- Основы CSS на практике
- Блочная модель CSS
- Developer Tool. Что это и как с ним работать?
- Блочная модель CSS. Часть 2
- Позиционирование элементов в CSS. Принцип карточной колоды
- Выравнивание элементов по вертикали. Верстка таблицами и float'ами
- Бонус. Единицы измерения CSS
- Практика. Создаем сайт на чистом HTML и CSS
- Технология Flexbox и применение её на макете
- Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание
- Сброс стилей reset.css/normalize.css
- Подключение шрифтов на сайт
Модуль 2. Ускорение работы в несколько раз
- Зачем нам этот модуль
- Библиотека Bootstrap 4
- Практика. Новый проект с использованием сетки Bootstrap 4
- Препроцессоры. SASS/SCSS/LESS
- Если у вас ошибка при компиляции SASS кода
- Вендорные префиксы в CSS
- Практика. Продолжаем работу и используем препроцессор SASS
- Псевдоклассы и псевдоэлементы в CSS
- Практика. Используем псевдоэлементы и псевдоклассы в проекте
- Как работать с иконками. Иконочные шрифты
- Адаптация проектов под различные устройства
- Pixel Perfect верстка
- Адаптация при помощи Bootstrap
- Практика. Адаптация проекта. Часть 1
- Практика. Адаптация проекта. Часть 2
- Локальные ссылки и favicon
- UX. Дорабатываем мелочи
- Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс "кеша"
Модуль 3. Необходимые технологии для веб-разработчика и продвинутая практика
- Зачем нам этот модуль
- Система контроля версий Git и сервис GitHub
- Как работать с GitHub с разных компьютеров, gitignore и Git Kraken
- Планировщик задач Gulp
- Методология БЭМ
- Практика. Создаем новый проект, используя Gulp, БЭМ...
- Если у вас не работают картинки
- Формы на сайтах
- Знакомимся с языком программирования JavaScript
- Как можно освоить JavaScript?
- Практика. Создаем слайдер на сайте. Slick-слайдер
- Если у вас не работают скрипты
- Практика. Альтернативные варианты слайдеров
- Практика. Создаем табы на сайте. Часть 1
- Практика. Создаем табы на сайте. Часть 2
- Создаем интерактивные карты на сайте
- Практика. Создаем модальные окна на сайте
- Валидация форм
- Маска ввода номера на сайте
- Локальные сервера
- Практика. Отправка писем с сайта
- Плавный скролл по ссылкам и элемент "вверх"
- Анимации на сайтах при помощи CSS3
- Библиотеки для работы с анимациями
- Валидация сайта
- Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL
- Оптимизация скорости загрузки сайта, доработка gulpfile
- Что делать дальше?