Главная страницаКатегория gatsbyGatsby: Туториал + Проект

Gatsby: Туториал + Проект

Name: Gatsby: Туториал + Проект
Rating: 5 (45 reviews)

Gatsby Tutorial and Projects Course

udemy

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

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

21 ч 48 мин

Категория

Gatsby

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

223 Видео

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

23 янв. 2020 г., 07:58

Язык

Английский

Дата выхода

20 нояб. 2019 г., 00:00

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

29 апр. 2026 г., 06:28

Gatsby — мощный фреймворк для создания современных, быстрых и оптимизированных веб‑приложений. В этом курсе вы получите практическое понимание архитектуры Gatsby, его связки с React и GraphQL, а также научитесь применять его возможности в реальных проектах.

Что такое Gatsby и зачем он нужен

Gatsby — это генератор статических сайтов, который объединяет лучшие инструменты фронтенд‑экосистемы. Он позволяет создавать высокопроизводительные сайты благодаря статической генерации, оптимизации загрузки и интеграции со сторонними источниками данных.

Ключевые особенности Gatsby

Статическая генерация — сайт компилируется в набор статичных файлов для максимальной скорости.
GraphQL‑слой для удобного управления данными из различных источников.
Автоматическая оптимизация изображений, ресурсов и кода.
Service Workers для офлайн‑режима и мгновенной навигации.
React‑компонентный подход в сочетании с современным стеком сборки.

Что вы изучите в первой части курса

Обучающая часть поможет вам шаг за шагом разобраться с фундаментальными принципами Gatsby и подготовиться к созданию проектов.

Основные темы

Установка и настройка окружения Gatsby.
Создание страниц и маршрутизация.
Работа с GraphQL внутри Gatsby.
Использование плагинов и тем для расширения функциональности.
Оптимизация изображений и статических ресурсов.

Практическая часть: создание проектов

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

Что будет в проектной части

Построение многостраничного сайта с динамическими данными.
Интеграция с headless CMS через GraphQL.
Оптимизация производительности и Lighthouse‑показателей.
Деплой и рекомендации по дальнейшему развитию проекта.

Кому подойдет этот курс

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

Результат обучения

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

Урок 1.00:01:36
Gatsby Intro
Урок 2.00:00:31
Course Info
Урок 3.00:00:54
Course Requirements
Урок 4.00:01:51
Video Blur Fix
Урок 5.00:00:43
Course Review
Урок 6.00:01:42
Visual Studio Code
Урок 7.00:01:28
Intro
Урок 8.00:02:01
Install gatsby-cli
Урок 9.00:05:39
Setup New Project
Урок 10.00:14:36
Project Structure
Урок 11.00:08:45
First Page
Урок 12.00:02:36
Error Page
Урок 13.00:03:41
Nested Pages
Урок 14.00:06:41
Links
Урок 15.00:05:06
Navbar
Урок 16.00:09:19
Layout Component
Урок 17.00:01:11
CSS Info
Урок 18.00:01:41
Inline CSS
Урок 19.00:05:35
Global CSS
Урок 20.00:03:50
CSS Naming Issues
Урок 21.00:10:15
CSS Modules
Урок 22.00:12:48
Styled-Components
Урок 23.00:07:43
House Cleaning
Урок 24.00:04:33
Styles
Урок 25.00:03:27
Footer
Урок 26.00:01:08
Error Page
Урок 27.00:06:08
Contact Page
Урок 28.00:07:12
Assets and Icons
Урок 29.00:08:56
Navbar Setup
Урок 30.00:04:41
Navbar Functionality
Урок 31.00:03:40
Gatsby Image Info
Урок 32.00:06:07
Sandbox Setup
Урок 33.00:03:40
Install Plugin
Урок 34.00:07:27
Static Image Setup
Урок 35.00:04:40
Shared Props and Options
Урок 36.00:07:51
Options Example
Урок 37.00:06:20
All Layouts
Урок 38.00:04:36
Height
Урок 39.00:09:53
About Page
Урок 40.00:06:18
Hero Page
Урок 41.00:03:21
Gatsby and GraphQL Intro
Урок 42.00:01:42
Gatsby DataLayer in a Nutshell
Урок 43.00:06:16
GraphiQL Interface
Урок 44.00:05:40
siteMetadata
Урок 45.00:09:14
First Query
Урок 46.00:02:06
Explorer
Урок 47.00:01:27
Static Query vs Page Query
Урок 48.00:06:17
useStaticQuery Hook - Code Exporter
Урок 49.00:10:32
useStaticQuery, graphql - From Scratch
Урок 50.00:03:02
Field Alias
Урок 51.00:03:14
Query Keyword, Name and Gatsby Clean
Урок 52.00:07:02
Page Query
Урок 53.00:10:14
Install SOURCE-FILESYSTEM Plugin
Урок 54.00:06:18
allFile - Field
Урок 55.00:08:14
Query Arguments
Урок 56.00:01:24
Static Path Fix
Урок 57.00:03:23
file - Field
Урок 58.00:02:09
sourceInstanceName - Argument
Урок 59.00:03:52
Gallery Setup
Урок 60.00:08:10
gatsbyImageData - Field
Урок 61.00:11:46
Render Gallery
Урок 62.00:04:34
getImage - Helper Function
Урок 63.00:01:28
Local vs External Data
Урок 64.00:02:00
Headless CMS
Урок 65.00:00:49
Contentful Info
Урок 66.00:03:38
Setup Contentful Account
Урок 67.00:06:54
Content-Type
Урок 68.00:07:30
Content
Урок 69.00:05:01
Connect Gatsby - Contentful
Урок 70.00:06:13
ENV Variables
Урок 71.00:07:10
allContentfulRecipe - Field
Урок 72.00:09:04
AllRecipes Component
Урок 73.00:12:00
RecipesList Component
Урок 74.00:10:52
Featured Recipes
Урок 75.00:04:58
Utils Setup
Урок 76.00:07:41
Helper Function
Урок 77.00:03:48
TagsList
Урок 78.00:06:09
Tags Page
Урок 79.00:04:36
Recipe Template Page Setup
Урок 80.00:09:04
Recipe Template Page Walkthrough
Урок 81.00:04:08
Slugify
Урок 82.00:08:51
Query Variables
Урок 83.00:07:23
Recipe Template Query
Урок 84.00:12:19
Recipe Template Return
Урок 85.00:03:59
GATSBY-NODE.JS Setup
Урок 86.00:17:54
Create Tag Template Pages Programmatically
Урок 87.00:11:32
Tag Template Return
Урок 88.00:06:47
Possible Bug Fix
Урок 89.00:05:48
Fonts
Урок 90.00:04:37
Contact Form
Урок 91.00:02:08
FAVICON
Урок 92.00:06:18
SEO - Setup
Урок 93.00:05:55
SEO - Props
Урок 94.00:09:32
SEO - Complete
Урок 95.00:00:54
Netlify Info
Урок 96.00:03:35
Netlify - Drag and Drop
Урок 97.00:09:13
Netlify - Continuous Deployment
Урок 98.00:04:30
Webhooks
Урок 99.00:00:58
Intro
Урок 100.00:01:57
Install Starter
Урок 101.00:07:49
Project Overview
Урок 102.00:08:51
GATSBY-BROWSER
Урок 103.00:08:32
Navbar
Урок 104.00:15:24
Hero
Урок 105.00:06:13
Services
Урок 106.00:06:06
Setup Strapi
Урок 107.00:05:40
Content-Type
Урок 108.00:05:01
Content
Урок 109.00:04:40
Connect Strapi - Gatsby
Урок 110.00:03:16
Jobs Query
Урок 111.00:08:11
Single Job
Урок 112.00:05:18
Jobs Logic
Урок 113.00:02:30
Sort Jobs
Урок 114.00:04:55
Project Content-Type
Урок 115.00:03:37
Project Content
Урок 116.00:03:47
Project Query
Урок 117.00:07:42
Projects Component
Урок 118.00:07:05
Single Project Component
Урок 119.00:02:20
Projects Page
Урок 120.00:05:00
Setup Project Pages Programmatically
Урок 121.00:06:11
Project Template
Урок 122.00:04:54
About Page - Setup
Урок 123.00:06:14
About Page - Complete
Урок 124.00:04:36
Error Page and Footer
Урок 125.00:03:15
Contact Page
Урок 126.00:07:54
Sidebar Setup
Урок 127.00:05:28
Sidebar Logic
Урок 128.00:02:48
Initial Deploy
Урок 129.00:05:57
siteMetadata
Урок 130.00:15:34
SEO Component
Урок 131.00:08:28
Complete Project
Урок 132.00:00:30
Intro
Урок 133.00:01:48
Install
Урок 134.00:02:44
Project Overview
Урок 135.00:02:59
Plugins and main.css
Урок 136.00:07:17
Navbar
Урок 137.00:03:44
Sidebar
Урок 138.00:03:34
Sidebar Toggle
Урок 139.00:03:36
Hero
Урок 140.00:02:09
Footer
Урок 141.00:02:21
Error Page
Урок 142.00:04:52
Newsletter Info
Урок 143.00:09:28
Collect Form Values in Netlify
Урок 144.00:04:50
MDX Setup
Урок 145.00:05:27
Basic Markdown
Урок 146.00:05:38
Basic Styling
Урок 147.00:04:02
First React Component
Урок 148.00:04:35
Nice Text
Урок 149.00:05:53
Complete Components Info
Урок 150.00:04:36
Counter and Like Button
Урок 151.00:05:50
Posts Intro
Урок 152.00:05:01
Single Post Setup
Урок 153.00:06:22
Frontmatter
Урок 154.00:08:30
Home Query
Урок 155.00:05:11
Posts Component
Урок 156.00:05:47
Single Post Component
Урок 157.00:02:12
Posts Page
Урок 158.00:09:01
Create Post Pages Programmatically
Урок 159.00:04:33
Single Post Query
Урок 160.00:05:16
Post Template Complete
Урок 161.00:13:05
Categories Setup
Урок 162.00:04:06
Categories Query
Урок 163.00:02:29
Categories JSX
Урок 164.00:04:44
Banner About
Урок 165.00:06:55
Banner Recent
Урок 166.00:08:02
Banner Categories
Урок 167.00:03:03
Navbar Categories
Урок 168.00:14:01
Inline Images with Remark Images Plugin
Урок 169.00:09:51
Inline Images with GatsbyImage
Урок 170.00:10:48
Regular Video
Урок 171.00:07:43
External Video
Урок 172.00:06:27
MDX Wrapper Intro
Урок 173.00:09:14
Root MDX
Урок 174.00:06:30
First MDX Example
Урок 175.00:05:39
MDX - props / children
Урок 176.00:05:55
MDX - Component Example
Урок 177.00:06:10
MDX - H2
Урок 178.00:02:37
MDX - H4
Урок 179.00:05:43
Inline Code
Урок 180.00:09:54
MDX - Blockquote
Урок 181.00:09:21
Prism Setup
Урок 182.00:10:16
Prism Config
Урок 183.00:04:10
My Example
Урок 184.00:00:38
Intro
Урок 185.00:01:52
Bootstrap Starter
Урок 186.00:01:48
Starter Info
Урок 187.00:06:55
Global Styles with Styled-Components
Урок 188.00:03:39
Root Wrapper
Урок 189.00:05:34
Hero
Урок 190.00:04:54
Navbar
Урок 191.00:06:16
About and Title Components
Урок 192.00:04:40
Airtable Info
Урок 193.00:02:17
Airtable Setup
Урок 194.00:12:07
First Table
Урок 195.00:03:11
API Docs and Keys
Урок 196.00:09:04
Connect Airtable and Gatsby
Урок 197.00:04:07
Latest Project Query
Урок 198.00:09:29
Projects Component
Урок 199.00:04:58
Customers Table
Урок 200.00:06:19
Customers Query
Урок 201.00:01:02
Customers Slider Info
Урок 202.00:09:46
Survey Setup
Урок 203.00:08:27
Survey Fetch Items
Урок 204.00:05:43
Survey - Display Items
Урок 205.00:07:57
Survey - Update Items
Урок 206.00:03:01
Alternative Loading Setup
Урок 207.00:03:25
All Projects Query
Урок 208.00:04:11
Search Buttons - Setup
Урок 209.00:09:40
Search Buttons - Complete
Урок 210.00:03:21
Algolia - Intro
Урок 211.00:06:16
Algolia - Account Setup
Урок 212.00:04:31
Algolia - Plugin Setup
Урок 213.00:11:17
Algolia - Query Setup
Урок 214.00:08:15
Algolia - Basic Front-End
Урок 215.00:03:07
Algolia - SearchBox Component
Урок 216.00:07:04
Algolia - New Hits
Урок 217.00:11:29
Context API
Урок 218.00:10:25
Nested Links Info (sublinks)
Урок 219.00:11:38
Sidebar
Урок 220.00:03:58
Payments Page
Урок 221.00:04:36
Toggle Sidebar
Урок 222.00:12:20
Navbar - Sublinks
Урок 223.00:07:55
Tile Layout

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии

restored
30 мая 2021 г., 05:21
Team Please Update (Gatsby v3) would be much appreciated new videos added in May!
Anonymous
10 апр. 2021 г., 06:39
Update (Gatsby v3) would be much appreciated!
Amstel
17 сент. 2020 г., 10:13
Is the course updated?
RockSolidDeveloperAsync
9 авг. 2020 г., 08:21
Please, update course!