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

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

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

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

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

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

What's inside

Learning objectives

Верстка сайта html/css/js, используем современные подходы
Навык верстки модульного дизайна (бенто стиль)

Навык работы со сборщиком фронтенда gulp
Адаптивная верстка

Верстка сайта html/css/js, используем современные подходы
Навык верстки модульного дизайна (бенто стиль)
Навык работы со сборщиком фронтенда gulp
Адаптивная верстка

Syllabus

Адаптив для блоков: about, projects, tariffs

Введение

Обзор проекта

Короткий обзор сборки которую мы используем

К этому уроку прикреплен макет и начальная сборка.

Настройка для ecsstractor, нужно добавить код в файл settings.json

"ecsstractor_port.bem_nesting": true,

"ecsstractor_port.add_comment": false,

"ecsstractor_port.empty_line_before_nested_selector": false,

"ecsstractor_port.brackets_newline_after": false,

"ecsstractor_port.indentation": " ",

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses Gulp, a popular task runner, to automate and enhance front-end development workflows, which is essential for efficient web development

Focuses on responsive design, ensuring websites adapt to different screen sizes and devices, a crucial skill for modern web development

Covers modular design principles, specifically the Bento style, which can help developers create visually appealing and well-structured layouts

Involves working with SCSS, a CSS preprocessor, which allows for more efficient and maintainable styling through features like variables and mixins

Requires learners to install Node.js, which may pose a barrier to entry for learners who are completely new to web development

Uses Figma for design, requiring learners to familiarize themselves with this tool, which may be an additional step for those unfamiliar with it

Reviews summary

Практическая верстка bento с gulp

По словам учащихся, курс по верстке в стиле Bento с использованием Gulp — это очень полезный и практический ресурс для веб-разработчиков. Особенно высоко оценивается предоставленная Gulp сборка, которую можно использовать в реальных проектах. Студенты отмечают, что курс дает навыки верстки современного модульного дизайна и хорошо освещает адаптивную верстку. Проект, создаваемый в курсе, является отличным дополнением к портфолио. Некоторые учащиеся считают, что курс может быть немного быстрым для новичков без базовых знаний Node.js или SCSS, но в целом он предоставляет прочную основу для работы с современными инструментами верстки.

Хорошее покрытие темы адаптивности.

"Детально показана адаптация под разные устройства."

"Уделили достаточно внимания адаптиву."

"Я научился правильно адаптировать сложные секции."

Результат курса - готовый проект для портфолио.

"По итогу получается хороший проект для портфолио."

"Практика на реальном примере проекта."

"Этот проект я добавил в свое портфолио."

Курс хорошо освещает верстку в современном стиле.

"Я узнал, как верстать в модульном (бенто) стиле, что сейчас актуально."

"Курс посвящен актуальному стилю верстки."

"Хорошо показана логика построения модульных секций."

Учащиеся ценят готовую к использованию сборку.

"Отличная сборка Gulp, которую можно использовать в других проектах..."

"Очень понравилась предложенная сборка, удобно работать."

"Сборка Gulp - это большой плюс курса, не нужно настраивать с нуля."

Некоторые моменты могли бы быть освещены глубже.

"Хотелось бы чуть больше деталей по работе Gulp сборки."

"Некоторые моменты объяснены поверхностно."

"Больше внимания некоторым аспектам SCSS было бы полезно."

Может быть быстрым для полных новичков.

"Курс скорее для тех, кто уже знаком с основами HTML/CSS."

"Если вы абсолютный новичок, может потребоваться гуглить."

"Для комфортного прохождения лучше иметь базовые знания SCSS."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Верстка сайта c использованием Gulp в модульном(Bento) стиле with these activities:

Повторите основы HTML и CSS

Show steps

Повторите основные концепции HTML и CSS, чтобы лучше понимать структуру и стилизацию веб-страниц, которые будут использоваться в проекте.

Browse courses on HTML

Show steps

Просмотрите учебники по HTML и CSS.
Выполните несколько простых упражнений по верстке.

Освежите знания JavaScript

Show steps

Освежите знания JavaScript, так как курс предполагает использование JS для слайдера и других интерактивных элементов.

Browse courses on JavaScript

Show steps

Повторите основы JavaScript, включая переменные, функции и DOM.
Попрактикуйтесь в написании небольших скриптов.

Изучите 'HTML и CSS. Разработка и дизайн веб-сайтов'

Show steps

Прочитайте книгу, чтобы получить более глубокое понимание HTML и CSS, что поможет вам в верстке модульного дизайна.

View Страусиная песня (Смешные детективы Д.... on Amazon

Show steps

Прочитайте разделы, посвященные основам HTML и CSS.
Обратите внимание на примеры кода и попробуйте их воспроизвести.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Изучите Gulp

Show steps

Изучите Gulp, чтобы эффективно автоматизировать задачи сборки фронтенда, такие как минификация, объединение файлов и оптимизация изображений.

Show steps

Найдите онлайн-учебники по Gulp.
Установите Gulp и создайте простой проект.
Попробуйте автоматизировать несколько задач, таких как минификация CSS и JS.

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

Show steps

Практикуйтесь в адаптивной верстке, чтобы научиться создавать веб-сайты, которые хорошо выглядят на разных устройствах.

Show steps

Найдите макет веб-сайта и сверстайте его, используя адаптивный подход.
Используйте медиа-запросы для настройки стилей под разные размеры экранов.
Протестируйте свой веб-сайт на разных устройствах и в разных браузерах.

Создайте свой собственный Bento-макет

Show steps

Создайте свой собственный Bento-макет, чтобы закрепить знания, полученные в курсе, и добавить проект в портфолио.

Show steps

Разработайте дизайн Bento-макета в Figma или другом инструменте.
Сверстайте макет, используя HTML, CSS и JavaScript.
Используйте Gulp для автоматизации задач сборки.
Оптимизируйте свой веб-сайт для производительности.

Внесите вклад в проект на GitHub

Show steps

Внесите вклад в проект на GitHub, чтобы получить опыт работы с реальным кодом и улучшить свои навыки совместной разработки.

Show steps

Найдите проект на GitHub, который использует Gulp и модульную верстку.
Изучите код проекта и найдите ошибку или улучшение.
Создайте pull request с вашими изменениями.

Career center

Learners who complete Верстка сайта c использованием Gulp в модульном(Bento) стиле will develop knowledge and skills that may be useful to these careers:

Фронтенд-разработчик

Frontend Разработчик отвечает за создание пользовательского интерфейса веб-сайтов и приложений. Этот курс поможет вам с версткой модульных дизайнов в стиле Бенто, что является востребованным навыком в современной веб-разработке. Frontend Разработчики, как правило, должны хорошо знать HTML, CSS и JavaScript. Курс дает практический опыт работы с Gulp, мощным сборщиком фронтенда, который автоматизирует многие рутинные задачи, такие как оптимизация изображений и подключение сторонних файлов. Умение адаптировать веб-сайты под разные устройства также очень важно, чему курс также учит.

See salaries and explore the career path for Фронтенд-разработчик

Верстальщик

Верстальщик занимается преобразованием дизайнерских макетов в функциональный код веб-страниц. Данный курс будет особенно полезен, ведь он обучает верстке модульных секций и адаптации веб-сайтов под разные устройства. Верстальщику необходимо уметь работать с HTML, CSS и JavaScript, а также знать современные подходы к верстке, такие как использование Gulp и препроцессоров SCSS. В курсе также демонстрируется работа с Figma, что является стандартным инструментом для дизайнеров. Умение верстать в модульном стиле (Bento) сделает вас более конкурентоспособным на рынке труда.

See salaries and explore the career path for Верстальщик

CSS-разработчик

CSS Разработчик отвечает за стилизацию веб-страниц с помощью CSS. Этот курс поможет вам улучшить навыки работы с CSS, особенно в контексте модульной верстки и адаптации под разные устройства. Вы научитесь использовать препроцессор SCSS, который значительно упрощает написание и поддержку CSS-кода. Курс также научит решать сложные задачи стилизации, такие как создание адаптивных макетов и работа со сложными анимациями.

See salaries and explore the career path for CSS-разработчик

HTML Разработчик

HTML Разработчик специализируется на написании HTML-кода для веб-страниц. Этот курс поможет вам углубить знания в области HTML, особенно в контексте модульной верстки и адаптации под разные устройства. Навыки, полученные в курсе, позволят вам уверенно работать над крупными и сложными проектами. В частности, курс дает понимание того, как правильно структурировать HTML-код для создания гибких и масштабируемых веб-страниц.

See salaries and explore the career path for HTML Разработчик

Разработчик шаблонов

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

See salaries and explore the career path for Разработчик шаблонов

UI/UX дизайнер

UI/UX Дизайнер отвечает за создание удобных и интуитивно понятных пользовательских интерфейсов. UI/UX Дизайнеру нужно понимать, как его дизайны будут реализованы на практике. Знание основ верстки, которое дает этот курс, поможет вам создавать более эффективные и удобные интерфейсы, учитывающие технические ограничения и возможности. Вы будете лучше понимать, как элементы интерфейса будут адаптироваться под разные устройства, что критически важно для хорошего UX.

See salaries and explore the career path for UI/UX дизайнер

Веб-дизайнер

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

See salaries and explore the career path for Веб-дизайнер

Дизайнер электронной почты

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

See salaries and explore the career path for Дизайнер электронной почты

Фронтенд Архитектор

Фронтенд Архитектор разрабатывает архитектуру фронтенд-приложений. Этот курс может быть полезен, так как он показывает, как структурировать проекты с использованием модульного подхода (Bento). Понимание работы Gulp также важно для автоматизации процессов сборки и оптимизации. Помимо прочего, данный курс позволит получить более глубокое понимание того, как код можно оптимизировать для повышения производительности и удобства сопровождения.

See salaries and explore the career path for Фронтенд Архитектор

Веб-мастер

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

See salaries and explore the career path for Веб-мастер

Контент-менеджер

Контент-менеджер отвечает за создание и публикацию контента на веб-сайтах. Данный курс может быть полезен Контент-менеджерам, которым необходимо понимать основы верстки и адаптации контента под разные устройства. Это позволит им более эффективно управлять контентом и взаимодействовать с разработчиками при решении технических вопросов. Дополнительно понимание модульной верстки может помочь при создании структурированных и удобных для чтения страниц.

See salaries and explore the career path for Контент-менеджер

QA Инженер

QA Инженер занимается тестированием программного обеспечения, в том числе веб-сайтов и приложений. Этот курс может быть полезен, так как он позволит QA Инженеру лучше понимать структуру веб-страниц и принципы адаптивной верстки. Это поможет им более качественно тестировать веб-сайты на разных устройствах и выявлять проблемы, связанные с версткой и отображением контента.

See salaries and explore the career path for QA Инженер

Специалист по электронной коммерции

Специалист по электронной коммерции отвечает за организацию и развитие продаж через интернет. Данный курс поможет им лучше понимать, как устроены веб-страницы, и оптимизировать структуру сайта для повышения конверсии. Понимание адаптивной верстки также полезно, так как позволяет убедиться, что сайт корректно отображается на мобильных устройствах, которые являются важным каналом продаж.

See salaries and explore the career path for Специалист по электронной коммерции

Интернет-маркетолог

Интернет-маркетолог занимается продвижением продуктов и услуг в интернете. Данный курс, вероятно поможет, даст понимание структуры веб-сайтов и адаптивной верстки. Это поможет им лучше понимать, как работают лендинги, и давать более качественные рекомендации по их оптимизации. Более того, понимание как верстаются сайты может быть полезно при создании маркетинговых материалов и баннеров.

See salaries and explore the career path for Интернет-маркетолог

Технический писатель

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

See salaries and explore the career path for Технический писатель

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Верстка сайта c использованием Gulp в модульном(Bento) стиле.

HTML и CSS. Разработка и дизайн веб-сайтов

Save

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

Страусиная песня (Смешные детективы Д. Калининой и...

Kindle Edition

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

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Практическая верстка bento с gulp

Activities

Career center

Reading list

Share

Similar courses