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

Курс "Создание сайтов"

Школа HelloWorld

Пройди наш курс, разрабатывай и создавай сайты и игры и делись со своими друзьями.

Что я получу от курса?

  1. Магия перестает существовать после того, как вы понимаете, как она работает.
  2. сможешь создавать сайты, их мобильные версии а также браузерные игры;
  3. научишься работать с программами, которые программисты используют в работе;
  4. обучение у наставника поможет расти быстрее и не забросить обучение;
  5. возможность пройти стажировку в IT компании.

Что дальше?

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

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

  1. Как устроен интернет. Поговорим о базовых понятиях в Интернете и его архитектуре. Узнаем, что такое домен, хостинг, клиент-серверная архитектура. Настроим рабочее окружение и поговорим о трех китах Front-end разработки - HTML, CSS и JavaScript.
  2. HTML. Структура HTML-документа. Создадим первые HTML-страницы, рассмотрим примеры простых и сложных веб-страниц.
  3. Разберемся, какие блоки должны быть в нашей странице. Заставим наши страницы ссылаться друг на друга, узнаем чем текст отличается от гипертекста и что такое теги и атрибуты.
  4. Работа с текстом. Узнаем как правильно работать с текстом в HTML: разбивать его на абзацы, указывать заголовки и подзаголовки. Научимся делать нумерованные и маркированные списки и процитируем классиков.
  5. Ссылки и изображения. Подробнее познакомимся со ссылками, а также научимся вставлять картинки и использовать их в качестве ссылок.
  6. Верстка таблиц. Создадим свою первую таблицу и узнаем из каких тегов она состоит. Научимся объединять ячейки, менять количество строк, столбцов, выравнивать текст и многое другое. Также узнаем основные советы от дизайнера, как сделать вашу таблицу красивой.
  7. Знакомство с формами. Сверстаем свою первую форму, научимся работать с полями ввода, выпадающими списками, чекбоксами и, конечно же, кнопками. Изучим прочие элементы форм, которые пригодятся нам в дальнейшем.
  8. CSS. Знакомство с CSS. Вспомним, что такое CSS и как его использовать. Узнаем как используют CSS при работе с HTML-страницами. Изучим синтаксис CSS и что такое селекторы, наследование, с каким приоритетом наши стили применяются к HTML-документу.
  9. Селекторы. Более подробно изучим селекторы. Узнаем как обращаться к одному или нескольким элементам, в чем отличие класса от псевдокласса и элемента от псевдоэлемента. Посмотрим на рекомендации по работе с CSS и узнаем, что любят спрашивать на собеседовании о CSS.
  10. Наследование, каскадирование и приоритет. Узнаем, что каскадирование и каскадеры - это не из одной области. Поймем по каким принципам CSS-стили применяются к HTML элементам.
  11. Оформление текста. Вернемся к тому, с чего начинали - к тексту. Узнаем как делать наш текст красивым и удобным для пользователя, используя CSS-свойства: жирность, курсив, размер, цвет, фон и прочие.
  12. Блочная модель документа. Изучим теги div и span, а также как задавать размеры элементов, отступы и рамки. Поймем как формируется блочная модель документа и какими возможностями по позиционированию элементов мы обладаем.
  13. JavaScript. Знакомство с JavaScript. Познакомимся с третьим китом Front-end разработки - JavaScript. Узнаем что такое переменные, типы данных и зачем они нужны. И конечно же напишем свою первую программу.
  14. Условия. Вспомним о логике, логических операциях и их комбинациях. Да прибудет с нами сила и контроль над ней.
  15. Циклы. Узнаем как делать много, а писать при этом мало кода. Поймем что цикл в цикле - это просто, но нужно быть внимательным.
  16. Массивы. Бывают массивы льда, леса и бывают массивы в программировании. Что между ними общего, а чем они отличаются - мы изучим в этом уроке. Подсказка - нам очень помогут циклы из предыдущего урока.
  17. Функции. Если переменные и правильно выбранное имя для них - это азбука программирования, то умение работать с функциями и выбирать им подходящие имена - это уже пропись. Как разбивать программу на логические блоки и почему это важно - мы узнаем в этом уроке.
  18. Объекты. Мы познакомимся с понятием объектов, методов и начнем знакомится с принципами ООП.
  19. Введение в DOM. JavaScript был бы бесполезен, если бы он не мог взаимодействовать с HTML документом. Мы узнаем, что такое DOM (Document Object Model), но что более важно, мы научимся через JavaScript работать с HTML и CSS.
  20. Обработка событий. А теперь мы перейдем на новый уровень и узнаем, как реагировать и взаимодействовать с пользователем при помощи JavaScript. Также мы узнаем, почему события в JavaScript могут всплывать и тонуть.
  21. HTML5 & CSS3. HTML5: что нового и почему?. Узнаем какие изменения произошли в HTML5 и почему. Изучим новые элементы и разберем кейсы их правильного использования.
  22. Позиционирование элементов и сетки. Разберемся с новыми способами структурирования страниц и позиционирования элементов на них.
  23. HTML5 формы. Познаем темную сторону силы и попрактикуемся с новыми формами в HTML5, а также с изменениями в старых. Поработаем с новыми типами полей для ввода дат, цветов, чисел и как подсказывать пользователю, чтобы сделать его жизнь чуточку легче.
  24. Аудио и видео. В этом уроке вы диджей, а также монтажер. Собственный Youtube за этот урок мы сделать не успеем, а вот сверстать прототип с базовой функциональностью очень постараемся.
  25. Работа с текстом в CSS3. Узнаем какие есть возможности и рекомендацию по оформлению текста в последней версии стандарта.
  26. Эффекты перехода и трансформации в CSS3. Узнаем как создавать анимацию и различные эффекты при помощи CSS3. Ознакомимся с подводными камнями при создании таких эффектов.
  27. Адаптивная вёрстка. Узнаем для чего нужно верстать адаптивно, а когда это излишне и может навредить. Разберем основной синтаксис и, конечно, попрактикуемся в адаптивной верстке.
  28. Flexbox & CSS Grid. Узнаем о современных подходах к блочной верстке, а также какие есть сложности с их использованием.
  29. CSS препроцессоры: LESS и SASS. Хотите использовать переменные в CSS? Легко! Узнаете, что можно сделать интересного использовании CSS препроцессоров.
  30. JavaScript на новом уровне. ES-2015+. Что такое современный JavaScript, "строгий режим" и как жить со всем этим.
  31. ООП в JavaScript. Изучем как устроены классы в современном JavaScript и зачем они используются, если можно сделать все на функциях. Как устроено наследование и какие еще способы создания классов существуют в JS.
  32. Функции в деталях. Узнаем что такое Function Declaration и Function Expression, узнаем как вызвать функцию без имени. Разберемся с таким словосочетанием как "привязка контекста".
  33. AJAX и JSON. Выведем себя на новый уровень как разработчиков, научимся делать HTTP запросы, и узнаем как сервер и клиент могут общаться друг с другом и не ссориться.
  34. Регулярные выражения. "Если у вас есть проблема, и вы собираетесь её решать с помощью регулярных выражений, тогда у вас будет уже две проблемы". Узнаем, как не выстрелить себе в ногу при помощи регулярных выражений.
  35. Сборщики, таск-раннеры и управление зависимостями. Bower, npm, gulp, Grunt, webpack и ко. В этом нет ничего сложного, но нужно будет разобраться.
  36. Тестирование в JavaScript. Там где есть код, всегда есть ошибки. Вы узнаете как минимизировать их количество и какие практики и инструменты в этом нам помогут.
  37. Алгоритмы. Узнаем как писать код так, чтобы потом процессору и браузеру не было мучительно больно при запуске вашей программы.
  38. ReactJS. Введение в ReactJS. Познакомимся с ReactJS, научимся писать простые компоненты и сравним его с другими популярными фреймворками. Знакомимся с концепцией Virtual DOM.
  39. Архитектура и настройка React приложений. Узнаем какие действия нам нужно произвести, чтобы не просто писать на React, но и делать это максимально эффективно и удобно.
  40. Создаем первое приложение на ReactJS. Более подробно знакомимся с JSX, ReactComponent, ReactDOM.render, Render function. Настраиваем и запускаем первое приложение, устанавливаем взаимосвязи между компонентами и обрабатываем события.
  41. Роутинг и ReactJS. Что такое роутинг; Знакомимся с ReactRouter и его функциональностью; организуем роутинг в нашем приложении.