Create Blazing Fast Websites with Gatsby and Drupal
    • Training Introduction
    • Gatsby Overview
      • Gatsby Intro
      • What is React?
      • What is GraphQL
      • Babel & Webpack
    • Modern JS Overview
      • JS Map Function
      • Let and Const
      • Template Strings (Interpolated Literals)
      • Arrow Functions
      • Destructuring
      • Async... Await
    • Installing Gatsby
    • Gatsby Building Blocks
      • Gatsby Starters
      • Plugins & Themes
      • Gatsby Pages
      • About Page Solution
      • Building with Components
      • Gatsby Link Component
    • Styles in Gatsby
      • CSS and SASS
      • CSS Modules
      • CSS in JS
      • Emotion
    • Nested Layout Components
      • Layout Solution
    • Data in Gatsby
      • GraphQL in Gatsby
      • Query Types
      • Gatsby Source Drupal
      • Create Lists of Content
      • Gatsby Image Component
    • Portfolio Challenge
    • Deploying to Netlify
    • Bonus Lessons
      • Gatsby Contact Form
      • Pagination
      • Live Preview
      • Build Hooks
      • Dynamic Content
      • Algolia Search
    • Thank You

  • Gatsby Docs
  • Code Karate

  • Star
    • Training Introduction
    • Gatsby Overview
      • Gatsby Intro
      • What is React?
      • What is GraphQL
      • Babel & Webpack
    • Modern JS Overview
      • JS Map Function
      • Let and Const
      • Template Strings (Interpolated Literals)
      • Arrow Functions
      • Destructuring
      • Async... Await
    • Installing Gatsby
    • Gatsby Building Blocks
      • Gatsby Starters
      • Plugins & Themes
      • Gatsby Pages
      • About Page Solution
      • Building with Components
      • Gatsby Link Component
    • Styles in Gatsby
      • CSS and SASS
      • CSS Modules
      • CSS in JS
      • Emotion
    • Nested Layout Components
      • Layout Solution
    • Data in Gatsby
      • GraphQL in Gatsby
      • Query Types
      • Gatsby Source Drupal
      • Create Lists of Content
      • Gatsby Image Component
    • Portfolio Challenge
    • Deploying to Netlify
    • Bonus Lessons
      • Gatsby Contact Form
      • Pagination
      • Live Preview
      • Build Hooks
      • Dynamic Content
      • Algolia Search
    • Thank You

  • Gatsby Docs
  • Code Karate

Portfolio Challenge

Github logo Edit on GitHub

CHALLENGE: Build a simple Portfolio page on your Gatsby site. Here are the portfolio requirements:

  • D8 content type with title, summary, body, and image field
  • Gatsby page for each project
  • Gatsby listing page (this can be displayed in any way, list/grid/etc) and should be styled with Emotion
Previous
Gatsby Image Component
Next
Deploying to Netlify