Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Gatsby.js

Gatsby: Crie um site PWA com React, GraphQL e Netlify CMS

Crie e coloque no ar um site extremamente rápido, utilizando boas práticas e as ferramentas mais utilizadas no mercado.
Highest Rated
Rating: 4.8 out of 54.8 (779 ratings)
2,070 students
Created by Willian Justen de Vasconcellos
Last updated 3/2021
Portuguese
30-Day Money-Back Guarantee

What you'll learn

  • Como usar o Gatsby para criar sites extremamente rápidos
  • Como pegar informações do GraphQL
  • Como configurar os melhores plugins do Gatsby
  • Como criar posts em Markdown e transformá-los em dados no GraphQL
  • Como utilizar o gatsby-image para otimizar imagens e fazer lazy loading
  • Como criar uma boa estrutura de componentes em React
  • Como utilizar o styled components
  • Como criar um site PWA e com o SEO perfeito

Course content

15 sections • 93 lectures • 9h 50m total length

  • Preview02:57
  • Preview03:00
  • Preview02:22
  • Preview04:59

  • Preview06:56
  • Entendendo a estrutura
    05:58
  • Organizando os arquivos
    04:40
  • Criando a página de About
    01:58
  • Entendendo como o gatsby-link funciona
    07:08
  • Criando um componente e compartilhando entre páginas
    06:55

  • Uma introdução ao GraphQL
    09:50
  • Conhecendo o GraphiQL e escrevendo nossa primeira query
    06:52
  • Utilizando o Prisma Playground ao invés do GraphiQL
    04:16
  • Renderizando dados com `StaticQuery`
    07:11
  • Refatorando para o novo hook `useStaticQuery`
    03:50

  • Conhecendo as maravilhas do gatsby-image
    04:52
  • Configurando o gatsby-image
    06:28
  • Criando a primeira query para imagens
    12:00
  • Entendendo os 2 tipos de imagem responsiva (fluid e fixed)
    04:58

  • Introdução ao Styled Components
    04:10
  • Instalando e configurando o Styled Components
    02:01
  • Criando o Layout Component
    06:20
  • Criando estilos globais com `createGlobalStyle`
    04:13
  • Refatorando o styled component para uma forma mais organizada
    03:27
  • Criando o Avatar Component
    02:32
  • Criando o Profile Component
    03:34
  • Criando a Sidebar Component
    04:09
  • Criando o SocialLinks Component - Parte 1
    07:14
  • Criando o SocialLinks Component - Parte 2
    09:44
  • Criando o MenuLinks Component
    08:18
  • Criando a MenuBar Component
    09:25
  • Criando o PostItem Component
    12:11
  • Estruturando os dados do PostItem
    06:38

  • Criando posts em Markdown
    08:16
  • Configurando o gatsby-transformer-remark
    03:41
  • Pegando os dados do Markdown usando GraphQL
    03:58
  • Tratando datas no GraphQL
    02:59
  • Passando os dados do GraphQL para a página
    08:10
  • Adicionando fields com o `onCreateNode`
    08:25
  • Usando o createPages da Gatsby Node API
    08:20
  • Filtrando dados no GraphQL usando variáveis
    07:22
  • Criando o template para o Blog Post
    06:37

  • Ordenando os posts pela data
    04:06
  • Entendendo o limit e skip para criar uma paginação
    05:18
  • Usando o Gatsby Node API para criar a paginação
    09:29
  • Criando o template para a home
    06:10
  • Criando um componente de paginação
    13:25

  • Integrando o Layout ao Blog Post
    01:22
  • Adicionando estilos bases para o post
    05:57
  • Configurando as imagens dentro do post com gatsby-remark-images
    11:04
  • Configurando o PrismJS para highlight de código
    04:28
  • Criando contextos de post anterior e próximo post
    04:23
  • Criando o RecommendedPosts component
    10:29
  • Configurando o Disqus para comentários
    08:00

  • Conhecendo o Algolia
    03:22
  • Criando o primeiro App e configurando indices
    03:21
  • Instalando o plugin do Algolia e salvando as chaves da API
    06:15
  • Configurando o plugin dentro do Gatsby
    15:24
  • Configurando o searchable attributes e custom ranking do Algolia
    04:17
  • Criando a página de Search
    02:44
  • Criando o Search Component
    06:36
  • Configurando o Input de busca e stats
    05:30
  • Configurando os itens de resultados
    06:29

  • As diferentes soluções para Light/Dark Theme
    03:59
  • Criando CSS Variables
    08:48
  • Criando um html.js customizável para o Gatsby
    04:01
  • Criando o método para a troca dos temas
    13:35
  • Criando o método para troca de visualização
    07:05
  • Estilizando com CSS Grid
    11:38

Requirements

  • Básico de HTML, CSS e JS
  • Editor de Texto (VSCode preferencialmente)
  • Node 8+
  • Git

Description

Já pensou em ter um site PWA para suas necessidades e utilizando as tecnologias de ponta?

Com esse curso, você aplicará conceitos atuais do mercado e botará em prática ferramentas em alta demanda como: React e GraphQL (através do Gatsby), Styled Components e técnicas de CI/CD (de forma gratuita com o Netlify).

Você irá aprender a criar um site de verdade e colocá-lo no ar! Nada de bar e foo, tudo que será ensinado, será utilizado na prática até o final!

Faça o curso com um dos instrutores brasileiros com o maior número de alunos na Udemy e com vários cursos dentre as classificações mais altas da plataforma!

Who this course is for:

  • Desenvolvedores Frontend que desejam criar um blog próprio
  • Freelancers que criam sites/blogs para empresas
  • Desenvolvedores com interesse em aprender mais sobre boas práticas em Frontend
  • Desenvolvedores com interesse em aprender React e GraphQL

Instructor

Willian Justen de Vasconcellos
Engenheiro de Software
Willian Justen de Vasconcellos
  • 4.7 Instructor Rating
  • 34,433 Reviews
  • 214,813 Students
  • 9 Courses

Olá, me chamo Willian Justen e sou Engenheiro de Software com anos experiência, já tendo trabalhado em grandes empresas como Toptal, Globo, HUGE, Queremos/WeDemand entre outras. Sempre focando na qualidade e melhor entrega para o usuário. Escrevo bastante no meu blog, falando sobre SVG, CSS, JS e minhas experiências como desenvolvedor.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.