Курс веб розробка та створення сайтів

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Опануй усе, що необхідно для створення web-сайтів і почни заробляти на цьому!

Чого ви навчитеся

— Узнаешь основы web-разработки: что такое web-сайт, зачем он нужен, циклы создания и многое другое
— Научишься работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode…
— Научишься работать с графикой для web’a, в том числе с SVG
— Узнаешь и поймешь как использовать HTML и CSS в реальных проектах (теория настоящая практика)
— Узнаешь основы JS и Jquery, научишься применять их в своих проектах
— Научишься работать с Git и GitHub
— Научишься работать с Bootstrap 4 и с технологией FlexBox
— Научишься использовать препроцессоры Sass/Scss/Less в своих проектах
— Научишься создавать мобильную адаптацию сайтов и приложений
— Научишься использовать методологию БЭМ
— Поймешь, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
— Научишься автоматизировать процессы при помощи планировщика задач Gulp
— Научишься оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
— Научишься работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое…
— Все полученные знания даются в современном формате и сразу закрепляются на практике
— Бонус: получишь несколько реальных макетов для практики

Вимоги

Бажання освоїти створення сайтів і почати заробляти на цьому. Жодної іншої попередньої підготовки: все що потрібно ми налаштуємо і вивчимо.

Опис

Цей курс спрямований на докладне навчання створенню сайтів, без води, але головне, що тут ми негайно застосовуємо всі знання на практиці. Це означає, що ви отримаєте весь матеріал для роботи і ми разом будемо створювати реальні проєкти крок за кроком.

Для кого підійде цей курс?

— Если вы ничего не знаете про создание сайтов, но хотите начать
— Если вы новичок в 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

— мы научимся работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое…

Як бонус буде надано кілька реальних макетів для самостійного закріплення отриманих знань.

Чому варто розпочати своє навчання вже зараз?

Создание сайтов (верстка) — очень востребованный на рынке труда навык, который к тому же еще и хорошо оплачивается. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS (WordPress, ModX…) изнутри, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках (ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях).

Для кого цей курс:

— Для тех людей, кто вообще не знаком с темой создания сайтов
— Для тех людей, кто уже делал свои первые попытки создания сайтов

Матеріали курсу

Модуль 1. Занурення в тему створення web-продуктів. Вивчення основ HTML і CSS

— Классификация сайтов. Этапы создания.
— Установка и настройка редактора кода
— Работа с Adobe Photoshop в вебе
— Работа с современными редакторами Avocode, Zeplin, Figma…
— Бонус. Что такое «сетки» и преобразование иконок в SVG формат
— Создаем свой первый проект. Основы HTML5
— Основные теги HTML на практике
— Семантические теги HTML
— Основы CSS на практике
— Блочная модель CSS
— Developer Tool. Что это и как с ним работать?
— Блочная модель CSS. Часть
— Позиционирование элементов в 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 4
— Практика. Адаптация проекта. Часть
— Практика. Адаптация проекта. Часть
— Локальные ссылки и favicon
— UX. Дорабатываем мелочи
— Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс «кеша»

Модуль 3. Необхідні технології для веб-розробника і просунута практика

— Система контроля версий Git и сервис GitHub
— Как работать с GitHub с разных компьютеров, gitignore и Git Kraken
— Планировщик задач Gulp
— Методология БЭМ
— Практика. Создаем новый проект, используя Gulp, БЭМ…
— Если у вас не работают картинки
— Формы на сайтах
— Знакомимся с языком программирования JavaScript
— Как можно освоить JavaScript?
— Практика. Создаем слайдер на сайте. Slick-слайдер
— Если у вас не работают скрипты
— Практика. Альтернативные варианты слайдеров
— Практика. Создаем табы на сайте. Часть 1
— Практика. Создаем табы на сайте. Часть 2
— Создаем интерактивные карты на сайте
— Практика. Создаем модальные окна на сайте
— Валидация форм
— Маска ввода номера на сайте
— Локальные сервера
— Практика. Отправка писем с сайта
— Плавный скролл по ссылкам и элемент «вверх»
— Анимации на сайтах при помощи CSS
— Библиотеки для работы с анимациями
— Валидация сайта
— Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL
— Оптимизация скорости загрузки сайта, доработка gulpfile