Основы HTML и CSS

Знакомимся с вёрсткой: теги, блочная модель, семантика и структура документа.

• Введение
• Введение в HTML
• Блочная модель
• Семантический HTML
• Базовая структура HTML-документа

Оформляем страницы: правила CSS и каскадность.

• Основы CSS
• Каскадность в CSS

Отлаживаем код в DevTools, работаем в редакторах и с Emmet, публикуем страницы и разбираемся с макетами.

• Chrome DevTools
• Редакторы кода
• Emmet
• Публикация в интернете
• Графические редакторы

Практические задания: собираем таблицу, карточки профилей и форму регистрации.

• Таблица
• Карточки профилей
• Форма регистрации

JavaScript – один из самых популярных языков программирования в мире. Он используется для создания интерактивных веб-страниц, мобильных приложений, в серверной разработке. Изучать JS мы будем с нуля, с самых азов. Первый модуль – плацдарм для написания осмысленных программ. В нем мы разберем, как написать свой первый код на JS. Расскажем, что такое комментарии и зачем они нужны. На примере проверки ваших решений рассмотрим, что такое тестирование и как читать вывод тестов. Объясним, почему нельзя нарушать грамматические правила языка программирования.

• Привет, Мир!
• Комментарии
• Инструкции (Statements)
• Как мы проверяем ваши решения
• Синтаксические ошибки

Современные программы создаются для обслуживания бизнесов, помощи в ежедневной жизни и развлечений. Но в основе их работы по-прежнему лежат вычисления. Наиболее простая и базовая тема в программировании — арифметика. В этом модуле мы переведем арифметические действия на язык программирования, поговорим о приоритете операций и операциях с дробным числами. Вспомним школьные правила из уроков математики и узнаем, что получится, если делить на ноль в JavaScript. А под конец расскажем, что такое линтер и почему он может «ругаться».

• Арифметические операции
• Операторы
• Коммутативная операция
• Композиция операций
• Приоритет операций
• Числа с плавающей точкой
• Бесконечность (Infinity)
• NaN
• Линтер

Текст в программировании называется «строками», и эта тема не так проста, как может показаться. Как вывести фразу, в которой есть и одинарные, и двойные кавычки? Как вообще быть с текстом, ведь компьютер не знает ничего о буквах! Модуль посвящен разным аспектам написания текста – от кавычек и экранирования до кодировки.

• Кавычки
• Экранирующие последовательности
• Конкатенация
• Кодировка

Информацию можно помещать в специальные «хранилища» — переменные. Это позволяет переиспользовать уже существующие данные и не дублировать их в разных частях кода. В этом модуле мы разберем как изменять переменные и именовать их, чтобы чтение вашего кода было понятным для любого разработчика. Вы поймете, что придумать название переменной не так-то просто! А еще расскажем, как использовать переменные для упрощения сложных вычислений.

• Что такое переменная
• Изменение переменной
• Выбор имени переменной
• Выражения в определениях
• Переменные и конкатенация
• Стили именования
• Магические числа
• Константы

В этом модуле мы научимся встраивать переменные в строки через интерполяцию, извлекать отдельные символы по индексу, работать со срезами строк и создавать многострочные строки.

• Интерполяция
• Извлечение символов из строки
• Срезы строк
• Многострочные строки

JavaScript — язык со слабой типизацией и неизменяемыми примитивными типами данных. Что произойдет, если мы попробуем умножить число на строку? Каким образом JavaScript понимает, что за тип данных перед ним? И что делает JavaScript, когда видит несоответствие типов? Ответы на эти вопросы вы найдете в текущем модуле.

• Типы данных
• undefined
• Слабая типизация
• Неизменяемость примитивных типов
• Явное преобразование типов

Для выражения любой произвольной операции в программировании существует понятие «функция». Функции — кирпичики, из которых программисты строят системы. В этом модуле мы научимся пользоваться уже созданными функциями. Посмотрим на сигнатуру функции в документации и разберемся, как её использовать. Познакомимся со стандартными библиотеками, которые хранят тысячи функций. Все функции невозможно выучить, но каждый программист должен знать, где искать документацию по ним.

• Функции и их вызов
• Параметры по умолчанию
• Вызов функции — выражение
• Функции с переменным числом параметров
• Детерминированность

Объекты — фундаментальный тип данных JavaScript, позволяющий группировать связанные данные под одним именем. В этом модуле разберём, как создавать объекты и обращаться к их свойствам. Кроме свойств у объектов существуют методы — функции, привязанные к данным объекта. Свойства и методы — такие же выражения, как переменные, константы или вызовы функции, а значит, их можно всячески комбинировать. Также рассмотрим принцип неизменяемости данных и цепочки вызовов методов. Глубже эти темы разбираются на отдельных курсах, посвященных объектно-ориентированным возможностям JavaScript. Мы же в этом модуле изучим основы.

• Объекты
• Неизменяемость
• Цепочка вызовов

Определение собственных функций значительно упрощает написание и поддержку программ. Например, умение определять функции позволяет объединять сложные (составные) операции в одну – вся сложность может быть скрыта за одной простой функцией. Научившись писать функции, вы сделаете первый шаг на пути к построению по-настоящему полезных программ. И мы вам в этом поможем. В этом модуле вы создадите свою первую функцию и научитесь давать ей (а заодно переменным и константам) понятные названия.

• Создание (определение) функций
• Возврат значений
• Необязательные параметры функций
• Аннотации типов
• Упрощенный синтаксис функций
• Модули
• Пакеты

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

• Логический тип
• Сравнение строк
• Комбинирование логических операций
• Логические операторы
• Отрицание
• Результат логических выражений

Задача функции-предиката — получить ответ на вопрос, но обычно этого недостаточно и нужно выполнить определенное действие в зависимости от ответа. В этом модуле разберём условные конструкции JavaScript: if, if-else и else if — для ветвления по условию, тернарный оператор — для коротких условных выражений, switch — для выбора из множества вариантов. С их помощью программист может выбирать необходимое поведение программы в зависимости от разных условий: пропускать одни инструкции и выполнять другие. Их и разберем на практике в этом модуле.

• Условная конструкция (if)
• else
• Конструкция else if
• Тернарный оператор
• Конструкция Switch

Любой код может повторяться десятки, тысячи, миллионы раз. В комбинации с другими известными нам инструментами — переменными и условиями — это открывает множество возможностей по построению программ и сложных систем. Приведем простой пример. Вам нужно найти конкретную фразу в учебнике из 500 страниц. Фразу вы помните, а вот номер страницы нет. Самый простой (и долгий) способ — последовательно просматривать страницы до тех пор, пока не найдете нужную. Для выполнения таких повторяющихся действий и нужны циклы.

• Цикл While
• Условия внутри тела цикла
• Агрегация данных (Числа)
• Агрегация данных (Строки)
• Обход строк
• Синтаксический сахар
• Инкремент и декремент
• Возврат из циклов
• Цикл For
• Отладка