Узнайте о снижении цены

Оставьте ваш email и мы напишем вам когда цена снизится

WEB-разработчик 2021

Вы на практике изучите технологии, необходимые для разработки веб-сайтов.
5 990 ₽
стоимость обучения
Узнать о снижении цены
Уровень сложности
для новичков
Длительность
1 мес.
Демо доступ
да
Формат обучения
видеоуроки
Домашние задания
нет
Обратная связь
нет
Стажировка
нет
Помощь в трудоустройстве
нет
Документ по окончании
сертификат

Программа обучения

  • Основное
  • Содержание программы

Обучение будет интересно новичкам, которые хотят быстро освоить технологии для создания веб-сайтов.

Курс направлен на получение практических знаний в веб-разработке. Вы научитесь работать с графикой для web и графическими редакторами, поймёте, как применять HTML, CSS,  JS и Jquery в своих проектах. В процессе обучения вы будете использовать Git, GitHub, Bootstrap, FlexBox и препроцессоры. На курсе вы получите навыки, владея которыми вы сможете освоить любую CMS и дальше развиваться в сфере веб-разработки (frontend, backend).

Модуль 1 — Погружение в тему создания web-продуктов. Изучение основ HTML и CSS
  • Зачем нам этот модуль
  • Классификация сайтов. Этапы создания.
  • Установка и настройка редактора кода
  • Работа с Adobe Photoshop в вебе
  • Работа с современными редакторами: Avocode, Zeplin, Figma...
  • Бонус. Что такое "сетки" и преобразование иконок в SVG формат
  • Создаем свой первый проект. Основы HTML
  • Основные теги HTML на практике
  • Семантические теги HTML5
  • Основы CSS на практике
  • Блочная модель CSS
  • Developer Tool. Что это и как с ним работать?
  • Блочная модель CSS. Часть 2
  • Позиционирование элементов в CSS. Принцип карточной колоды
  • Выравнивание элементов по вертикали. Верстка таблицами и float'ами
  • Бонус. Единицы измерения CSS
  • Специфичность CSS селекторов
  • Практика. Создаем сайт на чистом HTML и CSS
  • Технология Flexbox и применение её на макете
  • Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание
  • Сброс стилей reset.css/normalize.css
  • Подключение шрифтов на сайт
Модуль 2 — Ускорение работы в несколько раз
  • Зачем нам этот модуль
  • Библиотека Bootstrap 4
  • Про обновление Bootstrap до пятой версии
  • Практика. Новый проект с использованием сетки 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
  • Библиотеки для работы с анимациями
  • Про обновления и animate.css
  • Валидация сайта
  • Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL
  • Оптимизация скорости загрузки сайта, доработка gulpfile
Модуль 4 — CSS-грид и сайт-портфолио
  • Зачем этот модуль
  • Предпросмотр
  • Снова про сетки и CSS Grid
  • Единица гибкости (fr) и repeat()
  • Явные и неявные гриды
  • Функция minmax() и масштабирование треков
  • Позиционирование треков
  • Выравнивание треков
  • Grid Area и подсетки. Адаптация гридов
  • Еще раз про meta-тэги и фавикон. OG tag
  • Подготовка к созданию портфолио
  • Создаем первый экран, часть 1
  • Создаем первый экран, часть 2 (анимация меню)
  • Используем CSS Grid для создания второго экрана
  • Создаем третий экран портфолио
  • Реализуем скрипт автоматического пересчета процентов
  • Создаем блок-портфолио работ
  • Создаем блок с контактами
  • Политика конфиденциальности. Что это, зачем и как использовать.
  • Свойство object-fit
  • Адаптация портфолио, часть 1
  • Адаптивные изображения
  • Заканчиваем портфолио и адаптируем последние экраны
  • CSS Variables (CSS переменные)
  • Что такое Mobile first
  • Что делать дальше?

Чему научат

Узнаете основы web-разработки
Научитесь работать с графикой для web, в том числе с SVG
Узнаете основы JS и Jquery, научитесь применять их в своих проектах
Научитесь работать с Bootstrap 4/5 и с технологией FlexBox
Научитесь создавать мобильную адаптацию сайтов и приложений
Поймете, как создавать многостраничные сайты и принципы посадки под CMS

Отзывы пользователей

Оставить отзыв о курсе

    Оставьте отзыв о курсе

    Ваш адрес Email не будет опубликован
    Ваша оценка:
    Ваш отзыв:
    Достоинства:
    Недостатки:
    Имя:
    Email: