Основы веб-технологий

Профиль аудитории:

• любые специалисты с нулевыми знаниями в веб-технологиях

Предварительные требования:

• базовая компьютерная грамотность

По окончании курса слушатели смогут:

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

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

• На практике знакомимся с базовыми технологиями веб-разработки и узнаём, как эти технологии работают. Размечаем страницу, оформляем её с помощью стилей. Пишем свой первый скрипт.

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

• Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.

Раздел 3. Мастер-класс «Создание семантической разметки по макету».

• Узнаем, что такое разметка по макету, подробно разберём алгоритм её создания, посмотрим на процесс создания разметки опытным верстальщиком в пошаговой демонстрации. Начнём работать над личным проектом этого курса — лендингом яхт-клуба «Под парусом».

Раздел 4. Базовые механики стилизации.

• Разбираемся с селекторами и каскадностью. Учимся задавать фоновые изображения.

Раздел 5. Мастер-класс «Экспорт графики и базовая стилизация по макету».

• Познакомимся с интерфейсом графического редактора Figma, научимся экспортировать из макета графику, а также параметры текста и фонов. Продолжим работу над личным проектом: экспортируем графику, внедрим её в проект и зададим базовые стили страницы.

Раздел 6. Боксовая модель и позиционирование.

• Знакомимся с боксовой моделью. Учимся управлять потоком документа. Разбираемся с позиционированием и управляем координатами позиционированных элементов.

Раздел 7. Базовые механики построения сеток.

• Познакомимся с техниками создания крупных сеток страниц и мелких сеток компонентов. Разберём возможности двух технологий создания раскладок: флексбоксов и гридов.

Раздел 8. Мастер-класс «Создание сеток страниц по макету с помощью флексбоксов».

• Выделим базовые типы сеток, научимся их комбинировать для создания более сложных сеток страниц. Рассмотрим приёмы для получения «сеточных» размеров из редактора Figma. Выполним третий этап работы над личным проектом: опираясь на макет, построим сетку страницы.

Раздел 9. Мастер-класс «Вёрстка компонентов интерфейса по макету».

• Научимся строить сетки компонентов, стилизовать интерфейсные тексты, разберёмся с тонкостями стилизации текстового потока и с особенностями создания мелких декоративных элементов. Доведём компоненты личного проекта до полного соответствия макету.

Раздел 10. Базовые механики «оживления» интерфейсов.

• Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы. Будем решать задачи, с которыми регулярно сталкиваются веб-разработчики.

Раздел 11. Мастер-класс «Создание интерактивных компонентов интерфейса».

• Научимся управлять элементами веб-страницы через JavaScript. Выполним пятый, финальный, этап работы над проектом: c помощью JavaScript мы оживим некоторые элементы интерфейса, опираясь на макет и техническое задание.