Как устроен интернет
Поговорим о базовых понятиях в Интернете и его архитектуре. Узнаем, что такое домен, хостинг, клиент-серверная архитектура. Настроим рабочее окружение и поговорим о трех китах Front-end разработки - HTML, CSS и JavaScript.
HTML
Структура HTML-документа
Создадим первые HTML-страницы, рассмотрим примеры простых и сложных веб-страниц. Разберемся, какие блоки должны быть в нашей странице. Заставим наши страницы ссылаться друг на друга, узнаем чем текст отличается от гипертекста и что такое теги и атрибуты.
Работа с текстом
Узнаем как правильно работать с текстом в HTML: разбивать его на абзацы, указывать заголовки и подзаголовки. Научимся делать нумерованные и маркированные списки и процитируем классиков.
Ссылки и изображения
Подробнее познакомимся со ссылками, а также научимся вставлять картинки и использовать их в качестве ссылок.
Верстка таблиц
Создадим свою первую таблицу и узнаем из каких тегов она состоит. Научимся объединять ячейки, менять количество строк, столбцов, выравнивать текст и многое другое. Также узнаем основные советы от дизайнера, как сделать вашу таблицу красивой.
Знакомство с формами
Сверстаем свою первую форму, научимся работать с полями ввода, выпадающими списками, чекбоксами и, конечно же, кнопками. Изучим прочие элементы форм, которые пригодятся нам в дальнейшем.
CSS
Знакомство с CSS
Вспомним, что такое CSS и как его использовать. Узнаем как используют CSS при работе с HTML-страницами. Изучим синтаксис CSS и что такое селекторы, наследование, с каким приоритетом наши стили применяются к HTML-документу.
Селекторы
Более подробно изучим селекторы. Узнаем как обращаться к одному или нескольким элементам, в чем отличие класса от псевдокласса и элемента от псевдоэлемента. Посмотрим на рекомендации по работе с CSS и узнаем, что любят спрашивать на собеседовании о CSS.
Наследование, каскадирование и приоритет
Узнаем, что каскадирование и каскадеры - это не из одной области. Поймем по каким принципам CSS-стили применяются к HTML элементам.
Оформление текста
Вернемся к тому, с чего начинали - к тексту. Узнаем как делать наш текст красивым и удобным для пользователя, используя CSS-свойства: жирность, курсив, размер, цвет, фон и прочие.
Блочная модель документа
Изучим теги div и span, а также как задавать размеры элементов, отступы и рамки. Поймем как формируется блочная модель документа и какими возможностями по позиционированию элементов мы обладаем.
JavaScript
Знакомство с JavaScript
Познакомимся с третьим китом Front-end разработки - JavaScript. Узнаем что такое переменные, типы данных и зачем они нужны. И конечно же напишем свою первую программу.
Условия
Вспомним о логике, логических операциях и их комбинациях. Да прибудет с нами сила и контроль над ней.
Циклы
Узнаем как делать много, а писать при этом мало кода. Поймем что цикл в цикле - это просто, но нужно быть внимательным.
Массивы
Бывают массивы льда, леса и бывают массивы в программировании. Что между ними общего, а чем они отличаются - мы изучим в этом уроке. Подсказка - нам очень помогут циклы из предыдущего урока.
Функции
Если переменные и правильно выбранное имя для них - это азбука программирования, то умение работать с функциями и выбирать им подходящие имена - это уже пропись. Как разбивать программу на логические блоки и почему это важно - мы узнаем в этом уроке.
Объекты
Мы познакомимся с понятием объектов, методов и начнем знакомится с принципами ООП.
Введение в DOM
JavaScript был бы бесполезен, если бы он не мог взаимодействовать с HTML документом. Мы узнаем, что такое DOM (Document Object Model), но что более важно, мы научимся через JavaScript работать с HTML и CSS.
Обработка событий
А теперь мы перейдем на новый уровень и узнаем, как реагировать и взаимодействовать с пользователем при помощи JavaScript. Также мы узнаем, почему события в JavaScript могут всплывать и тонуть.
HTML5 & CSS3
HTML5: что нового и почему?
Узнаем какие изменения произошли в HTML5 и почему. Изучим новые элементы и разберем кейсы их правильного использования.
Позиционирование элементов и сетки
Разберемся с новыми способами структурирования страниц и позиционирования элементов на них.
HTML5 формы
Познаем темную сторону силы и попрактикуемся с новыми формами в HTML5, а также с изменениями в старых. Поработаем с новыми типами полей для ввода дат, цветов, чисел и как подсказывать пользователю, чтобы сделать его жизнь чуточку легче.
Аудио и видео
В этом уроке вы диджей, а также монтажер. Собственный Youtube за этот урок мы сделать не успеем, а вот сверстать прототип с базовой функциональностью очень постараемся.
Работа с текстом в CSS3
Узнаем какие есть возможности и рекомендацию по оформлению текста в последней версии стандарта.
Эффекты перехода и трансформации в CSS3
Узнаем как создавать анимацию и различные эффекты при помощи CSS3. Ознакомимся с подводными камнями при создании таких эффектов.
Адаптивная вёрстка
Узнаем для чего нужно верстать адаптивно, а когда это излишне и может навредить. Разберем основной синтаксис и, конечно, попрактикуемся в адаптивной верстке.
Flexbox & CSS Grid
Узнаем о современных подходах к блочной верстке, а также какие есть сложности с их использованием.
CSS препроцессоры: LESS и SASS
Хотите использовать переменные в CSS? Легко! Узнаете, что можно сделать интересного использовании CSS препроцессоров.
JavaScript на новом уровне
ES-2015+
Что такое современный JavaScript, "строгий режим" и как жить со всем этим.
ООП в JavaScript
Изучим как устроены классы в современном JavaScript и зачем они используются, если можно сделать все на функциях. Как устроено наследование и какие еще способы создания классов существуют в JS.
Функции в деталях
Узнаем что такое Function Declaration и Function Expression, узнаем как вызвать функцию без имени. Разберемся с таким словосочетанием как "привязка контекста".
AJAX и JSON
Выведем себя на новый уровень как разработчиков, научимся делать HTTP запросы, и узнаем как сервер и клиент могут общаться друг с другом и не ссориться.
Регулярные выражения
"Если у вас есть проблема, и вы собираетесь её решать с помощью регулярных выражений, тогда у вас будет уже две проблемы". Узнаем, как не выстрелить себе в ногу при помощи регулярных выражений.
Сборщики, таск-раннеры и управление зависимостями
Bower, npm, gulp, Grunt, webpack и ко. В этом нет ничего сложного, но нужно будет разобраться.
Тестирование в JavaScript
Там где есть код, всегда есть ошибки. Вы узнаете как минимизировать их количество и какие практики и инструменты в этом нам помогут.
Алгоритмы
Узнаем как писать код так, чтобы потом процессору и браузеру не было мучительно больно при запуске вашей программы.
ReactJS
Введение в ReactJS
Познакомимся с ReactJS, научимся писать простые компоненты и сравним его с другими популярными фреймворками. Знакомимся с концепцией Virtual DOM.
Архитектура и настройка React приложений
Узнаем какие действия нам нужно произвести, чтобы не просто писать на React, но и делать это максимально эффективно и удобно.
Создаем первое приложение на ReactJS
Более подробно знакомимся с JSX, ReactComponent, ReactDOM.render, Render function. Настраиваем и запускаем первое приложение, устанавливаем взаимосвязи между компонентами и обрабатываем события.
Роутинг и ReactJS
Что такое роутинг; Знакомимся с ReactRouter и его функциональностью; организуем роутинг в нашем приложении.
