Практический курс по верстке лендинга на украинском языке - видеоуроки программирования | ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Заказать звонок

Выбери свою IT специальность

Подписка

Заказать звонок

+38 099 757 27 82

Практический курс по верстке лендинга

О курсе

Лендинг (landing page) - это отдельная веб-страница, чаще всего созданная с маркетинговой или рекламной целью для акционного предложения, краткосрочного проекта или мероприятия.

Курс "Практический курс по верстке лендинга" направлен на рассмотрение особенностей адаптивных и функциональных веб-страниц с интерактивными элементами. В течение курса вы освоите работу с HTML, CSS (включая препроцессор SASS с синтаксисом SCSS), а также основы верстки с помощью Flexbox и Grid.

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

Особое внимание будет уделено настройке проекта с нуля, включая работу с системами контроля версий и публикацию готовых страниц на GitHub Pages. После завершения курса вы сможете создавать профессиональные одностраничные сайты, которые соответствуют требованиям коммерческих проектов.

Читать дальше...

Этот курс входит в специальности:

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

Курс рассчитан на начинающих, которые стремятся углубить свои знания в основах веб-разработки. Также курс будет полезен действующим разработчикам, которые хотят рассмотреть особенности построения именно лендинга. Он охватывает как теоретические, так и практические аспекты HTML, CSS (SASS) и JavaScript, поэтому станет полезным как для тех, кто уже знаком с базовыми принципами этих технологий, так и для тех, кто только начинает их изучать.

Читать дальше...

Вы научитесь

  • Создавать адаптивную верстку с использованием HTML, CSS и JavaScript.
  • Работать с препроцессором SASS, в частности с синтаксисом SCSS, использовать его преимущества.
  • Использовать Flexbox и Grid для верстки сложных макетов.
  • Создавать интерактивные элементы: слайдеры, формы и модальные окна.
  • Анализировать макет, выделять повторяющиеся элементы и создавать стили с условием их переиспользования
  • Работать с библиотеками JavaScript.
  • Настраивать проект с нуля и работать с системами контроля версий (Git).
  • Работать с сервисом GitHub и публиковать страницы на GitHub pages.
Читать дальше...
Скачать материалы курса Для получения материалов курса нужно авторизоваться
Получить сертификат Для получения сертификата нужно авторизоваться
  • Длительность: 3 ч 30 м
  • Статус: в записи
  • Уроков: 7 из 10
  • Язык: украинский

Что входит в курс

  • 7 видео уроков
Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео

Урок охватывает основы настройки среды для разработки. Сначала ознакомимся с процессом установки и настройки редактора кода, который является основным инструментом для написания кода. Далее вы настроите систему контроля версий с помощью Git, что позволит эффективно управлять изменениями в коде и работать над проектами в команде. Затем создадим аккаунт на GitHub - популярном сервисе для облачного хранения и совместной работы с кодом, что позволит хранить проекты и делиться ими с другими. Кроме того, ознакомимся с менеджером пакетов npm, который используется для управления библиотеками и зависимостями в JavaScript-проектах, и установки Node.js для корректной работы с npm и другими инструментами для разработки.

Читать дальше...

Урок охватывает популярные библиотеки и фреймворки CSS, такие как Bootstrap, Tailwind, Bulma, Foundation и другие, которые помогут быстро создавать адаптивные макеты с минимальными усилиями. Сначала выделим основные понятия и аспекты CSS, что является основой для работы с любыми фреймворками. Далее будет рассмотрено понятие библиотек и фреймворков CSS, их роль в упрощении разработки и предоставлении готовых решений для верстки. Подробно ознакомимся с фреймворком Bootstrap, который является одним из самых распространенных инструментов для создания адаптивных веб-страниц благодаря набору готовых компонентов и сетки.

Читать дальше...

В этом уроке будет начато создание файловой структуры проекта, в частности настройка директорий, подготовка базовых настроек стилей и начало верстки шапки страницы - header. Особое внимание будет уделено правильному использованию семантических тегов HTML, чтобы обеспечить доступность и удобство для пользователей и поисковых систем. Кроме того, на уроке будут рассмотрены основные моменты работы с препроцессором SASS и в частности его синтаксисом SCSS, включая настройку структуры SCSS-файлов и использование переменных, миксинов и вложенности для удобства написания стилей.

Дополнительно, урок предусматривает настройку сборки проекта с помощью Gulp, что позволит автоматизировать процессы компиляции стилей, следовательно в течение урока будет установлена и настроена сборка. В завершение урока будет осуществлена верстка header для десктопной и мобильной версий, с использованием адаптивных техник для обеспечения корректного отображения на различных устройствах.

Читать дальше...

Урок нацелен на освоение инструмента CSS - Flexbox, который позволяет удобно и эффективно располагать элементы на странице, создавая максимально гибкие адаптивные макеты с минимальными усилиями. Будут рассмотрены основные принципы работы с Flexbox, такие как выравнивание, распределение пространства и порядок элементов, что позволяет быстро создавать сложные макеты и мастерски настраивать стили с помощью свойств, как для родительского элемента (флекс-контейнера), так и для дочерних элементов (флекс-потомков). Кроме этого, будет изучено, как устанавливать и использовать библиотеку Font Awesome, которая позволяет легко и быстро интегрировать популярные иконки в дизайн, улучшая визуальное восприятие страницы. В течение урока будет осуществлена верстка двух секций страницы, для десктопной и мобильной версий, с учетом адаптивности и использования Flexbox для правильного выравнивания и расположения элементов на разных устройствах.

Читать дальше...

Урок охватывает все тонкости работы с CSS Grid Layout, который является еще одним мощным инструментом для верстки адаптивных макетов. Будут изучены свойства, контролирующие создание сетки - четкой и неявной, ее размещение внутри контейнера, а также свойства, которые можно применять для контроля размещения элементов сетки. Ознакомление начнется с анализа верстки III-й секции макета, где будет проанализирована структура и стили, а также написан обобщенный каркас стилей, который ляжет в основу дальнейшей работы. Урок также будет включать верстку IV-ой секции макета для десктопной и мобильной версий, с использованием Grid для корректного размещения элементов на странице. Кроме того, будет осуществлена верстка карточек продукта и их общей обертки, стили будут вынесены в отдельный файл для дальнейшего их применения в других секциях макета. Кроме этого будет создан JavaScript код для контроля пользователем количества карточек на странице, то есть их появление и исчезновение при взаимодействии с кнопкой.

Читать дальше...

Урок охватывает изучение первого интерактивного элемента на странице - слайдера. Во время урока будет рассмотрена сущность, цель и разновидности слайдеров, которые позволяют добавлять динамические элементы на страницу, улучшая взаимодействие пользователя с сайтом. Кроме этого, будет проанализировано использование популярных JavaScript-библиотек для создания слайдеров, в частности Glide.js, которая будет интегрирована в проект. После подключения библиотеки будет осуществлена ее кастомизация и инициализация. Особое внимание будет уделено настройке адаптивности слайдера, чтобы он корректно работал на различных устройствах, в частности на мобильных. Завершение урока предусматривает верстку V секции макета и написание стилей для различных размеров экранов.

Читать дальше...

Урок предназначен для рассмотрения одного из важнейших навыков в разработке - переиспользования стилей в проекте, что помогает сохранить чистоту и лаконичность кода. Во время урока будет осуществлен анализ верстки VI секции, где будут выделены уже существующие блоки, что позволит удобно повторно использовать стили для других элементов на странице. Особое внимание будет уделено техникам позиционирования элементов на странице, в частности свойствам CSS, таким как position, top, bottom, left, right и z-index, которые позволяют точнее управлять расположением элементов относительно других на странице. После этого будет осуществлен анализ верстки VII секции и создание ее html-структуры. Завершение урока предусматривает написание стилей для VII секции, где на практике будут использованы только что изученные свойства позиционирования.

Читать дальше...
ПОКАЗАТЬ ВСЕ

Покупай подпискус доступом ко всем курсам и сервисам

Библиотека современных IT знаний в удобном формате

Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
59.99 $
Оформить подписку
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
89.99 $
Оформить подписку
Премиум
  • Все видеокурсы на 1 год
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
169.99 $
Оформить подписку
комментарии и обсуждения
Notification success