Https htmlacademy ru courses: Курсы для новичков — HTML Academy

Курсы — HTML Academy

На курсе вы создадите свой первый сайт и запрограммируете его компоненты

Начать курс бесплатно

• Подходит ли вам курс

  Этот курс подойдёт для полных новичков, для тех, кто не сталкивался ни с миром веб-разработки, ни с технологиями HTML, CSS и JavaScript. Мы изучим основы веб-технологий, и вы попробуете себя в роли верстальщика и фронтендера.

• Ваш уровень после курса

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

• Чему вы научитесь:

  • изучите базовые конструкции языков HTML, CSS и JavaScript,
  • разберётесь с тегами и их параметрами, CSS-свойствами, селекторами и каскадностью,
  • изучите команды JavaScript, переменные условия, циклы,
  • попробуете себя в роли фронтендера:
  • внесёте правки в вёрстку и скрипты страницы,
  • сверстаете с нуля сайт из графического макета,
  • напишете с нуля интерактивные компоненты по техническому заданию.

1. Раздел 1. Знакомство с фронтендом

   • Что такое HTML? Основные понятия: теги, одиночные и парные теги, атрибуты тегов.
   • Что такое CSS? Основные понятия: CSS-свойства и их значения, CSS-правила, селекторы.
   • Пробуем себя в роли верстальщика, вносим правки в содержание и оформление существующей веб-страницы.
   • Отрабатываем приёмы стилизации по классам и миксование классов.
   • Что такое JavaScript? Основные понятия: скрипт, программа, команда, переменная, консоль, методы, события и их обработчики.
   • Приёмы для работы с элементами страницы: поиск элементов по селектору, управление списком классов, реагирование на событие, получение и изменение значений атрибутов.
   • Пробуем себя в роли фронтендера, оживляем компонент для переключения тем и программируем уведомление в форме.

2. Раздел 2. Знакомство с HTML и CSS

   • Doctype в HTML. Основные теги страницы html, head, body. Теги для описания служебной информации.
   • Теги для описания смысловых разделов, навигации.
   • Заголовки, параграфы, списки. Вложенные списки.
   • Цитаты, фрагменты кода, дата и время.
   • Нижний и верхний индекс, акцентирование внимания, важная информация.
   • Универсальные теги div и span.
   • Ссылки, адреса ссылок. Относительные и абсолютные адреса. Ссылка-якорь.
   • Тег img, изображение. Обзор основных форматов. Управление размерами изображений.
   • Теги figure и figcaption, демонстративный материал.
   • Синтаксис CSS-правил, селекторов, свойств и значений. Обычные и составные свойства.
   • Типы значений: абсолютные и относительные.
   • Стили по умолчанию, каскад и конфликт свойств.
   • Встроенные стили, атрибут style. Встраивание и подключение внешних стилей.
   • CSS-свойства для управления текстовыми параметрами: семейство, размер и насыщенность шрифта, высота строки, цвет, курсив.
   • Абсолютные и относительные размеры шрифта и высоты строк.
   • Горизонтальное и вертикальное выравнивание текста, отступы.
   • Управление пробелами и регистром символов, подчёркивание, зачёркивание и другие текстовые эффекты.
3. Раздел 3. Мастер-класс «Создание семантической разметки по макету»
   • Что такое разметка и что такое разметка по макету. Качества хорошей разметки: валидность и семантичность.
   • Пошаговый алгоритм создания разметки по макету.
   • Разбираем примеры разметки страниц и отдельных компонентов на основе графического макета.
   • Практикуемся самостоятельно делать разметку страницы по макету в тренажёре-мастерской.
   • Работаем с учебным проектом: создаём разметку страницы.
4. Раздел 4. Базовые механики стилизации
   • Селекторы по тегам, по классам и по id. Селекторы атрибутов.
   • Контекстные, соседние и дочерние селекторы.
   • Псевдоклассы. Псевдоклассы :nth-child, :hover, :focus, :link, :visited и :active.
   • Динамические эффекты с помощью :hover.
   • Наследование. Наследуемые и ненаследуемые свойства. Принудительное наследование. «Перекрёстное» наследование.
   • Каскадирование. Специфичность селекторов. Расчёт значения специфичности.
   • Управление цветом фона и фоновыми изображениями.
   • Расположение, повторение и режим прокрутки фоновых изображений.
   • Задание нескольких фонов. Эффекты с повторяющимся фоном.
   • Использование растровых спрайтов.
5. Раздел 5. Мастер-класс «Экспорт графики и базовая стилизация по макету»
   • Что такое стилизация по макету, какие задачи решаются во время базовой стилизации. Что такое экспорт графики.
   • Графический редактором Figma. Интерфейсы редактора, инструменты редактора для экспорта графики и параметров стилизации из макета.
   • Использование абсолютных и относительных путей в проекте.
   • Пошаговые алгоритмы экспорта графики и выбора формата изображения.
   • Примеры экспорта графики и параметров CSS-свойств из графического макета.
6. Раздел 6. Боксовая модель и позиционирование
   • Боксовая модель и поток. Свойство display, управление типом бокса.
   • Особенности блочных, строчных и блочно-строчных типов бокса.
   • Ширина, высота, рамки, внутренние и внешние отступы боксов. Особенности внешних отступов блочных боксов.
   • Стандартный режим расчёта размеров блочных боксов. Управление этим режимом с помощью box-sizing.
   • Знакомство с семейством табличных боксов.
   • Режимы позиционирования: статичное, относительное, абсолютное и фиксированное.
   • Управление координатами позиционированных элементов.
   • Точка отсчёта координат. Явная и неявная точка отсчёта.
   • Свойство z-index, управление «глубиной» позиционированных элементов.
7. Раздел 7. Базовые механики построения сеток
   • Сетка и макет страницы. Отличия сеток страниц от сеток компонентов (микросеток).
   • Основные понятия гридов: грид-шаблон, грид-контейнер и грид-элемент.
   • Описание грид-шаблонов, управление размерами грид-областей и отступами между ними.
   • Создание ассиметричных грид-шаблонов. Грид-шаблоны с динамическим количеством колонок.
   • Распределение грид-элементов по грид-областям, ручное и автоматическое. Режимы автозаполнения грид-контейнера.
   • Управление выравниванием грид-элементов.
   • Основные понятия флексов: флекс-контейнер, флекс-элемент, оси, флекс-ряды.
   • Управление размерами и отступами флекс-элементов. Автоматические внешние отступы.
   • Выравнивание флекс-элементов вдоль главной и поперечной осей.
   • Многострочный флекс-контейнер, выравнивание флекс-рядов.
   • Управление визуальным порядком флекс-элементов.
   • Примеры вёрстки типовых сеток страниц и компонентов на флексах и гридах.
8. Раздел 8. Мастер-класс «Создание сеток страниц по макету с помощью флексбоксов»
   • Выделим базовые типы сеток, способы их создания и тонкости, которые надо учитывать.
   • Затем научимся комбинировать базовые типы для создания более сложных сеток страницы.
   • Рассмотрим приемы для получения размеров, нужных для создания сеток, из редактора Figma.
9. Раздел 9. Мастер-класс «Вёрстка компонентов интерфейса по макету»
   • Завершаем стилизацию страницы.
   • Научимся строить сетки отдельных компонентов, стилизовать интерфейсные тексты.
   • Разберемся с тонкостями стилизации текстового потока.
   • Познакомимся с особенностями создания мелких декоративных элементов.
10. Раздел 10. Базовые механики «оживления» интерфейсов
    • Условия. Булевы значения. Операторы сравнения: больше, меньше, равенство, строгое равенство, неравенство, строгое неравенство.
    • Комбинирование условий с помощью операторов «логическое И» и «логическое ИЛИ».
    • Проверка наличия класса у элемента с помощью classList.contains.
    • Создание элементов с помощью createElement и добавление их на страницу с помощью append.
    • Поиск элементов с помощью querySelectorAll, коллекции, доступ к элементам коллекции по индексу.
    • Цикл for of. Перебор коллекций с помощью цикла.
    • Добавление обработчиков событий внутри цикла.
    • Работа с data-атрибутами.
    • Обработка события отправки формы.
    • Обработчик событий oninput, получение значений из текстовых полей, обработка текста во время ввода.
    • Обработчик событий onchange, получение значений из раскрывающихся списков.
    • Отличия onchange и oninput.
    • Свойство checked. Получение значения чекбокса.
    • Обработка событий прокрутки страницы. Работа с координатами прокрутки.
    • Управление прокруткой c помощью метода scrollTo, плавная прокрутка.
    • Управление стилями элемента с помощью style.
11. Раздел 11. Мастер-класс «Создание интерактивных компонентов интерфейса»
    • Научимся создавать динамические страницы, которые реагируют на действия пользователя.
    • Узнаем, как управлять элементами веб-страницы через JavaScript.
    • Рассмотрим полезные свойства и методы элементов для работы с содержанием.
    • Запрограммируем несколько типовых компонентов.

Обучение в HTML Academy

Обучение в HTML Academy

В добрый путь к успеху

Тренажёры

И вы разработчик домашних страничек

Вы изучили азы HTML, CSS и JavaScript. Теперь вы знаете, как размечать абзацы, заголовки, списки, как задавать размеры элементов и добавлять на фон красивые картинки. Этого достаточно для того, чтобы создавать домашние странички для себя, друзей и кота.

Список тренажёров

Если хотите стать профессионалом, самое время записаться на онлайн‑курс «HTML и CSS. Профессиональная вёрстка сайтов».

Онлайн‑курс

HTML и CSS. Профессиональная вёрстка сайтов

И вот вы младший верстальщик с зарплатой в 30 000 ₽
Смотреть вакансии

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

Подробнее о курсе

22 мая — 24 июля

Записаться

Следующий поток пройдёт 18 сентября — 20 ноября.

Чтобы браться за сложные и дорогие проекты, вам пора записаться на онлайн‑курс «HTML и CSS. Адаптивная вёрстка и автоматизация».

Онлайн‑курс

HTML и CSS. Адаптивная вёрстка и автоматизация

И вы уже верстальщик с зарплатой в 45 000 ₽
Смотреть вакансии

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

Подробнее о курсе

27 марта — 29 мая

Ещё можно записаться

Следующий поток пройдёт 24 июля — 25 сентября.

После всего этого, будет самое время изучить JavaScript на  онлайн‑курсе «JavaScript. Профессиональная разработка веб-интерфейсов. »

Онлайн‑курс

JavaScript. Профессиональная разработка веб-интерфейсов

И вот вы хороший верстальщик на зарплате в 55 000 ₽
Смотреть вакансии

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

Подробнее о курсе

6 июня — 7 августа

Записаться

Следующий поток пройдёт 3 октября — 4 декабря.

Хотите научиться создавать приложения и сложные сервисы? Записывайтесь на онлайн‑курс «JavaScript. Архитектура клиентских приложений».

Онлайн‑курс

JavaScript. Архитектура клиентских приложений

И, между прочим, вы фронтендер с зарплатой в 75 000 ₽
Смотреть вакансии

Теперь вы умеете применять объектно-ориентированный подход и современные возможности ECMAScript для разработки веб-приложений, умело применяете паттерны проектирования.

Подробнее о курсе

24 апреля — 26 июня

Записаться

Следующий поток пройдёт 7 августа — 9 октября.

Следующий шаг — разобраться, как применять библиотеку React для разработки сложных интерфейсов на онлайн-курсе «React. Разработка сложных клиентских приложений».

Онлайн‑курс

React. Разработка сложных клиентских приложений

И вы супер фронтендер с зарплатой в 100 000 ₽
Смотреть вакансии

Теперь вы умеете применять TypeScript и React для разработки сложных клиентских приложений. Уверенно применяете актуальные возможности ECMAScript, пишете надёжный код, покрытый тестами.

Подробнее о курсе

3 июля — 4 сентября

Записаться

Следующий поток пройдёт 9 октября — 11 декабря.

Следующий шаг — разобраться, как работают повседневные инструменты на онлайн-курсе «Node. js. Профессиональная разработка REST API».

Онлайн‑курс

Node.js. Профессиональная разработка REST API

Вжух, и вы фулстек с зарплатой 150 000 ₽
Смотреть вакансии

Теперь вы умеете проектировать и имплементировать REST API при помощи Node.js, Express. Проектировать архитектуру бэкенд-приложения и разделять функциональность на слои. Уверенно применяете объектно-ориентированный подход, декораторы в TypeScript.

Подробнее о курсе

2 мая — 3 июля

Записаться

Следующий поток пройдёт 19 сентября — 20 ноября.

Никто ничего не знает о том, что же будет дальше.

Плюсы обучения с нами

• Обучение на реальных проектах

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

• Работа с личным наставником

  Наставник лучше всех передаст опыт работы, познакомит с нюансами разработки, даст хороший пинок к старту карьеры.