Главная страницаКатегория gatsbyGatsby JS и Prismic: создание быстрых Gatsby сайтов | Gatsby2020

Gatsby JS и Prismic: создание быстрых Gatsby сайтов | Gatsby2020

Name: Gatsby JS и Prismic: создание быстрых Gatsby сайтов | Gatsby2020
Price: 13 USD
Rating: 5 (6 reviews)

Gatsby JS & Prismic: Build RAPID Gatsby sites | Gatsby 2020

udemy

★5 (всего оценок - 6)

Продолжительность

2 ч 55 мин

Категория

Gatsby

Количество уроков

32 Видео

Дата добавления

4 дек. 2020 г., 23:29

Язык

Английский

Дата выхода

14 авг. 2020 г., 03:00

Дата обновления

29 апр. 2026 г., 09:02

Хотите создавать молниеносно быстрые сайты на React?Курс по Gatsby JS и Prismic поможет вам прокачать навыки frontend‑разработки, освоить работу со статической генерацией и headless CMS, а также научиться строить современные, масштабируемые и SEO‑оптимизированные веб‑проекты.

Что вы узнаете в этом курсе

Материал курса сфокусирован на практическом изучении Gatsby.js и headless CMS Prismic. Вы шаг за шагом создадите готовый лендинг, освоив ключевые инструменты и приёмы, необходимые современному frontend‑разработчику.

Gatsby.js: фундамент и преимущества

Вы разберётесь, почему Gatsby считается одним из самых быстрых решений для разработки сайтов и какие задачи он помогает решать:

использование React и GraphQL для сборки данных;
предварительная статическая генерация страниц;
минимальное время загрузки и отказ от «тяжёлых» серверных запросов;
интеграция с CDN для мгновенной доставки контента пользователю.

Prismic как headless CMS

Курс объясняет, как подключить Prismic и использовать его в качестве гибкого и удобного источника данных:

создание структур данных (страницы, меню, медиа, блоки контента);
запрос данных через GraphQL;
динамическое обновление страниц без редеплоя кода.

Практическая часть курса

Вместе с преподавателем вы соберёте полностью рабочий сайт, последовательно проходя ключевые этапы разработки.

Старт проекта и настройка среды

инициализация проекта Gatsby;
локальная настройка Prismic;
структурирование данных и подключение первого контента.

Создание компонентов и страниц

Вы научитесь строить гибкую компонентную архитектуру на React в рамках Gatsby:

создание шаблонов страниц;
динамическая генерация страниц с использованием GraphQL;
работа со стилями через styled‑components.

Форма обратной связи с Netlify Forms

Отдельный модуль курса посвящён созданию контактной страницы:

динамическое управление полями формы через Prismic;
подключение серверной обработки на Netlify Forms;
сбор и хранение пользовательских данных.

Работа с GraphQL и GraphiQL

Вы научитесь создавать точные запросы к данным Prismic, проверять их в GraphiQL и использовать в Gatsby для генерации разметки и компонентов.

Деплой и автоматизация

В финале курса вы развернёте готовый сайт на Netlify и настроите автоматическую пересборку проекта при обновлении контента в Prismic.

Для кого этот курс

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

Почему Gatsby — отличное решение

Основные преимущества Gatsby:

Нет задержек API‑запросов
Нет рендеринга компонентов на стороне клиента
Молниеносная загрузка страниц

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

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:05:11
Introduction - overview of the Gatsby JS + Prismic course
Урок 2. 00:03:45
Gatsby overview and project setup
Урок 3. 00:04:45
Prismic setup and overview
Урок 4. 00:05:12
Linking Gatsby to Prismic
Урок 5. 00:00:46
Querying Prismic data using the GraphiQL tool
Урок 6. 00:03:05
Overview of GraphQL
Урок 7. 00:04:25
Generating pages from Prismic data in Gatsby
Урок 8. 00:07:32
Page queries in Gatsby
Урок 9. 00:08:03
Rendering Prismic HTML content correctly in Gatsby
Урок 10. 00:05:41
Page layout and adding navigation to Prismic
Урок 11. 00:04:21
Styling in Gatsby with React Styled Components
Урок 12. 00:09:16
Querying the navigation menu data from Gatsby
Урок 13. 00:04:59
Styling the header with styled components
Урок 14. 00:04:58
Adding the branding to the header in Gatsby
Урок 15. 00:06:34
Slice zones in prismic + creating the homepage
Урок 16. 00:07:47
Rendering the hero custom slice in Gatsby / React
Урок 17. 00:07:31
Adding background image to hero + styling in Gatsby with React styled components
Урок 18. 00:06:43
Add call to action grid custom slice in Prismic
Урок 19. 00:08:18
Rendering + styling call to action grid in Gatsby using React styled components
Урок 20. 00:06:52
Finishing the styling of the call to action grid
Урок 21. 00:06:00
Add the price list custom slice in Prismic
Урок 22. 00:07:19
Rendering and styling the price list in Gatsby
Урок 23. 00:06:05
Finishing the styling of the price list in Gatsby
Урок 24. 00:02:56
Adding the contact page data to prismic
Урок 25. 00:08:56
Rendering the contact page in Gatsby
Урок 26. 00:03:48
Refactoring RichText component to render Gatsby Link components
Урок 27. 00:03:34
Rendering new RichText with internal Gatsby links on the contact page
Урок 28. 00:07:33
Saving custom slices to the slice library
Урок 29. 00:05:55
Adding more content to the pages & updating styles
Урок 30. 00:03:57
Deploy Gatsby site using Netlify
Урок 31. 00:02:28
Testing out Netlify forms
Урок 32. 00:01:39
Auto-rebuild our Gatsby site any time Prismic data changes (Netlify hooks)

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198