Vídeos direto ao ponto sobre Frontend | School of Net

Frontend

HTML e CSS

Imagens quebradas como trabalhar como CSS

1 Aula Básico

Neste direto ao ponto vamos aprender uma maneira simples de trabalhar com fallback em caso de um link quebrado para uma imagem, através de uma regra CSS.

Básico

Imagens quebradas como trabalhar como CSS

Validação de formulário: CSS e Javascript com Bootstrap 4

1 Aula Básico

Neste direto ao ponto vamos aprender a trabalhar com um sistema de validação de formulários simples, feito somente com HTML e CSS e um pouco de Javascript. Aprenderemos a utilizar as pseudo class do CSS para trabalhar com estilos nos inputs.

Básico

Validação de formulário: CSS e Javascript com Bootstrap 4

Defer e Async Javascript - Browser

1 Aula Básico

Neste direto ao ponto vamos entender o que são as tags defer e async e como podemos utiliza-las em nossas aplicações e também qual a principal diferença entre elas.

Básico

Defer e Async Javascript - Browser

Animações Web com BodyMovin

1 Aula Avançado

Nesse direto ao ponto vamos aprender a trabalhar com animações na web, algo que por muito tempo foi muito complexo de se realizar.

Avançado

Animações Web com BodyMovin

CSS

Aplicando efeito :hover no mobile CSS

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com o famoso efeito on hover que é muito comum de ser aplicado com regras CSS no desktop, entretanto no mobile não é tão fácil assim. Vamos aprender a como trabalhar com hover no mobile.

Intermediário

Aplicando efeito :hover no mobile CSS

CSS Grid- Overview

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com grid utilizando a feature nativa de grid disponível no CSS.

Intermediário

CSS Grid- Overview

Javascript

Trabalhando com Drag and Drop

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com o efeito Drag and Drop. Vamos trabalhar interagindo com a API nativa do HTML e também com SortableJS que é uma abstração da API nativa.

Intermediário

Trabalhando com Drag and Drop

Entendendo Promises: all e allSettled

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com dois métodos que estão disponíveis nas Promises: all, já conhecido de muitos e o allSettled que é algo novo e veio com uma grande e útil diferença.

Intermediário

Entendendo Promises: all e allSettled

Sincronização de dados offline com PouchDB

1 Aula Intermediário

Offline first é um termo que está cada dia mais ganhando espaço no dia a dia. O PouchDB é uma solução que oferece uma forma simples de se trabalhar com a API de banco de dados do Browser, tornando possível criar uma solução offline first e além disso oferece recursos de sincronização desses dados através do CouchDB.

Intermediário

Sincronização de dados offline com PouchDB

Trabalhando com Decorators - ES7

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com Decorators, uma funcionalidade já disponível em diversas outras linguagens de programação que também chegou ao Javascript na versão 7 do Ecmascript.

Avançado

Trabalhando com Decorators - ES7

Wrapper IIFE Javascript

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com IIFE ou funções imediatas. Aprenderemos como podemos criar um wrapper o código ficar mais legível.

Avançado

Wrapper IIFE Javascript

React

Entendendo Refs com React.js

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com Refs com React.js, entender o que é e como funciona e qual a sua ligação com o DOM.

Intermediário

Entendendo Refs com React.js

React Developer Tools

1 Aula Intermediário

Neste direto ao ponto aprenderemos a utilizar a ferramenta React Developer Tools, essencial para qualquer desenvolvedor frontend que trabalhe com React.js

Intermediário

React Developer Tools

useMemo Hook - React.js

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar como hook useMemo do React.js, entender o seu funcionamento e situações que ele se encaixa muito bem.

Intermediário

useMemo Hook - React.js

Typescript com React.js

1 Aula Intermediário

Neste direto ao ponto vamos aprender a utilizar o Typescript com React.js trazendo algumas vantagens ao nosso projeto como IntelliSense e várias outras coisas.

Intermediário

Typescript com React.js

Duck Pattern Redux

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com Duck Pattern numa aplicação React + Redux afim de reduzir a redundância de nossa arquitetura.

Intermediário

Duck Pattern Redux

PropTypes React.js - Como usar

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com a prop-type. Uma forma de dizer quais são as propriedades requeridas do seu componente.

Intermediário

PropTypes React.js - Como usar

Criando hooks customizados React.js

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com a criação de React Hooks customizados. Iremos entender o passo a passo de como isso é feito e qual o processo e estrutura necessário para realizar.

Avançado

Criando hooks customizados React.js

Trabalhando com Constate no React.js

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com Constante, uma lib capaz de gerenciar os contextos da sua aplicação React através de React Hooks.

Avançado

Trabalhando com Constate no React.js

Validações de Formulário com React Hook Form

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com validação utilizando o react hook form. Uma lib capaz de utilizar o conceito de hook para validar os dados de formulário.

Avançado

Validações de Formulário com React Hook Form

Iniciando com React hooks

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar react-hooks, feature introduzida no react a partir da versão 16.9 que trouxe muitas mudanças.

Avançado

Iniciando com React hooks

Outros

ES7 - Trabalhando com decorators

1 Aula Básico

Neste direto ao ponto, apresentaremos um novo recurso da EcmaScript 7, a possibilidade de criar decorators no JavaScript. Decorators são funções que podem estender e adicionar funcionalidades às classes, métodos e propriedades. Este recurso mudará a forma como programamos com JavaScript.

Básico

ES7 - Trabalhando com decorators

Snippets no Visual Studio Code

1 Aula Básico

Neste direto ao ponto, ensinaremos como ganhar produtividade usando snippets. Além de criar blocos de códigos, o recurso permite inclusão de "Tabstops" para controlar a navegação pelo bloco através da tecla tab, oferecendo valores padrão ou opções dentro dos tabstops. Falaremos, também, sobre intelisense e o Emmet.

Básico

Snippets no Visual Studio Code

Sublime Text para Iniciantes

1 Aula Básico

Neste direto ao ponto vamos conhecer o Sublime Text 3, um editor de texto focado em código que é extremamente leve e altamente produtivo, com recursos nativos aprimorados e capacidade de expanção simplificada, graças ao Package Control. O Sublime Text é uma ferramenta indispensável no meu dia a dia.

Básico

Sublime Text para Iniciantes

Utilizando proxy do BrowserSync com Express.js e Gulp

1 Aula Intermediário

Ensinaremos a trabalhar com a propriedade proxy do browsersync, utilizando uma tarefa do gulp com expressjs (ou qualquer outro servidor). Você encapsulará seu vhost e conseguirá acessar ambos, em apenas um local.

Intermediário

Utilizando proxy do BrowserSync com Express.js e Gulp

Validações de dados no front end com Validator

1 Aula Intermediário

Neste direto ao ponto utilizaremos uma biblioteca para validação no front end chamada de Validator, ela conta com uma suite enorme de validação capaz de validar as situações mais comuns do dia a dia.

Intermediário

Validações de dados no front end com Validator

Trabalhando com IndexedDB - Banco de dados no navegador

1 Aula

Neste direto ao ponto, apresentaremos um banco de dados chave-valor, nativo dos navegadores. Ensinaremos como se conectar, criar storages (como tabelas no MySql) e na sequência, como incluir, visualizar, editar e remover registros do banco, tudo disponibilizado offline.

Trabalhando com IndexedDB - Banco de dados no navegador