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

Создание веб-приложений

Возраст:
12-16 лет
Старт курса:
индивидуально
Расписание:
индивидуальное
Что я получу от курса?
Магия перестает существовать после того, как вы понимаете, как она работает.
Тим Бернерс-Ли
сможешь создавать сайты, их мобильные версии а также браузерные игры;
научишься работать с программами, которые программисты используют в работе;
получишь постоянный доступ к учебным материалам и обновлениям;
обучение у наставника поможет расти быстрее и не забросить обучение;
возможность пройти стажировку в IT компании.
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript








Игры на JavaScript

Поиграем в морской бой? Найди все корабли на карте!
Все корабли обнаружены? Нажми на кнопку "Solve" и посмотри как программа найдет выход из лабиринта!

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

Как устроен интернет

Поговорим о базовых понятиях в Интернете и его архитектуре. Узнаем, что такое домен, хостинг, клиент-серверная архитектура. Настроим рабочее окружение и поговорим о трех китах Front-end разработки - HTML, CSS и JavaScript.

HTML

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

Работа с текстом
Узнаем как правильно работать с текстом в HTML: разбивать его на абзацы, указывать заголовки и подзаголовки. Научимся делать нумерованные и маркированные списки и процитируем классиков.

Ссылки и изображения
Подробнее познакомимся со ссылками, а также научимся вставлять картинки и использовать их в качестве ссылок.

Верстка таблиц
Создадим свою первую таблицу и узнаем из каких тегов она состоит. Научимся объединять ячейки, менять количество строк, столбцов, выравнивать текст и многое другое. Также узнаем основные советы от дизайнера, как сделать вашу красивой.

Знакомство с формами
Сверстаем свою первую форму, научимся работать с полями ввода, выпадающими списками, чекбоксами и, конечно же, кнопками. Изучим прочие элементы форм, которые пригодятся нам в дальнейшем.

CSS

Знакомство с CSS
Вспомним, что такое CSS и как его использовать. Узнаем как используют CSS при работе с HTML-страницами. Изучим синтаксис CSS и что такое селекторы, наследование, с каким приоритетом наши стили применяются к HTML-документу.

Селекторы
Более подробно изучим селекторы. Узнаем как обращаться к одному или нескольким элементам, в чем отличие класса от псевдокласса и элемента от псевдоэлемента. Посмотрим на рекомендации по работе с CSS и узнаем, что любят спрашивать на собеседовании о CSS.

Наследование, каскадирование и приоритет
Узнаем, что каскадирование и каскадеры - это не из одной области. Поймем по каким принципам CSS-стили применяются к HTML элементам.

Оформление текста
Вернемся к тому, с чего начинали - к тексту. Узнаем как делать наш текст красивым и удобным для пользователя, используя CSS-свойства: жирность, курсив, размер, цвет, фон и прочие.

Блочная модель документа
Изучим теги div и span, а также как задавать размеры элементов, отступы и рамки. Поймем как формируется блочная модель документа и какими возможностями по позиционированию элементов мы обладаем.
1
2
3

JavaScript

Знакомство с JavaScript
Познакомимся с третьим китом Front-end разработки - JavaScript. Узнаем что такое переменные, типы данных и зачем они нужны. И конечно же напишем свою первую программу.

Условия
Вспомним о логике, логических операциях и их комбинациях. Да прибудет с нами сила и контроль над ней.

Циклы
Узнаем как делать много, а писать при этом мало кода. Поймем что цикл в цикле - это просто, но нужно быть внимательным.

Массивы
Бывают массивы льда, леса и бывают массивы в программировании. Что между ними общего, а чем они отличаются - мы изучим в этом уроке. Подсказка - нам очень помогут циклы из предыдущего урока.

Функции
Если переменные и правильно выбранное имя для них - это азбука программирования, то умение работать с функциями и выбирать им подходящие имена - это уже пропись. Как разбивать программу на логические блоки и почему это важно - мы узнаем в этом уроке.

Объекты
Мы познакомимся с понятием объектов, методов и начнем знакомится с принципами ООП.

Введение в DOM
JavaScript был бы бесполезен, если бы он не мог взаимодействовать с HTML документом. Мы узнаем, что такое DOM (Document Object Model), но что более важно, мы научимся через JavaScript работать с HTML и CSS.

Обработка событий
А теперь мы перейдем на новый уровень и узнаем, как реагировать и взаимодействовать с пользователем при помощи JavaScript. Также мы узнаем, почему события в JavaScript могут всплывать и тонуть.
4

HTML5 & CSS3

HTML5: что нового и почему?
Узнаем какие изменения произошли в HTML5 и почему. Изучим новые элементы и разберем кейсы их правильного использования.

Позиционирование элементов и сетки
Разберемся с новыми способами структурирования страниц и позиционирования элементов на них.

HTML5 формы
Познаем темную сторону силы и попрактикуемся с новыми формами в HTML5, а также с изменениями в старых. Поработаем с новыми типами полей для ввода дат, цветов, чисел и как подсказывать пользователю, чтобы сделать его жизнь чуточку легче.

Аудио и видео
В этом уроке вы диджей, а также монтажер. Собственный Youtube за этот урок мы сделать не успеем, а вот сверстать прототип с базовой функциональностью очень постараемся.

Работа с текстом в CSS3
Узнаем какие есть возможности и рекомендацию по оформлению текста в последней версии стандарта.

Эффекты перехода и трансформации в CSS3
Узнаем как создавать анимацию и различные эффекты при помощи CSS3. Ознакомимся с подводными камнями при создании таких эффектов.

Адаптивная вёрстка
Узнаем для чего нужно верстать адаптивно, а когда это излишне и может навредить. Разберем основной синтаксис и, конечно, попрактикуемся в адаптивной верстке.

Flexbox & CSS Grid
Узнаем о современных подходах к блочной верстке, а также какие есть сложности с их использованием.

CSS препроцессоры: LESS и SASS
Хотите использовать переменные в CSS? Легко! Узнаете, что можно сделать интересного использовании CSS препроцессоров.
5

JavaScript на новом уровне

ES-2015+
Что такое современный JavaScript, "строгий режим" и как жить со всем этим.

ООП в JavaScript
Изучем как устроены классы в современном JavaScript и зачем они используются, если можно сделать все на функциях. Как устроено наследование и какие еще способы создания классов существуют в JS.

Функции в деталях
Узнаем что такое Function Declaration и Function Expression, узнаем как вызвать функцию без имени. Разберемся с таким словосочетанием как "привязка контекста".

AJAX и JSON
Выведем себя на новый уровень как разработчиков, научимся делать HTTP запросы, и узнаем как сервер и клиент могут общаться друг с другом и не ссориться.

Регулярные выражения
"Если у вас есть проблема, и вы собираетесь её решать с помощью регулярных выражений, тогда у вас будет уже две проблемы". Узнаем, как не выстрелить себе в ногу при помощи регулярных выражений.

Сборщики, таск-раннеры и управление зависимостями
Bower, npm, gulp, Grunt, webpack и ко. В этом нет ничего сложного, но нужно будет разобраться.

Тестирование в JavaScript
Там где есть код, всегда есть ошибки. Вы узнаете как минимизировать их количество и какие практики и инструменты в этом нам помогут.

Алгоритмы
Узнаем как писать код так, чтобы потом процессору и браузеру не было мучительно больно при запуске вашей программы.
6

ReactJS

Введение в ReactJS
Познакомимся с ReactJS, научимся писать простые компоненты и сравним его с другими популярными фреймворками. Знакомимся с концепцией Virtual DOM.

Архитектура и настройка React приложений
Узнаем какие действия нам нужно произвести, чтобы не просто писать на React, но и делать это максимально эффективно и удобно.

Создаем первое приложение на ReactJS
Более подробно знакомимся с JSX, ReactComponent, ReactDOM.render, Render function. Настраиваем и запускаем первое приложение, устанавливаем взаимосвязи между компонентами и обрабатываем события.

Роутинг и ReactJS
Что такое роутинг; Знакомимся с ReactRouter и его функциональностью; организуем роутинг в нашем приложении.
7

Что дальше?

Мир программирования разнообразен и все зависит от Ваших целей. Мы очень рекомендуем Вам пройти курс по back-end разработке, так как это поможет Вам понять как устроены серверные приложения и достичь новых профессиональных высот.
8

Как начать обучение?

1
2
3
4
Оставьте заявку на сайте или в соцсетях, затем мы свяжемся с Вами.

Мы согласуем с Вами удобное время для пробного занятия.
Проводим урок, если Вам
и ребенку все нравится, то согласовываем расписание.
Начинаем заниматься
и создавать первые программы.
Запишитесь на бесплатный вводный урок!
На уроке:
  • познакомимся поближе;
  • поймем уровень вашего ребенка и готов ли он к занятиям;
  • вы увидите, как проходят занятия, а ребенок решит, интересно ли ему.
    E-MAIL
    ИМЯ
    ТЕЛЕФОН
    КОММЕНТАРИЙ
    Мы заботимся о Ваших персональных данных, подробный текст политики конфиденциальности доступен здесь - http://hwschool.online/ru/privacy.
    Контакты
    Присоединяйтесь к нам в соцсетях.
    Если у вас есть вопросы, мы будем рады помочь.

    E-mail

    hello@hwschool.online

    Телефон
    +7(995)600−19−51
    WhatsApp Viber Telegram
    Записаться на первый урок
    Определим ваши цели, сформируем программу и подберем удобное раписание.
    Мы заботимся о Ваших персональных данных, подробный текст политики конфиденциальности доступен здесь - http://hwschool.online/ru/privacy.
    Тим Бернерс-Ли
    Создатель первого в мире сайта и многих технологий, использующихся в Интернете.
    Made on
    Tilda