Вёб-разработчик 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 Что делать дальше?