logo
planet
astranaut
ONLINE-КУРС

Стань веб-разработчиком с нуля за 6 недель с доходом от 30 000 рублей в месяц

11 сентября

Записаться

Для кого подойдет курс WEB START

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

61 год

самый старший ученик курса

7 лет

самый младший ученик курса

for-cource

Программа курса WEB START

Модуль №1

Погружение в тему. Изучение основ HTML и CSS.

Зачем: Чтобы понимать весь процесс создание сайтов с нуля до полной реализации. Знать, как работает сфера, где лежат деньги и как выбрать свое место. Чтобы влиться в тему и начать понимать языки разметки для дальнейшей работы. Тут базовые понятия без которых никуда.

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

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

  • -Навык работы с дизайн-макетом

  • -Горячие клавиши для быстрой работы с макетом

  • -Работа со слоями, папками, смарт-объектами

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

  • Создание сетки для макета в Adobe Photoshop

  • Создание макросов для работы в Adobe Photoshop

  • Работа с графикой в Photoshop (старый видео-урок)

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

  • Ссылка на сайты с более чем 180+ PSD макетами

Урок 3. Работа с графикой для верстальщика. Формат и требования дизайн-макетов.

  • -Графика для web (gif, png, jpeg, svg)

  • -Avocode для быстрой работы с графикой

  • -Как открывать проекты .sketch

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

  • Плагины для работы верстальщика в Google Chrome

  • Сервисы для тестирования верстки

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

  • Сервис для векторизации изображений онлайн

Урок 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. Большой урок по WordPress

Установка WordPress на сервер

Устройство шаблонов в системе

Натяжка вёрстки

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

Для чего он нужен

Пример командной работы с использованиеме GIT-a

Диплом

Выпускной проект

Примеры дипломных работ

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

Уверенность в своих силах, работа в портфолио

Модуль №4

Первые деньги на веб-разработке.

Зачем: Чтобы научиться продавать свои услуги и зарабатывать деньги. В этом блоке кроется вся соль курса. Теперь вы - самостоятельная боевая единица.

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

  • — Области роста для веб-разработчика.

  • — Сценарии развития: студия и фриланс.

  • — Как оформлять свое портфолио, где нужно быть зарегистрированным.

  • — БлогБастер. Почему нужно вести блог. Где это лучше делать.

  • — YouTube, behance, dribbble - источники заказов.

  • — Фриланс-биржи - оформление профиля.

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

  • — Что значит «Я до тебя доберусь»

  • — Ваша страница в соц сетях - это тоже портфолио

  • — Нужен ли свой сайт. Какой он должен быть?

  • — Где еще разместить свои работы. Где не нужно?

  • — Примеры хорошо оформленных портфолио

  • — Фейковые работы? Зачем?

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

  • — Сценарий разговора с клиентом из Авито

  • — Зачем не нужно продавать в лоб

  • — Уводим клиента на встречу

  • — Скрипт разговора на встрече. Какие материалы брать с собой

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

  • — Кто такие «Партнеры»

  • — Кому надо написать, чтобы дали заказ

  • — Таблица исполнителей. Как заполнять, зачем нужна.

  • — Как завести промоутеров и кто это в нашем случае

  • — При чем тут ИП?

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

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

Необходимо больше подробностей о курсе?

Узнать

Готов к реальным заказам?

На курсе ты освоишь основы веб-разработки, соберёшь своё портфолио и научишься составлять резюме для поиска работы.

34 урока

60 домашек

1000 строк кода

6 недель
icon1
icon2
icon3

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

ЗАПИСАТЬСЯ

Отзывы наших СТУДЕНТОВ

Еще больше отзывов здесь

reviews1
reviews2
reviews3
reviews4
reviews4
reviews4

ФОРМАТ ОБУЧЕНИЯ

Ты сможешь обучаться там где удобно, и когда тебе удобно!

30 уроков

обучайся в удобное для тебя время

30 заданий

с проверкой и обратной связью

30 заданий

углубленного уровня для тех, кто хочет получить от курса максимум

Это один из уроков из курса WEB-START. Посмотри его, чтобы оценить качество и подачу материала.

play

Стажировка СТУДЕНТОВ

Три лучших студента получат возможность пройти стажировку в веб-студиях с возможностью трудоустройства

internship1
internship1
internship1
БУДУ ЛУЧШИМ!

ТАРИФЫ и цены

ВСЕ САМ

10 990 руб.

15 990 руб. В рассрочку за 1 832 в месяц

Доступ к видео-урокам

Общий чат с участниками

Еженедельный стрим с автором курса

Защита дипломной работы

ПОЛНЫЙ ФАРШ

16 990 руб.

21 990 руб. В рассрочку за 2 832 в месяц

Доступ к видео-урокам

Общий чат с участниками

Проверка домашек куратором

Закрытый чат с куратором

Скайп сессии разбора домашек

Видеоразбор домашней работы

Еженедельный стрим с автором курса

Защита дипломной работы

АКАДЕМИЯ ВЕРСТКИ В ЦИФРАХ

5000 студентов

уже прошли обучение в Академии верстки

30 000 рублей

зарабатывает в среднем студент после обучения

62 куратора

обучают и помогают нашим студентам

12 стран

обучаем по всему земному шару

images

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Вопрос №1

Остануться ли видеозаписи после прохождения курса?

  • — Видео-уроки доступны в течение всего курса (приблизительно 6 недель).

  • — По окончании курса, если ты успешно сдал все домашние задания, у тебя есть возможность получить видео-записи бесплатно (за оставленный видео-отзыв).

  • — В случае, если ты не выполнял домашние задания, для тебя будет возможность приобрести записи курса за отдельную плату (1990 рублей).

Вопрос №2

Как сменить свой тариф?

  • — Для смены тарифного плана, тебе необходимо доплатить сумму, недостающую до тарифа «Полный фарш».

  • — После этого с тобой свяжется администратор курса и расскажет, что делать дальше.

  • — Ссылку для оплаты перехода на тариф «Полный фарш» ты можешь найти на платформе (справа в уроках).

Вопрос №3

Если я обучаюсь без наставника, кому задавать вопросы?

  • — Ты и все твои сокурсники должны быть в нашем общем аккаунте Дискорд. Там есть специальный канал, который называется #помощь - туда ты можешь задать вопрос и получить ответ от сокурсников.

  • — Еще ты можешь задать вопрос в канал #вопросы_к_трансляции - на эти вопросы отвечает преподаватель на еженедельных трансляциях в прямом эфире.

Вопрос №4

Могу ли я поменять куратора в течение курса?

  • — Если продолжать работу с выбранным куратором ты не можешь, попроси Администратора перенести тебя к другому куратору.

  • — Обязательно укажи причину.

Необходимо больше подробностей о курсе?

Узнать
Close
Close
Close
Close
Close
Close
Close
Close