Gatsby JS Beginner Gatsby – Learn to Create A Beautiful Personal Blog [2020] from Thomas Weibenfalk

Gatsby JS Beginner Gatsby – Learn to Create A Beautiful Personal Blog [2020] from Thomas Weibenfalk

Do you want to Improve your knowledge, value and be a top candidate in recruitment processes?
Learn Gatsby JS and be a top contender for modern Front End developer jobs!Level: Beginner
This is a beginners course in Gatsby but you need to have basic knowledge about React, Javascrip and Web Development before enrolling this course.
Also … it is good to have some knowledge of GraphQL as this course won’t go deep into learning GraphQL. Gatsby uses GraphQL to query the content. You still will be able to learn specific GraphQL Queries for this course and project but it won’t show more GraphQL.

Want to learn one of the hottest things in Web Development in 2020? Do you already know some React and want to push forward from there? Do you enjoy project oriented and fast paced courses? Do you want to learn quick and straight down to the point? Then this is the course for you!

Guaranteed no “foo” and “bar” … and no “to-do-list” app 😉

My teaching style is learning by building small projects. My decades of experience in web development have taught me that this style lets you learn fast and efficient. Stop wasting your time!

What will we do in the course?

We’ll build a beautiful blog from scratch with Gatsby.js

Check out the live site here: https://gatsby-weiben-blog.netlify.com/

My main goal with this course is to mix fun with teaching. There’s many tutorials and courses out there that are great but too complex and focus on a lot at the same time. That’s why this course isn’t 20+ hours long.

In this course you’ll learn and use:

– Gatsby Fundamentals

– React Hooks API with functional components

– GraphQL and the built in GraphiQL editor

– Components, props and state

– JSX syntax and expressions

– Markdown

– Styled Components

– Deploy the finished App to Netlify and Gatsby Cloud

– ES6+ concepts and syntax

– Gatsby Browser API and Gatsby Node API

– And a lot more …

Your Instructor

Thomas Weibenfalk
Thomas Weibenfalk

Thomas is a multitalented digital native from Sweden. He has been developing webpages and web applications ever since Internet first became a phenomenon. He’s been employed in several business areas such as Fintech and Advertising in different roles. Today he is a freelancer and work in both coding and design projects as he’s also a skilled designer. His code and design experience range back to the C64 and Amiga era as he grew up by a computer since he was only seven years old. As he is a fullstack developer he mostly enjoys doing Front End code because it’s the bridge between design and technology.

Course CurriculumIntroduction

Welcome (1:00)

What is Gatsby? (5:11)

The project (2:08)

er Files (3:30)

Setup

Gatsby CLI (4:33)

Folder Structure (5:48)

Dependencies (5:28)

Copy from Starter Files (2:59)

Plugins and Config (7:34)

Absolute Imports (7:11)

Tech – OPTIONAL

Markdown (3:59)

Markdown files in project (4:26)

GraphQL (2:52)

GraphQL Query types in Gatsby (3:25)

GraphiQL Editor (2:49)

Styled Components (3:27)

Styled Components – Some Alternatives (2:05)

Global Styles

Colors and themes (7:36)

CSS (11:16)

Layout

Layout Explained (2:47)

Cleanup Project (6:09)

Index (4:43)

useMetaDataQuery Hook (7:43)

Header

useSiteConfigQuery Hook (7:12)

Index (4:38)

Styling (5:01)

Header – Menu – Index (6:22)

Header – Menu – Styles (6:26)

Header – Hamburger – Index (4:20)

Header – Hamburger – Styles (9:10)

Header – Mobile Menu – Index (3:51)

Header – Mobile Menu – Styles (11:21)

Home Page

Index (7:34)

Page Query (9:00)

Image Query (6:17)

Hero – Index (3:52)

Hero – useHeroQuery Hook (8:05)

BGImage – Index (3:34)

BGImage – Styles (7:22)

Hero – Styles (8:16)

BlogPostCard – Index (5:46)

BlogPostCard – Styles (7:01)

Home Page – Finished for now (8:28)

Light And Dark Mode

ModeProvider and Context (6:44)

Gatsby Browser API (2:00)

Mode Button – Index and Styles (5:27)

Implementing Mode Button (6:24)

Pages and Posts

Slugs (7:32)

Page and Posts GraphQL Query (7:02)

Page and Post Templates (11:09)

Dynamically create Pages and Posts (8:53)

Archive and Pagination

Archive and Pagination in Node (6:53)

Index Page Template (6:25)

Page Navigation – Index (7:23)

Page Navigation – Styles (6:21)

Deploy

Netlify (3:27)

Gatsby Cloud (3:16)

Get immediately download Gatsby JS Beginner Gatsby – Learn to Create A Beautiful Personal Blog [2020] from Thomas Weibenfalk