Вёб-разработчик 2020 - с нуля до результата!

Вы изучите:

• Работу с дизайн-макетами сайтов в Photoshop
• Другие полезные в верстке графические редакторы - Zeplin, Figma, Avocode...
• HTML5 и CSS3 на реальных проектах
• Библиотеку BOOTSTRAP 4 и технологию FlexBox
• Препроцессоры Sass/Scss/Less в своих проектах
• Мобильную адаптацию сайтов и приложений
• Методологию БЭМ
• JAVASCRIPT и JQuery на практике
• Git и GitHub
• Автоматизацию и планировщик задач Gulp
• Оптимизацию скорости работы сайтов
• Валидацию вертки по w3c-стандартам
• и многое другое...

Введение

• О курсе. Как проходит обучение по курсу. Чему вы научитесь

1. Погружение в тему создания WEB-продуктов. Изучение основ HTML и CSS на практике

• 1.1 Зачем нам этот модуль
• 1.2 Классификация сайтов. Этапы создания
• 1.3 Установка и настройка редактора кода Visual Studio Code
• 1.4 Работа с Adobe Photoshop в вебе
• 1.5 Работа с современными редакторами: Avocode, Zeplin, Figma
• 1.6 Бонус. Что такое "сетки" и преобразование иконок в SVG формат
• 1.7 Создаем свой первый проект. Основы HTML
• 1.8 Основные теги HTML на практике
• 1.9 Семантические теги HTML5
• 1.10 Основы CSS на практике
• 1.11 Блочная модель CSS
• 1.12 Developer Tool. Что это и как с ним работать?
• 1.13 Блочная модель CSS. Часть 2
• 1.14 Позиционирование элементов в CSS. Принцип карточной колоды
• 1.15 Выравнивание элементов по вертикали. Верстка таблицами и float'ами
• 1.16 Бонус. Единицы измерения CSS
• 1.17 Практика. Создаем сайт на чистом HTML и CSS
• 1.18 Технология Flexbox и применение её на макете
• 1.19 Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание
• 1.20 Сброс стилей reset.css/normalize.css
• 1.21 Подключение шрифтов на сайт

2. Ускорения работы в несколько раз - BOOTSTRAP 4

• 2.1 Зачем нам этот модуль
• 2.2 Библиотека Bootstrap 4
• 2.3 Практика. Новый проект с использованием сетки Bootstrap 4
• 2.4 Препроцессоры. SASS/SCSS/LESS
• 2.5 Если у вас ошибка при компиляции SASS кода
• 2.6 Вендорные префиксы в CSS
• 2.7 Практика. Продолжаем работу и используем препроцессор SASS
• 2.8 Псевдоклассы и псевдоэлементы в CSS
• 2.9 Практика. Используем псевдоэлементы и псевдоклассы в проекте
• 2.10 Как работать с иконками. Иконочные шрифты
• 2.11 Адаптация проектов под различные устройства
• 2.12 Pixel Perfect верстка
• 2.13 Адаптация при помощи Bootstrap
• 2.14 Практика. Адаптация проекта. Часть 1
• 2.15 Практика. Адаптация проекта. Часть 2
• 2.16 Локальные ссылки и favicon
• 2.17 UX. Дорабатываем мелочи
• 2.18 Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс "кеша"

3. Необходимые технологии и продвинутая практика.

• 3.1 Зачем нам этот модуль
• 3.2 Система контроля версий Git и сервис GitHub
• 3.3 Как работать с GitHub с разных компьютеров, gitignore и Git Kraken
• 3.4 Планировщик задач Gulp
• 3.5 Методология БЭМ
• 3.6 Практика. Создаем новый проект, используя Gulp, БЭМ
• 3.7 Если у вас не работают картинки
• 3.8 Формы на сайтах
• 3.9 Знакомимся с языком программирования JavaScript
• 3.10 Как можно освоить JavaScript?
• 3.11 Практика. Создаем слайдер на сайте. Slick-слайдер
• 3.12 Если у вас не работают скрипты
• 3.13 Практика. Альтернативные варианты слайдеров
• 3.14 Практика. Создаем табы на сайте. Часть 1
• 3.15 Практика. Создаем табы на сайте. Часть 2
• 3.16 Создаем интерактивные карты на сайте
• 3.17 Практика. Создаем модальные окна на сайте
• 3.18 Валидация форм
• 3.19 Маска ввода номера на сайте
• 3.20 Локальные сервера
• 3.21 Практика. Отправка писем с сайта
• 3.22 Плавный скролл по ссылкам и элемент "вверх"
• 3.23 Анимации на сайтах при помощи CSS3
• 3.24 Библиотеки для работы с анимациями
• 3.25 Валидация сайта
• 3.26 Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL
• 3.27 Оптимизация скорости загрузки сайта, доработка gulpfile

4. Заключительная часть

• 4.1 Что делать дальше?