Curso Frontend Design Avançado
Evolua no conhecimento de desenvolvimento e design.
- Empresa: Codesigners
- Nível do curso: Básico
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
Aulas:
-
1 - Introducao - Curso Frontend Design2 - Instalando VSCode e Node JS3 - O que é ECMA SCRIPT 6+ (ES6+)4 - Estrutura de uma aplicacao Front-End Moderna5 - Criando um projeto de Front-End com NodeJS6 - Instalando o Yarn7 - Configurando o Babel8 - Configurando Webpack - Parte 19 - Configurando Webpack Parte 2 Codesigners10 - Configurando Webpack - Parte 311 - Intro Modulo Javascript12 - Paradigmas de Programacao13 - Visao Geral do Projeto Final14 - Javascript Classes e Programacao Orientada a Objeto - Parte 115 - Javascript Classes e Programacao Orientada a Objeto Parte 2 Codesigners16 - Definindo Componentes de UI17 - Estrutura de Layout e Arquivos Sass18 - Instalando Hyperscript19 - Usando o Hyperscript para criar Componentes Codesigners20 - Javascrit Modules - Import e Export21 - UI Components - PageLayout Parte 122 - UI Components - Navbar Parte 123 - UI Components - Navbar Parte 224 - UI Components - Steps Parte 125 - UI Components - Steps Parte 226 - UI Components - Steps Parte 327 - Corrigindo Unidades de Medida para REM28 - Functional Programming - Pure Functions29 - UI Components - Button Parte 1 e Arrow Functions-30 - UI Componentes - Button Parte 2 e Template Strings31 - UI Components - Product Parte 132 - UI Components - Product Parte 233 - UI Components - Product Parte 334 - UI Components - Product Parte 435 - UI Components - Product Parte 536 - Router - Diferença entre Client e Server Routing37 - Router - Routing quando existe banco de dados38 - Router - Estrutura de Rotas do Nosso Projeto39 - Router - Previnindo o Browser de buscar rota no server40 - Router - Usando o pushState da History API41 - Router - Criando as Pages42 - Page Content - Logica43 - Page Content - Design Patterns - Observer Parte 144 - Page Content - Design Patterns - Observer Parte 245 - Page Content - Design Patterns - Observer Parte 346 - Page Content - Design Patterns - Observer Parte 447 - Page Content - Design Patterns - Singleton48 - Page Content - Alternando o Conteudo da Pagina49 - Page Content - Alternando o Conteudo via Historico com OnpopState50 - Page Content - Adicionando Links nos Product items51 - Page Content - Mostrando a Pagina Customizar52 - Customizar Skateboard - Introdução53 - UI Components - Color Picker Parte 154 - UI Components - Color Picker Parte 255 - UI Components - Color Picker Parte 356 - UI Components - Summary Parte 157 - UI Components - Summary Parte 258 - UI Components - Renomeando Summary para OrderDetails59 - UI Components - PartsSelector - Estrutura HTML e CSS60 - UI Components - PartsSelector - Entendendo o Funcionamento61 - UI Components PartsSelector Planejando a Logica Codesigners62 - UI Components - PartsSelector - Método Map - Mapeando Itens63 - Sync e Async TaskLoop, MicroTasks e MacroTasks Parte 1 Codesigners64 - Sync e Async - TaskLoop, MicroTasks e MacroTasks Parte 265 - Promise - Resolve, Reject, Then e Catch66 - UI Components PartsSelector Aplicando Promise Codesigners67 - UI Components PartsSelector Gerando um Array com Width dos Itens Codesigners68 - UI Components - PartsSelector - Reduce69 - UI Components - PartsSelector - Logica para NextItems70 - UI Components - PartsSelector - Largura do Wrapper e Filter71 - UI Components PartsSelector NextItem Slide Parte 1 Codesigners72 - UI Components - PartsSelector - NextItem Slide Parte 273 - UI Components - Parts Selector - Logica para PrevItems74 - UI Components - Parts Selector - PrevItem Slide75 - UI Components - Parts Selector - Corrigindo Deslocamento Parte 176 - UI Components Parts Selector Corrigindo Deslocamento Parte 2 Codesigners77 - Three JS - CPU, GPU e WebGL78 - Three JS Exemplos Codesigners79 - Three JS Instalando Three e GLTF Webpack Loader Codesigners80 - UI Components - Skateboard - Estrutura inicial Parte 181 - UI Components - Skateboard - Estrutura inicial Parte 282 - UI Components - Skateboard - Criando Scene, Camera, Luz e Orbit83 - UI Components - Skateboard - Adicionando elementos a Scene Parte 184 - UI Components - Skateboard - Adicionando elementos a Scene Parte 285 - UI Components - Skateboard - Adicionando elementos a Scene Parte 386 - Fluxo de Informacoes com Store State e Observers87 - Separando a Logica da View no PartsSelector88 - Separando a Logica da View no Skateboard89 - Embrulhando os componentes em Funcoes Codesigners90 - Criando Subect, Subscribers e Observers da Store91 - Testando o Handler e Fluxo de Informacoes92 - Mudando a Posicao inicial do Skate93 - Construindo a Store e o Objeto State94 - Spread e Rest Operators95 - Destructuring96 - Consumindo o objeto State nos Componentes97 - Separando a Logica do ColorPicker98 - Atualizando o Objeto State com Nested Spread99 - Atualizando o State e mantendo dados anteriores Codesigners100 - Corrigindo partsSelectorLogic com removeEventListener101 - Enviando a posicao do Skateboard para a Store102 - Subjects Dispatcher Parte 1 Codesigners103 - Subjects Dispatcher Parte 2104 - Subjects Dispatcher Parte 3 Codesigners105 - Subjects Dispatcher Parte 4106 - Subjects Dispatcher Parte 5107 - Persistindo o Skateboard Position108 - Trocando as Cores do Skateboard Parte 1109 - Trocando as Cores do Skateboard Parte 2110 - Trocando cores do Skateboard Parte 3111 - Trocando cores do Skateboard Parte 4112 - Trocando cores do Skateboard Parte 5113 - Salvando a Cor - Parte 1114 - Salvando a Cor - Parte 2115 - Salvando a Cor - Parte 3116 - Salvando a Cor - Parte 4117 - Melhorando Messages118 - Order Details Explicacao Codesigners119 - Order Details - Preenchendo Dados Dinamicamente na Tabela120 - Order Details - Atualizando Dados na Tabela121 - Order Details Somando os Valores Codesigners122 - Order Details Limpando Customizacoes Parte 1 Codesigners123 - Order Details - Limpando Customizacoes - Parte 2124 - Refinamentos - Parts Selector - Destacando Item125 Refinamentos Color Picker Parte 1126 Refinamentos Color Picker Parte 2127 Refinamentos Melhorando Volumetria 3D com PointLight128 Refinamentos Antialiasing e Position do Skate129 Refinamentos Corrigindo Glitches no Parts Selector, Skate e Order Detais130 Finalizacao Refatorando Pages e Routes Parte 1131 Finalizacao Refatorando Pages e Routes Parte 2132 Finalizacao Refatorando Pages e Routes Parte 3133 Finalizacao Corrigindo Bugs no ChangeContent e Subscribers134 Finalizacao Corrigindo CSS do Products List135 Finalicacao Limpando Console Logs e Melhorando Indentacao136 Build Configurando Webpack para Production Build Parte 1137 Build Configurando Webpack para Production Build Parte 2138 Build Configurando Webpack para Production Build Parte 3139 - Build - Final.mp4140 Desafio Final