Курс «Веб-вёрстка»

Программа курса

• 27 теоретических материалов
• 40+ часов видеоуроков
• 80+ проектов
• Регулярно мониторим рынок и обновляем курс

1. Этап 1
   1. Готовим контент к публикации Перенесёте контент из макета в вёрстку, разметите шаблоны статей и подготовите для них графику.

      • Познакомитесь с языком разметки HTML.
      • Научитесь создавать первые теги, вкладывать их друг в друга, добавлять к ним атрибуты, а также наполнять теги контентом.
      • Перенесёте изображения и текст из графического редактора Figma и создадите свои первые страницы.
      • Узнаете, как форматировать код и с помощью специальных инструментов (Emmet, подсветки и других) писать его проще и быстрее.
2. Этап 2
   1. Верстаем контентный блок Углубитесь в разработку текстовых шаблонов и информационных страниц: создадите дополнительные текстовые блоки с помощью новых тегов и выполните стилизацию с помощью CSS.

      • Познакомитесь с языком разметки CSS: селекторами, стилизуемыми свойствами и их значениями, комбинациями и особыми правилами.
      • С помощью CSS и новых тегов HTML более глубоко подойдёте к разработке и оформлению текстовых страниц, подключите внешние шрифты и освоите дополнительные форматы графики.
3. Этап 3
   1. Верстаем информационный блок Разработаете компоненты (блоки-конструкторы), из которых будут собираться веб-страницы, с помощью методологии БЭМ.

      • Изучите методологию БЭМ: поймёте, как писать нейминг для блоков, организовывать внутри них элементы и модификаторы.
      • Познакомитесь с потоком документа и блочной моделью.
      • Разберётесь с отступами элементов и новыми CSS-свойствами.
      • Узнаете, что такое семантика и как она связана с доступностью.
4. Этап 4
   1. Верстаем гибкий компонент Сформируете сетки страницы с помощью технологии Flexbox: упорядочите контент внутри блоков и расположите крупные блоки относительно друг друга, подготавливая страницу к завершённому виду.

      • Освоите базовые навыки работы с редактором кода — Visual Studio Code.
      • Познакомитесь с файловой структурой проекта и правилами разделения файлов стилей внутри неё.
      • Погрузитесь в CSS, изучите глобальные стили, и рассмотрите Flexbox — одну из самых популярных технологий для создания гибких сеток.
      • Научитесь управлять расположением элементов на странице, организуя их по своим правилам.
5. Этап 5
   1. Верстаем раздел страницы Разработаете основные смысловые блоки страницы с помощью технологии Grid: сверстаете шапку, подвал и крупные секции.

      • Продолжите изучать создание сеток на страницах и освоите новую технологию — CSS Grid.
      • Узнаете, как использовать новые семантические теги для структурирования разделов страницы, углубите знания в области доступности сайтов и компонентного подхода к разработке.
      • Познакомитесь с принципами самотестирования кода и рассмотрите методы работы с динамическим контентом — сможете эффективно управлять его изменениями на странице.
6. Этап 6
   1. Верстаем форму Сверстаете разные формы для проекта: входа и регистрации, подписки, отправки заявки, фильтра каталога.

      • Научитесь создавать и стилизовать формы в HTML, которые будут удобны и понятны для пользователей.
      • Узнаете, как сделать так, чтобы сайт одинаково отображался в разных браузерах.
      • Будете использовать современные селекторы CSS для более точной и гибкой стилизации.
      • Освоите методы позиционирования элементов, чтобы располагать их именно там, где вам нужно.
      • Познакомитесь с техникой использования SVG-спрайтов для оптимизации графики.
      • Глубже разберёте понятие доступности, чтобы делать сайты удобными для всех пользователей.
7. Этап 7
   1. Создаём адаптивную стилизацию Разработаете адаптив с помощью технологии Sass — подготовите страницу к отображению на планшетах и мобильных устройствах.

      • Познакомитесь с основами адаптива страниц, чтобы ваши сайты отлично выглядели и работали на любом устройстве.
      • Изучите, как адаптировать изображения под разные размеры экранов и обеспечивать их чёткость на retina-дисплеях.
      • Узнаете, как создавать кросс-платформенные сайты, которые одинаково хорошо функционируют на всех устройствах и платформах.
      • Погрузитесь в мир препроцессора SCSS, чтобы упрощать и ускорять работу с CSS.
      • Углубитесь в знакомство с Figma и разберёте новые возможности этого инструмента.
8. Этап 8
   1. Верстаем адаптивные разделы Создадите резиновые страницы — подготовите максимально гибкую вёрстку под отображение на любой ширине экрана и любом устройстве.

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

      • Погрузитесь в мир анимации — начнёте со знакомства с её историей и основными принципами.
      • Поймёте, как создавать микроанимации, которые добавят интерактивности и живости вашим проектам.
      • Освоите многоступенчатые анимации, которые позволят вам создавать сложные и плавные переходы.
      • Научитесь анимировать SVG-графику, чтобы ваши изображения оживали на странице.
      • Узнаете, как использовать режим Present в Figma для создания анимаций, чтобы понимать, что всё работает именно так, как задумано.
10. Этап 10
    1. Готовим вёрстку к продакшену Подготовите готовую вёрстку страницы к публикации: исправите баги и оптимизируете скорость загрузки страницы с помощью Lighthouse.

       • Познакомитесь с ключевыми принципами оптимизации сайтов для повышения их производительности.
       • Научитесь проверять качество своего сайта с помощью инструмента Lighthouse, чтобы выявлять и исправлять возможные проблемы.
       • Узнаете, как создавать и подключать графику в формате WebP для уменьшения размера изображений без потери качества.
       • Изучите процессы подготовки сайта к публикации, чтобы он был готов к запуску и работал максимально эффективно.