Curso Frontend Design Avançado

Evolua no conhecimento de desenvolvimento e design.

A área de desenvolvimento da tecnologia está divida em basicamente dois grandes grupos: Backend e Frontend. Enquanto a primeira está diretamente relacionada ao códigos e as tecnologias que fazem com que os sistemas funcionem e que não são diretamente acessadas pelos usuários, o Frontend está diretamente relacionado a tudo aquilo que os usuários acabam enxergando e entrando em contato.

Por exemplo, quando acessamos um site, tudo o que faz com que as informações cheguem e sejam enviadas para a internet, bem como os códigos de  endereçamentos e outros protocolos que permitem com que as pessoas consigam acessar o serviço faz parte do Backend. Agora o design do site em sí, os botões, links e todos os segmento que permitem interação está diretamente relacionado ao Frontend.

Aprenda mais sobre Frontend Design Avançado neste curso online e gratuito. Não deixe de conferir também o curso de Desenvolvimento Frontend.

Sobre o curso

Este curso online é destinado para as pessoas que já possuem alguns conhecimentos no segmento de desenvolvimento de designs de páginas para a web de uma forma geral e desejam ampliar as suas capacidades de entrega, conseguindo criar trabalhos mais elaborados. Para isso, o curso ensina basicamente uma das tecnologias mais importantes para criação de sites modernos, o Javascript ES6+.

Estrutura do curso

1 – Introducao – Curso Frontend Design

2 – Instalando VSCode e Node JS

3 – O que é ECMA SCRIPT 6+ (ES6+)

4 – Estrutura de uma aplicacao Front-End Moderna

5 – Criando um projeto de Front-End com NodeJS

6 – Instalando o Yarn

7 – Configurando o Babel

8 – Configurando Webpack – Parte 1

9 – Configurando Webpack Parte 2 Codesigners

10 – Configurando Webpack – Parte 3

11 – Intro Modulo Javascript

12 – Paradigmas de Programacao

13 – Visao Geral do Projeto Final

14 – Javascript Classes e Programacao Orientada a Objeto – Parte 1

15 – Javascript Classes e Programacao Orientada a Objeto Parte 2 Codesigners

16 – Definindo Componentes de UI

17 – Estrutura de Layout e Arquivos Sass

18 – Instalando Hyperscript

19 – Usando o Hyperscript para criar Componentes Codesigners

20 – Javascrit Modules – Import e Export

21 – UI Components – PageLayout Parte 1

22 – UI Components – Navbar Parte 1

23 – UI Components – Navbar Parte 2

24 – UI Components – Steps Parte 1

25 – UI Components – Steps Parte 2

26 – UI Components – Steps Parte 3

27 – Corrigindo Unidades de Medida para REM

28 – Functional Programming – Pure Functions

29 – UI Components – Button Parte 1 e Arrow Functions-

30 – UI Componentes – Button Parte 2 e Template Strings

31 – UI Components – Product Parte 1

32 – UI Components – Product Parte 2

33 – UI Components – Product Parte 3

34 – UI Components – Product Parte 4

35 – UI Components – Product Parte 5

36 – Router – Diferença entre Client e Server Routing

37 – Router – Routing quando existe banco de dados

38 – Router – Estrutura de Rotas do Nosso Projeto

39 – Router – Previnindo o Browser de buscar rota no server

40 – Router – Usando o pushState da History API

41 – Router – Criando as Pages

42 – Page Content – Logica

43 – Page Content – Design Patterns – Observer Parte 1

44 – Page Content – Design Patterns – Observer Parte 2

45 – Page Content – Design Patterns – Observer Parte 3

46 – Page Content – Design Patterns – Observer Parte 4

47 – Page Content – Design Patterns – Singleton

48 – Page Content – Alternando o Conteudo da Pagina

49 – Page Content – Alternando o Conteudo via Historico com OnpopState

50 – Page Content – Adicionando Links nos Product items

51 – Page Content – Mostrando a Pagina Customizar

52 – Customizar Skateboard – Introdução

53 – UI Components – Color Picker Parte 1

54 – UI Components – Color Picker Parte 2

55 – UI Components – Color Picker Parte 3

56 – UI Components – Summary Parte 1

57 – UI Components – Summary Parte 2

58 – UI Components – Renomeando Summary para OrderDetails

59 – UI Components – PartsSelector – Estrutura HTML e CSS

60 – UI Components – PartsSelector – Entendendo o Funcionamento

61 – UI Components PartsSelector Planejando a Logica Codesigners

62 – UI Components – PartsSelector – Método Map – Mapeando Itens

63 – Sync e Async TaskLoop, MicroTasks e MacroTasks Parte 1 Codesigners

64 – Sync e Async – TaskLoop, MicroTasks e MacroTasks Parte 2

65 – Promise – Resolve, Reject, Then e Catch

66 – UI Components PartsSelector Aplicando Promise Codesigners

67 – UI Components PartsSelector Gerando um Array com Width dos Itens Codesigners

68 – UI Components – PartsSelector – Reduce

69 – UI Components – PartsSelector – Logica para NextItems

70 – UI Components – PartsSelector – Largura do Wrapper e Filter

71 – UI Components PartsSelector NextItem Slide Parte 1 Codesigners

72 – UI Components – PartsSelector – NextItem Slide Parte 2

73 – UI Components – Parts Selector – Logica para PrevItems

74 – UI Components – Parts Selector – PrevItem Slide

75 – UI Components – Parts Selector – Corrigindo Deslocamento Parte 1

76 – UI Components Parts Selector Corrigindo Deslocamento Parte 2 Codesigners

77 – Three JS – CPU, GPU e WebGL

78 – Three JS Exemplos Codesigners

79 – Three JS Instalando Three e GLTF Webpack Loader Codesigners

80 – UI Components – Skateboard – Estrutura inicial Parte 1

81 – UI Components – Skateboard – Estrutura inicial Parte 2

82 – UI Components – Skateboard – Criando Scene, Camera, Luz e Orbit

83 – UI Components – Skateboard – Adicionando elementos a Scene Parte 1

84 – UI Components – Skateboard – Adicionando elementos a Scene Parte 2

85 – UI Components – Skateboard – Adicionando elementos a Scene Parte 3

86 – Fluxo de Informacoes com Store State e Observers

87 – Separando a Logica da View no PartsSelector

88 – Separando a Logica da View no Skateboard

89 – Embrulhando os componentes em Funcoes Codesigners

90 – Criando Subect, Subscribers e Observers da Store

91 – Testando o Handler e Fluxo de Informacoes

92 – Mudando a Posicao inicial do Skate

93 – Construindo a Store e o Objeto State

94 – Spread e Rest Operators

95 – Destructuring

96 – Consumindo o objeto State nos Componentes

97 – Separando a Logica do ColorPicker

98 – Atualizando o Objeto State com Nested Spread

99 – Atualizando o State e mantendo dados anteriores Codesigners

100 – Corrigindo partsSelectorLogic com removeEventListener

101 – Enviando a posicao do Skateboard para a Store

102 – Subjects Dispatcher Parte 1 Codesigners

103 – Subjects Dispatcher Parte 2

104 – Subjects Dispatcher Parte 3 Codesigners

105 – Subjects Dispatcher Parte 4

106 – Subjects Dispatcher Parte 5

107 – Persistindo o Skateboard Position

108 – Trocando as Cores do Skateboard Parte 1

109 – Trocando as Cores do Skateboard Parte 2

110 – Trocando cores do Skateboard Parte 3

111 – Trocando cores do Skateboard Parte 4

112 – Trocando cores do Skateboard Parte 5

113 – Salvando a Cor – Parte 1

114 – Salvando a Cor – Parte 2

115 – Salvando a Cor – Parte 3

116 – Salvando a Cor – Parte 4

117 – Melhorando Messages

118 – Order Details Explicacao Codesigners

119 – Order Details – Preenchendo Dados Dinamicamente na Tabela

120 – Order Details – Atualizando Dados na Tabela

121 – Order Details Somando os Valores Codesigners

122 – Order Details Limpando Customizacoes Parte 1 Codesigners

123 – Order Details – Limpando Customizacoes – Parte 2

124 – Refinamentos – Parts Selector – Destacando Item

125 Refinamentos Color Picker Parte 1

126 Refinamentos Color Picker Parte 2

127 Refinamentos Melhorando Volumetria 3D com PointLight

128 Refinamentos Antialiasing e Position do Skate

129 Refinamentos Corrigindo Glitches no Parts Selector, Skate e Order Detais

130 Finalizacao Refatorando Pages e Routes Parte 1

131 Finalizacao Refatorando Pages e Routes Parte 2

132 Finalizacao Refatorando Pages e Routes Parte 3

133 Finalizacao Corrigindo Bugs no ChangeContent e Subscribers

134 Finalizacao Corrigindo CSS do Products List

135 Finalicacao Limpando Console Logs e Melhorando Indentacao

136 Build Configurando Webpack para Production Build Parte 1

137 Build Configurando Webpack para Production Build Parte 2

138 Build Configurando Webpack para Production Build Parte 3

139 – Build – Final.mp4

140 Desafio Final