О курсе
Лендинг (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.
- 2 ч 2 м
- в записи
- 4 из 10
- украинский
Что входит в курс
Урок охватывает основы настройки среды для разработки. Сначала ознакомимся с процессом установки и настройки редактора кода, который является основным инструментом для написания кода. Далее вы настроите систему контроля версий с помощью 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 для правильного выравнивания и расположения элементов на разных устройствах.
