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

Поговорим о базовых понятиях в Интернете и его архитектуре. Узнаем, что такое домен, хостинг, клиент-серверная архитектура. Настроим рабочее окружение и поговорим о трех китах 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 и его функциональностью; организуем роутинг в нашем приложении.