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

Frontend

HTML

Picture Element - HTML5

1 Aula Básico

Neste direto ao ponto vamos aprender a trabalhar com um elemento introduzido na versão 5 do HTML que veio para facilitar a trabalhar com imagem e responsividade.

Básico

Picture Element - HTML5

Criando modais nativas com Dialog - HTML5

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com o elemento nativo dialog que chegou no HTML5 e é capaz de gerar modais/pop-up nativos usando HTML, sem necessidade de trabalhar com implementações terceiras.

Intermediário

Criando modais nativas com Dialog - HTML5

Utilizando elemento Meter - HTML5

1 Aula Intermediário

Neste direto ao ponto vamos aprender o que é o elemento meter, introduzido no HTML5 que é capaz de representar um valor escalar dentro de um intervalo. Vamos entender quais as situações que podemos utiliza-lo para criar uma interface interativa para nosso usuário.

Intermediário

Utilizando elemento Meter - HTML5

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

CSS

Utilizando Clamp CSS

1 Aula Intermediário

Neste direto ao ponto vamos aprender utilizar a propriedade Clamp, afim de melhorar nosso layout responsivo quando temos que trabalhar com diversos tamanho de fontes a partir do tamanho de nosso layout.

Intermediário

Utilizando Clamp CSS

Touch device com CSS

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com uma propriedade ainda pouca falada no CSS porem de extrema importância para uma boa experiência do usuário. Vamos aprender como podemos detectar toques (touch) no celular e interagir com ele através do CSS.

Intermediário

Touch device com 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

React

Introdução ao Mobx

1 Aula Intermediário

Neste direto ao ponto vamos aprender o que é o Mobx e como ele pode ser uma ótima alternativa para quem deseja gerenciador estados dentro de uma aplicação React.js

Intermediário

Introdução ao Mobx

React Hooks - useRef

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com um dos hooks que chegaram na versão do React 16.8 o useRef. Capaz de manipular os elementos DOM de forma mais simples, trazendo muito mais simplicidade.

Intermediário

React Hooks - useRef

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

Verificando tipos estáticos com Flow - React

1 Aula Avançado

Neste direto ao ponto vamos aprender a identificar certos problemas antes mesmo de executar nosso código através de um ferramenta chamada Flow que é capaz de verificar tipos estáticos e sugerir melhorias.

Avançado

Verificando tipos estáticos com Flow - React

Utilizando template engine Pug com React.js

1 Aula Avançado

Neste direto ao ponto vamos trabalhar com o template engine Pug (antigo Jade) e aprender a integrar com o framework React.js, utilizando ele para criar o HTML ao invés de apenas JSX.

Avançado

Utilizando template engine Pug com React.js

High order components - React

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com HOC dentro do React. Hight order components desempenham um papel muito importante em vários momentos dentro da tecnologia, vamos conhecer e aprender como criar um.

Avançado

High order components - React

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

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