[Вадим Прокопчук] [Udemy] Верстка сайта c использованием Gulp в модульном Bento стиле (2024)

[Джек Воробей]

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

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

Дизайн макета выполнен в Figma. Мы будем использовать стандартные инструменты этой программы, и я покажу, как работать с дизайн макетом без режима разработчика (devmode).

Краткий план курса:

Установка Node.js (если вы впервые работаете с Gulp)
Начальная настройка проекта, подключение шрифтов и верстка header с адаптацией
Верстка footer с адаптацией для мобильных устройств
Верстка главного экрана с адаптацией
Верстка блока статистики с адаптацией
Верстка блока About
Верстка блока Projects (слайдер)
Верстка блока с тарифными планами
Адаптация блоков: about, projects, tariff
Создание и адаптация галереи
Чему вы научитесь:

Создание веб-сайтов с использованием HTML/CSS/JS, современные подходы к разработке
Навыки верстки модульного дизайна (стиль бенто)
Работа со сборщиком фронтенда Gulp
Адаптивная верстка
Материалы курса:
2 раздела
12 лекций

Общая продолжительность 7 часов 24 минуты
Содержание курса:
Введение
Обзор проекта
Краткий обзор используемой сборки
Верстка проекта:
Установка Node.js

Начальная настройка проекта и верстка header
Верстка footer
Верстка главного экрана
Верстка блока статистики
Верстка блока About
Верстка блока Projects (слайдер)
Верстка блока с тарифными планами
Адаптация блоков: about, projects, tariffs

Создание и адаптация галереи

Продажник

To view the content, you need to Sign In or Register.

Скачать

To view the content, you need to Sign In or Register.