Gatsby Web Creators

A free online series for learning web development fundamentals - Fridays at 1pm ET/10am PT

Gatsby Web Creators is a free livestream series aimed at curious people aged 13 and up, running through the month of May. Each Friday from May 8-29, Gatsby Team members will teach the basic skills involved for coding web pages with HTML, CSS, and JavaScript.

All sessions will be streamed live on Twitch and recorded for future viewing on YouTube.

In our first series, we explored how to work with text, images, interactive elements, fancy widgets, custom styling, animation with CSS, playing with browser Developer Tools, and more. In series 2, we’ll build on those foundations with the basics of browser JavaScript, Node.js, React, and Gatsby.

The only prerequisites for this series are a sense of curiosity, and a desire to tinker, as well as a computer with an internet connection. The majority of these lessons will include live examples on Glitch, a colorful tool for creating web apps and building a community. Glitch projects can be remixed and added to collections, and it provides automatic URLs for each project so viewers can create and share their own webpages with ease.

How to participate

Anyone can join this series by going to our Twitch page at the specified times (Fri. at 1pm-2pm ET / 10am-11am PT). Note: you don’t have to have a Twitch account to watch the streams.

For those who want to get involved, there will be Glitch projects with source code available for everyone to remix each week: check this page for updates. Live chat will also be available on the Twitch platform.

Series 2 schedule

Gatsby Web Creators streams take place live on Fridays at 1pm ET/10am PT.

Here’s the rough schedule for this second series of Gatsby Web Creators:

Week 6 - (Re)Intro to JavaScript, Make Art - May 8

In this week’s session, we’ll build on Series 1 by introducing JavaScript fundamentals in order to make an artistic page with p5.js. We’ll cover JavaScript building blocks including functions, conditionals, arrays, objects, loops, and more. These concepts can apply to Gatsby development as gentle prerequisites, inspiring the ability to create content that could eventually work into a Gatsby site.

YouTube video: https://www.youtube.com/watch?v=3jrzv7l9vsI
Glitch project: https://glitch.com/~gatsbywc-week6-javascript-art
GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week6-javascript-art

Week 7 - Script an Interactive UI with a 3rd-Party API - May 15

Week two will build on week one with scripting of an interactive user interface (UI) by fetching data a third-party JavaScript API. We’ll dig more into browser Application Programming Interfaces (APIs), and introduce techniques for reusable code components.

YouTube video: https://www.youtube.com/watch?v=jiilkXCDNPs
Glitch project: https://glitch.com/~gatsbywc-week7-interactive-api-ui
GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week7-interactive-api-ui

Week 8 - Intro to Node.js and Backend Scripting - May 22

Week three is all about Node.js, the server-side version of JavaScript we know and love. Node is a powerful backend flavor of JavaScript you can use to build robots, helpful command-line tools, or even websites–including Gatsby sitets. We’ll use Node to script something fun and illustrate how it can fit into the creative development process.

Glitch project: https://glitch.com/edit/#!/gatsbywc-week8-nodejs
GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week8-nodejs

Week 9 - Create a Gatsby Site with Creative Content Using React - May 29

In our last session of the series, we’ll tie everything we’ve learned together to create our first Gatsby site using React. If we’ve done it right, some of the JavaScript syntax and concepts should already be familiar by this point so we can focus on the unique parts of React as it relates to Gatsby. By the end, we will have covered all of the initial building blocks for creating modern sites with Gatsby, JavaScript, HTML, and CSS, opening the door to further learning and site creation!

GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week9-intro-gatsby-react

Series 1 of Gatsby Web Creators

Week 1 - Intro to HTML - March 25 & 27

Introducing the series, we’ll talk about the most fundamental part of the Web Platform, HTML (a.k.a. HyperText Markup Language). We’ll explain the building blocks of HTML, including how to create different kinds of elements, add your favorite content, and link pages together.

Day 1 YouTube video: https://www.youtube.com/watch?v=gYEUSsemDeI
Day 1 Glitch project: https://glitch.com/~gatsbywc-week1-day1
Day 1 GitHub files (alternative to Glitch): https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week1-day1
Day 2 YouTube video: https://www.youtube.com/watch?v=UCz6nFoPLzQ
Day 2 Glitch project: https://glitch.com/~gatsbywc-week1-day2
Day 2 GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/blob/master/week1-day2

Week 2 - Intro to CSS - April 3rd

We started building with HTML, and this week is all about making it our own with style. CSS, which stands for Cascading Style Sheets, is a powerful styling language used on nearly every website. We’ll talk about how CSS works, and how we can style our content pages from the previous week using colors, backgrounds, fonts, and more.

Week 2 YouTube video: https://www.youtube.com/watch?v=xE1eddvsGms
Week 2 Glitch project: https://glitch.com/~gatsbywc-week2-css
Week 2 GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week2-intro-to-css

Week 3 - CSS Layout - April 10th

In week three, we’ll dive deeper into CSS with the basics of CSS layout and positioning. We’ll take an existing page and change it enough to create a totally different layout.

Week 3 YouTube video: https://www.youtube.com/watch?v=Ln8Xc6oqBTA
Week 3 Glitch project: https://glitch.com/~gatsbywc-week3-layout
Week 3 GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week3-css-layout

Week 4 - CSS Animation and Transitions - April 17th

In week four we’ll continue learning about CSS magic using transitions and animation. We’ll live code how to approach building a responsive website using media queries, including how to build a modern site by breaking it down into tasks: a meta skill that will serve viewers for years to come.

Week 4 YouTube video: https://www.youtube.com/watch?v=x5VGil-nNPs
Week 4 Glitch project: https://glitch.com/~gatsbywc-week4-animation
Week 4 GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week4-css-animation

Week 5 - Intro to JavaScript and DOM - April 24th

In week 5, we’ll reference what we’ve learned so far about HTML to introduce the JavaScript programming language and DOM (the Document Object Model). We’ll learn about event handlers and functions to make interactive web pages, and dive deeper into programming. We’ll also have an open space pairing day with a special guest.

Week 5 YouTube video: (coming soon)
Week 5 Glitch Project: https://glitch.com/edit/#!/gatsbywc-week5-intro-js-dom
Week 5 GitHub files: https://github.com/gatsbyjs/gatsby-web-creators/tree/master/week5-intro-js-dom

Legal stuff

Glitch: Users have to be 13 or older to create an account. Anyone can remix a Project on Glitch without creating an account, but to save it and use most other functionality will require an account. You can read more on their legal page: https://glitch.com/legal/

Twitch: Anyone can view a Twitch stream without creating an account. Legally, the Twitch Services including chat are not available to persons under the age of 13. If you are between the ages of 13 and 18 (or between 13 and the age of legal majority in your jurisdiction of residence), you may only use the Twitch Services under the supervision of a parent or legal guardian who agrees to be bound by their Terms of Service. More information can be found on their website: https://www.twitch.tv/p/legal/terms-of-service/