WEB
START
ПРАКТИЧЕСКИЙ ONLINE-КУРС
Стань веб-разработчиком с нуля за 6 недель с доходом от 30 000 рублей в первый месяц и интересной профессией
31 октября
Для кого подойдет
курс WEB START
Этот курс рассчитан на людей только входящих
в профессию или решивших освоить что-то новое. От вас не потребуется специфических знаний,
но будет проще, если перед курсом вы посетите наши подготовительные мероприятия.
61
год
самый старший
ученик курса
7
лет
самый молодой ученик курса
Программа курса
Модуль 1. Погружение в тему. Изучение основ HTML и CSS.
Зачем: Чтобы понимать весь процесс создание сайтов с нуля до полной реализации.
Знать, как работает сфера, где лежат деньги и как выбрать свое место.
Чтобы влиться в тему и начать понимать языки разметки для дальнейшей работы.
Тут базовые понятия без которых никуда.



Урок 1. Как работает сайт. Как работают сайты. Клиент серверная архитектура.Backend и frontend.Как выглядит и из чего состоит код веб-страницы. Простая веб-страница на HTML. Тэги и атрибуты. Установка редактора
кода Sublime Text 3


Урок 2. UI/UX. Прототипирование веб-страниц. Axure.Интерфейс: задачи, цели, польза, эстетика и функциональность. Понятие юзабилити и основы эргономики для дизайнеров Урок 3. Работа с графикой для верстальщика. Формат и требования дизайн-макетов.

-Навык работы с дизайн-макетом
-Горячие клавиши для быстрой работы с макетом
-Работа со слоями, папками, смарт-объектами
-Графика для web (gif, png, jpeg, svg)
-Avocode для быстрой работы с графикой
-Как открывать проекты .sketch

Дополнительное видео:
  • Создание сетки для макета в Adobe Photoshop
  • Создание макросов для работы в Adobe Photoshop
  • Работа с графикой в Photoshop (старый видео-урок)
  • Плагины для работы верстальщика в Google Chrome
  • Сервисы для тестирования верстки
Дополнительные сервисы:
  • Сервис для векторизации изображений онлайн
  • Ссылка на сайты с более чем 180+ PSD макетами


Урок 4. Настройка рабочего пространства. Создание папки с проектом

Настройка автообновления при помощи Browser-sync
Тонкая настройка Sublime text 3.
Emmet — инструмент, ускоряющий работу с HTML
Что такое домен и хостинг
Краткий обзор хостингов и панелей администрирования SIP/ISP
Настройка FTP через FileZilla


Урок 5. Основы HTML. Структура HTML5-документа

Элементы HTML разметки. Теги.
Виды тегов. Парные/непарные теги.
Служебные «невидимые» теги.
Видимые теги для работы.
Атрибуты тегов.
Атрибуты специального назначения.
Атрибуты общего назначения.
Текстовые теги. Преобразование текста.
Теги картинок и ссылок.
Стандарты и валидность. W3Cкомментарии в HTML;

Дополнительное видео

Где смотреть дополнительную информацию
Правило работы со справочниками
Работа с codepen и аналогами
Плейлист HTML для самых маленьких

Дополнительные сервисы и программы

Справочники по html
Ссылки на сервисы по расшариванию кода
Статья про Тег HEAD


Урок 6. Основы CSS.

Варианты подключения таблиц стилей.Селекторы CSS (id, class, вложенные элементы)Наследование и группирование свойствПриоритеты применения стилей

Работа с текстом в CSS
  • Декорирование текста
  • Преобразование текста
Цвета в CSS
  • Форматы цветов
  • Прозрачность (альфа-канал)
Блочная модель CSS


Дополнительное видео

Работа с инструментом Devtools от Google Chrome
Навык отладки своего кода

Дополнительные сервисы и программы

Справочники по CSS


Урок 7. Блочная модель в CSS. (Айдар) Строчные и блочные элементы HTML

Ширина, высота, рамка и отступы объектов
Как работает Float
Зачем нужен clearfix Наследование CSS-свойствАбсолютные и относительные пути


Результат модуля:

Настроенное рабочее пространство. Подготовленный шаблон для дальнейшей работы.
Понимание базовых основ HTML и CSS.


Модуль 2. Работа с первым проектом.
Зачем: Для того, чтобы получить первые результаты работы уже на первой неделе курса. Привыкаем писать код и приучаемся делать это быстро.

Урок 8. Верстка первого макета на примере реального psd. Пробуем верстку на чистом HTML И CSS

Визуальная разметка страницыОсновные теги для верстки (div и span); отступы элементов (margin и padding); обтекаемые элементы; позиционирование блоков

Создание каркаса
Стилизация страницы
Завершение работы. Готовый сайт.

Дополнительные видео

Стилевые помощники reset.css и normalize.css

Дополнительные сервисы и программы

Ссылки на reset.css и normalize.css


Урок 9. Ускорение верстки в разы. Подключение библиотеки bootstrap 4 для быстрой верстки

Что такое колоночная верстка?
Готовые классы bootstrap 4

Дополнительные видео

Как правильно и быстро находить информацию по bootstrap

Дополнительные сервисы и программы

Ссылка на официальную документацию bootstrap
Русскоязычная документация от bootstrap
Пару слов об material design


Урок 10. Верстка макета при помощи bootstrap 4. Визуальная разметка страницы

Создание каркаса
Разметка по сетке
Стилизация страницы
Завершение работы, готовый сайт


Урок 11. FlexBox CSS. Свойство display: flex

Выравнивание элементов по горизонтали justify-content
Выравнивание элементов по вертикали align-items
Направление главной оси flex-direction
Многострочность элементов flex-wrap
Многострочное выравнивание align-content
Порядок отображения элементов order
Базовая ширина элемента flex-basis
Растяжение элементов flex-grow
Сужение элементов flex-shrink
Выравнивание отдельных элементов align-self


Урок 12. Введение в CSS Grid Row.
Введение. Поддержка в браузерах.
Терминология Grid System.
Позиционирование элементов в сетке.
Базовый макет


Урок 13. Адаптивная верстка. Что такое адаптивная верстка. Что такое Мобильная вёрстка. Mobile First.

Относительные единицы и их применение (em, rem, %, vh, vw)
Работаем с @media запросами
Meta-тег viewport - зачем он нужен?

Дополнительные видео

Обзор сервиса для верстки в стиле pixel perfect
Обзор специального раздела в devtools

Дополнительные сервисы и программы

Плагин для точной верстки
Расширение для проверки адаптивности сайта devtools


Урок 14. HTML5 формы.

Добавление Аудио и Видео на страницу.
Усовершенствование традиционных форм.
Проверка форм на ошибки заполнения.
Новые типы элементов.
Работа тэгов <VIDEO> <AUDIO>.


Урок 15. БЭМ-нейминг: продвинутые техники использования.

Введение в БЭМ. Определения. Соглашение по именованию


Результат модуля:
2 макета, сверстанных в разных стилях: на чистом HTML и CSS и с использованием библиотеки Bootstrap 4. Навык быстрой адаптивной верстки с использованием сеток. Навык работы с препроцессорами.

Еженедельная прямая трансляция. Ответы на вопросы.
Модуль 3. Полноценная практика.
Зачем: применяем все полученные знания сразу на практике. Верстаем настоящий сайт. Учимся, сразу набивая руку и получая нужные навыки еще во время обучения.


Урок 16. Подключение шрифтов.

Теория.
Узнаем шрифты из макета
Подключение шрифтов через Google Fonts
Подключение нестандартных шрифтов
Параметры для шрифтов в CSS
Практика
Подключаем шрифты, верстаем шапку сайта

Дополнительные видео

Обзор сервисов по конвертации шрифтов
Как скачать найденный на Google Fonts шрифт
Иконочные шрифты

Дополнительные сервисы и программы

Сервис шрифтов от Google
Сайты для конвертации шрифтов
Плагин для Google Chrome по определению шрифта


Дополнительный Урок. Работа с текстом.

Работа с шрифтами. Размещение текста в несколько колонок.
Рассмотрим механизмы представления текстовой информации: оформление, выравнивание, отступы.
Переключаемые вкладки для создания меню.
Рассмотрим основы Canvas.
Рассмотрим работу с границами в CSS, способы создания рамок элементов.
Создание прозрачных рамок, теней, скругленных углов, градиентов


Урок 17. Псевдоклассы и псевдоэлементы в CSS.

Псевдоклассы на примере ссылок и картинок
Псевдоэлементы, что это такое
Верстка из макета элементов с наведением
Верстка главной секции сайта

Дополнительные видео

Всплывающее окно без JS (:target)

Дополнительные сервисы и программы

Ссылка на библиотеку эффектов при наведении


Урок 18. Формы на сайте HTML + CSS

Синтаксис HTML-форм на сайте
Оформление элементов форм в CSS
Правила и частые ошибки в оформлении форм
Верстаем форму из макета на главном экране


Дополнительные видео:

Наложение масок на поле с номером телефона

Дополнительные ссылки

Ссылка на плагин для валидации форм validate.js


Урок 19. Адаптив. Практика. Как адаптировать сайт при помощи классов Bootstrap

Как сделать адаптив при помощи @media запросов
Оптимизация изображений под дисплеи «Ретина»
Делаем адаптив для первого блока на сайте
Проверка адаптива через Dev Tools Google Chrome


Урок 20. Знакомство с JavaScript плагинами на jQuery

Основы Javascript
  • Синтаксис JS
  • Внешние скрипты, порядок исполнения
  • Структура кода
  • Типы данных
  • Основные операторы
  • Операторы сравнения и логические значения
  • Условные операторы: if, '?'
  • Переменные
  • Функции
  • Циклы while, for
  • массивы
  • структуры данных
  • Стандарты ES5/ES6
Подключение сторонних библиотек к сайту
Что такое jQuery-библиотека и какие есть плагины Обработка событий в JavaScript. Понятие события; обработка нажатий;
Слайдеры на jQuery (примеры и применение)
Подключение библиотеки jQuery к сайту
Установка и гибкая настройка слайдера на сайте


Урок 21. Всплывающие окна на jQuery

Что такое модальные (всплывающие) окна
Что бывает внутри всплывающих окон
Готовые плагины всплывающих окон
  • Стандартное от Bootstrap
  • fancybox
  • Другие плагины
Верстка всплывающих окон из макета


Дополнительные видео

Как не делать кучу окон в HTML

Еженедельная прямая трансляция. Ответы на вопросы.


Урок 22. Основы JavaScript + jQuery. Переменные, функции, типы данных и пр. в Javascript

Как jQuery помогает ускорить работу в разы?
Селекторы в jQuery
Событиях в jQuery
Анимация, атрибуты и др. Манипуляции в jQuery


Урок 23. jQuery ajax. Что такое AJAX?

Один простой пример
Обработка ответаОбработка JSON в теле ответа
AJAX методы: $.ajax(), $.get(), $.post()


Урок 24. Анимация на CSS3

Ключевые кадры анимации
Название анимации, длительность, задержка и т.д.
Временная функция анимации
Множественные анимации Keyframes: пишем покадровую анимацию
Подключение анимации animate.css
Срабатывание анимации при скролле страницы
Продолжаем верстку макета, применяем анимацию в макете там, где это уместно

Дополнительные видео

Обзор библиотек с анимацией на CSS3

Дополнительные сервисы и программы

Библиотека с анимациями


Урок 25. Слайдеры для сайта

Как работают слайдеры, когда их нужно применять
Обзор самых гибких слайдеров (Fotorama)
Верстаем и настраиваем слайдер на нашем сайте
Делаем слайдер для мобильной версии сайта


Урок 26. Гео-карты для сайта. Вставка карт от Яндекс и Google через конструктор карт

Настройка карт через js (песочница)
Подключение карт на сайте от 2gis
Устанавливаем Яндекс Карты и Google Maps через конструктор
Настраиваем Яндекс карту на сайте через JavaScript API
Базовый пример множества меток
Что делать когда меток становится очень много?


Урок 27. Аналитика для сайта. Установка счетчика Яндекс метрики

Настройка целей в метрике
Установка счетчика от Google Analytics
Вставка пикселя ретаргетинга ВК

Дополнительные видео

Обзор возможностей вебвизора от Яндекс
Подключение чата к сайту
Виджеты обратного звонка, как настроить?


Урок 28. Как делаются многостраничные сайты. Настраиваем локальный сервер.

Что за язык PHP - изучаем синтаксис
Пишем простой многостраничный сайт

Дополнительные видео

Настройка сервера на Mac OS
Форма обратной связи на PHP

Дополнительные сервисы и программы

Скрипт отправки почты на PHP
Программа локального сервера Open Server и MAMP PRo


Урок 29. Тестирование верстки. Тестирование на валидность

W3C стандарты - что это?
Тесты на скорость загрузки
Как оптимизировать сайт для быстрой загрузки
Публикуем проект

Дополнительные видео к уроку

Оптимизация под Internet Explorer
Как проверить свою верстку на разных браузерах

Дополнительные сервисы и программы к уроку

Сервисы для проверки верстки на валидность и кроссбраузерность


Урок 30. Большой урок по Bitrix. Установка Bitrix на сервер

Устройство шаблонов в системеНатяжка верстки
Компоненты MVC
Bitrix Marketplace


Урок 31. Git И зачем он нужен. Что такое GIT

Для чего он нужен
Пример командной работы с использованиеме GIT-a
Модуль 4. Первые деньги на веб-разработке
Зачем: Чтобы научиться продавать свои услуги и зарабатывать деньги.
В этом блоке кроется вся соль курса. Теперь вы - самостоятельная боевая единица.


Урок 32. Развитие себя как специалиста. Какие навыки стоит прокачивать в 2018 году.

— Области роста для веб-разработчика.
— Сценарии развития: студия и фриланс.
— Как оформлять свое портфолио, где нужно быть зарегистрированным.
— БлогБастер. Почему нужно вести блог. Где это лучше делать.
— YouTube, behance, dribbble - источники заказов.
— Фриланс-биржи - оформление профиля.

Как оформить портфолио

— Что значит «Я до тебя доберусь»
— Ваша страница в соц сетях - это тоже портфолио
— Нужен ли свой сайт. Какой он должен быть?
— Где еще разместить свои работы. Где не нужно?
— Примеры хорошо оформленных портфолио
— Фейковые работы? Зачем?


Урок 33. Поиск заказчика. Как позвонить незнакомцу и подружится. Работа с агентствами.

— Сценарий разговора с клиентом из Авито
— Зачем не нужно продавать в лоб
— Уводим клиента на встречу
— Скрипт разговора на встрече. Какие материалы брать с собой

Партнерские продажи

— Кто такие «Партнеры»
— Кому надо написать, чтобы дали заказ
— Таблица исполнителей. Как заполнять, зачем нужна.
— Как завести промоутеров и кто это в нашем случае
— При чем тут ИП?


Урок 34. Как поступить в Университет Иннополис?

Результат этого модуля:
Портфолио, подготовленное и опубликованное на всех необходимых площадках. Грамотно оформленная страница в социальных сетях. Первые заработанные деньги.


Необходимо больше подробностей о курсе?
Актуальная информация у наших менеджеров. Оставьте свои данные, мы перезвоним в течение 15 минут.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Готов к заказам?
6
На курсе ты освоишь основы веб-разработки, соберёшь своё портфолио и научишься составлять резюме для поиска работы.
На бонусной неделе мы поможем тебе найти заказ на фрилансе или устроиться в студию.
За это время вместе с куратором ты освоишь основы веб-разработки, научишься верстать сайты, используя современные технологии, и узнаешь, как на этом зарабатывать.
В конце курса ты выполнишь один из дипломных проектов:
Лендинг
Корпоративный
сайт
Интернет-магазин
30
урока
60
простых и сложных ДЗ
1000
строк кода
недель
Отзывы наших студентов
Василий Круговых

"У меня остались только положительные эмоции. После обучения у меня появилось полное представление о том как всё делается от начала и до конца!"

Больше видеоотзывов
Алексей Жикин

"Один из самых сильных моментов курса - это куратор, который всегда тебе может подсказать и направить. Мне понравилось создавать сайт дня домашних работ. Среди конкурса по этим работам я занял 3 место"

Больше видеоотзывов
Записывайся на курс на самых выгодных условиях :)
Close
Формат обучения
Ты сможешь обучаться там где удобно,
и когда тебе удобно!
30
уроков
Обучайся в удобное
для тебя время
30
заданий
С проверкой
и обратной связью
30
заданий
Углубленного уровня
для тех, кто хочет получить от курса максимум
Это один из уроков из курса WEB-START. Посмотри его, чтобы оценить качество и подачу материала.
Доступ к видео-урокам
Общий чат с участниками
Еженедельный стрим с автором курса
Возможность попасть в закрытую
дипломную группу
Защита дипломной работы
Доступ к видео-урокам
Общий чат с участниками
Проверка домашек куратором
Закрытый чат с куратором
Скайп сессии разбора домашек
Видеоразбор домашней работы
Еженедельный стрим с автором курса
Возможность попасть в закрытую
дипломную группу
Защита дипломной работы
Доступ к видео-урокам
Общий чат с участниками
Проверка домашек куратором
Закрытый чат с куратором
Скайп сессии разбора домашек
Видеоразбор домашней работы
Еженедельный стрим с автором курса
Возможность попасть в закрытую
дипломную группу
Защита дипломной работы
Индивидуальная программа обучения
от автора курса
14 990
22 990
34 990
Все сам
Полный фарш
VIP
Тарифы и цены
ЛУЧШИЙ ВЫБОР
40 мест 2 места
60 мест 7 мест
5 мест 3 места
Осталось 10 мест по старой цене.
Как только их займут, цены вырастут на 10 000 рублей.
Дарим лучшему студенту MacBook
Записавшись на курс WEB START ты получишь возможность проявить себя. Выполняй вовремя и качественно все задания, защити свою дипломную работу, стань лучшим студентом и забери
свой MacBook.
Академия верстки в цифрах
5000 студентов
Уже прошли обучение
в Академии верстки
30 000 рублей
В месяц зарабатывает в среднем студент после обучения
62 куратора
Обучают и помогают нашим студентам
12 стран
Обучаем по всему земному шару
Часто задаваемые вопросы
Останутся ли видеозаписи после курса?
  • Видео-уроки доступны в течение всего курса (приблизительно 6 недель).
  • По окончании курса, если вы успешно сдали домашние задания 18 уроков, у вас есть возможность получить видео-записи бесплатно (за оставленный видео-отзыв).
  • В случае, если вы не выполняли домашние задания, для вас будет возможность приобрести записи курса за отдельную плату (1990 рублей).
Я хочу работать с наставником, как сменить свой тариф?
  • Для смены тарифного плана, вам необходимо доплатить сумму, недостающую до тарифа «Полный фарш».
  • После этого с вами свяжется администратор курса и расскажет, что делать дальше.
  • Ссылку для оплаты перехода на тариф «Полный фарш» вы можете найти на платформе (справа в уроках).
Если я без наставника, куда я могу задавать свои вопросы?
  • Вы и все ваши сокурсники должны быть в нашем общем аккаунте Дискорд. Там есть специальный канал, который называется #помощь - туда вы можете задать вопрос и получить ответ от сокурсников.
  • Еще вы можете задать вопрос в канал #вопросы_к_трансляции - на эти вопросы отвечает преподаватель на еженедельных трансляциях в прямом эфире.
Могу ли я поменять своего куратора в течение курса?
  • Если продолжать работу с выбранным куратором вы не можете, попросите Администратора перенести вас к другому куратору.
  • Обязательно укажите причину.
Необходимо больше подробностей о курсе?
Актуальная информация у наших менеджеров. Оставьте свои данные, мы перезвоним в течение 15 минут.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Академия верстки
ИП Алтынбаев Рифат Шавкатович
ОГРНИП: 314028000072379
ИНН 165718695542
+7 843 249 00 64
Made on
Tilda