|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/c-gulp-bento/
课程评论：没有评论
**课程名称：** 使用 Gulp 和模块化 (Bento) 风格进行网站布局 **课程概述：** 本课程专为前端开发者设计，旨在教授如何使用 Gulp 构建工具和模块化 (Bento) 布局风格来创建响应式网站。课程涵盖了从项目初始化到高级布局技术的全过程。 **你将学到：** * **Gulp 项目搭建与配置：** 学习如何安装 Node.js，并掌握 Gulp 自动化构建流程的基本配置，包括文件集成、字体转换、第三方文件引入、图片优化以及 SCSS 预处理器等。 * **模块化 (Bento) 布局实践：** 深入理解和实践模块化布局，包括处理常见的布局挑战，如 Masonry 风格的元素排列。 * **Figma 设计稿的运用：** 学习如何直接从 Figma 设计稿中提取和应用设计元素，即使不使用开发者模式。 * **响应式设计实现：** 掌握将模块化布局进行响应式适配的技巧，确保网站在不同设备上都能良好展示。 * **具体页面和组件的开发：** 课程将通过实际案例，逐步讲解如何布局和适配网站的各个部分，包括： * 页眉 (header) 及响应式处理 * 页脚 (footer) 及响应式处理 * 主屏幕 (main screen) 及响应式处理 * 统计数据区块 (statistics block) 及响应式处理 * 关于 (About) 区块 * 项目 (Projects) 区块（包含滑块） * 产品套餐 (tariff plans) 区块 * About、Projects 和 Tariff 区块的响应式适配 * 画廊 (gallery) 的布局与响应式处理 **课程成果：** 完成本课程后，你将能够自信地独立完成模块化布局的项目，并将这些项目添加到你的个人作品集中。 **技术栈：** * Gulp * SCSS * Figma **目标受众：** 希望掌握现代网站布局技术并提升前端开发效率的前端开发者。
Каждый верстальщик много раз столкнется с версткой в которой будет модульная секция, masonry расположение элементов, ну или же как в данном проекте все будет построено в модульном стиле. В такой верстке часто есть разные моменты, которые вызывают сложности у разработчиков которые не сталкивались с такими задачами раньше. В данном видео курсе я полностью покажу как верстать подобные проекты, что использовать и самое главное как потом их адаптировать.Помимо этого, мы все будем делать на сборке фронтенда Gulp. Я предоставляю готовую сборку и показываю как с ней работать. В процессе работы мы будем инклюдить файлы, конвертировать шрифты, подключать сторонние файлы, оптимизировать изображения, работать с препроцесором SCSS и многое другое. Дизайн сделан в Figma, мы используем стандартные инструменты данной программы, я показываю как можно работать с дизайн макетом без devmode режима.Короткий план курса:Установка nodejs (если вы работаете с gulp впервые)Начальная настройка проекта, подключение шрифтов + верстка header и адаптивВерстка footer с адаптацией под мобильные устройстваВерстка главного экрана + адаптив Верстка блока статистики + адаптивВерстка блока AboutВерстка блока Projects (слайдер)Верстка блока с тарифными планамиАдаптив для блоков: about, projects, tariffВерстаем и адаптируем галереюПо завершению вы смело можете браться за верстку таких проектов, и делать подобные проекты для своего портфолио.
