Fetch Data with GraphQL
Add to favorites
Populate your components with dynamic data
Advanced React Hooks
1
Intro to Advanced React Hooks
12:47
2
Adaptive Layout and Styled Components
31:18
3
Basic Hooks
16:53
4
Custom Hooks
17:24
5
Hooks Libraries
8:13
6
Grid Layout
24:30
7
Static Data
8:46
8
Contentful CMS
14:07
9
Fetch Data with GraphQL
15:18
10
Passing Props
5:46
11
Page Template
17:37
12
Dynamic Pages
24:19
13
Layout Component
6:36
14
Markdown into HTML
19:18
15
Code Highlighting
10:06
16
SEO
15:29
17
Context API
14:55
18
Lighthouse Audit
11:19
19
Version Control with Github
3:39
20
Deploy with Gatsby Cloud
7:19
In the previous section, we loaded data into Contentful. It's time to fetch them and add them to the UI. We will populate the page using data from Contentful.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Browse all downloads
1
Intro to Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
12:47
2
Adaptive Layout and Styled Components
Make your design responsive for different devices with styled components and media query
31:18
3
Basic Hooks
Use hook to trigger an animation
16:53
4
Custom Hooks
Make your own hook with useState
17:24
5
Hooks Libraries
Make use of the hook collections made by the community
8:13
6
Grid Layout
How to make a grid-based layout system with CSS
24:30
7
Static Data
Create an array of components using JSON data
8:46
8
Contentful CMS
Manage your content with a CMS platform
14:07
9
Fetch Data with GraphQL
Populate your components with dynamic data
15:18
10
Passing Props
Passing data to a child element
5:46
11
Page Template
Set up a page template component
17:37
12
Dynamic Pages
Generate dynamic pages with Gatsby's createPages API
24:19
13
Layout Component
Share component accross multiple pages with layout
6:36
14
Markdown into HTML
Render Markdown content in your website
19:18
15
Code Highlighting
Enhance your content's readability
10:06
16
SEO
Improve organic traffic to your website
15:29
17
Context API
Manage states across your whole app
14:55
18
Lighthouse Audit
Monitor your app's performance with Lighthouse
11:19
19
Version Control with Github
Host your development project online
3:39
20
Deploy with Gatsby Cloud
Building and deploying your Gatsby site
7:19
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Willie Yam
Front-end/UI developer at Design+Code
I do UI coding. HTML/CSS/JS/SWIFTUI dev.
10 courses - 37 hours
Design and Prototype an App with Play
Build a completely functional prototype without writing a single line of code from your phone
3 hrs
Create a 3D site with game controls in Spline
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline
2 hrs
Build a Movie Booking App in SwiftUI
Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow
1 hrs
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
Unity for Designers
If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.
5 hrs
Create a Javascript Game
Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.
2 hrs
Build an ARKit 2 App
Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them
4 hrs
Create a SpriteKit Game
Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform
3 hrs
