Formação Frontend: Html, Css, Javascript, TS e React

Estrutura padrão do html

Tag para cabeçalho do h1 a h6

Parágrafos, outras tag usada para texto e comentário

Link para site externo, arquivos interno e email.

Tag img, definir o tamanho da imagem, fonte externa e local, alt para descrever a imagem e imagem com link.

Utilização de vetores do tipo svg e adicionando ícones na aba da página no navegador

Tag video, uso de video interno com controles, autoplay, poster, mensagem de erro e download do vídeo.

Tag audio, para rodar no navegador áudios em vários formatos

Listas desordenada, ordenada e lista de descrição

Tag table, criação de tabela utilizando colspan e rowspan para mesclar colunas e linhas

Tag hr e br, linha horizontal e quebra de linha

Tag div, cria divisórias para o conteúdo, utilizamos css com display flex para organizar o conteúdo

Tag iframe, usando link para abrir página dentro do iframe

Id com link para criar âncora e navegar pela página

Modificaremos através da classe a tag i(itálico) para mostrar na tela ícones

Como adicionar figurinhas e texto com emojis em utf-8

Droplist para selecionar itens

Input do tipo texto com os atributos mais utilizados

Vamos ver todos os tipos de input

Tipos de botões - submit, reset e button

Formulário básico, para conhecer os atributos, testar a validação e método get

Criando layout com html5

Introdução ao css e como adicionar os estilos

Formas de adicionar estilo, pelo elemento, id ou class

Testaremos todos os estilos de margem

Padding espaço entre a borda e elemento parecido com margem

Altura e largura com tamanho máximo e mínimo

Important para da prioridade ao atributo

Adição de bordas alterando largura, estilo e cor

Atributos para texto, aumentando espaçamentos, alinhamentos e adicionando sombras

Font family para alterar o tipo da fonte, baixar fonte do google e utilizar fontes online

Adicionar cor e imagem ao background, depois vamos alterar posição, tamanho da imagem e adicionar efeitos

Alterando background e largura com hover

Alterando curso do mouse

Estilo do link

Aprendendo a adicionar transição nas propriedades que sofrem mudança

Efeitos e filtros em imagens

Modificando lista ul

Estilo de uma tabela com hover

Estilo do select

Estilo do input

Transform utilizado para variar div, paragráfo e outros, serve para da efeito 3d, deslocamento, inclinação e outros

Posição fixa, absoluta e relativa

Position sticky para definir posição na tela

Overflow scroll, hidden, visible e auto

Aplicando estilo ao botão

Aplicando gradiente

Criando divisão com float, alinhado texto e imagem e criando menu de navegação

Colunas múltiplas

Display do tipo: block, inline, inline-block e list-items

Criando grid com diplay

Criando uma table com display

Propriedades do display flex

Alinhamento horizontal e vertical com justify e align respectivamente

Before e after adicionando conteúdo

Ajustando tela de acordo com dispositivo

Seletores e combinadores para fazer alteração nas propriedades

Animando background-color e rotate

Introdução a javascript

Selecionando por id e classe

Mostrando saídas dos valores, console.log, write, alert e innerHTML

Comentário em bloco e linha

Criando variáveis com var, let, const

Conhecendo os tipos de variáveis

Descobrindo o tipo da variável

Soma, subtração, multiplicação e divisão

Atribuindo valor depois de fazer operação

Incremento e decremento com ++ e --

Módulo ou resto da divisão e exponencial

Métodos da string, funções principais quando trabalhamos com string

Buscando parte de texto dentro de string.

Trabalhando com datas, somando e exibindo como texto

Trabalhando com array, cortando, concatenando e verificando se valor esta incluído

Comparação entre variáveis

If condicional para mostrar valores

For utilizado para percorrer uma array

For com of e in

While/do while executa a função enquanto a condição for verdadeira

Cria funções em constantes(não nomeada), arrow function e funções convencionais

Outra função do array

Cria, alterar e excluir informações no localstorage.

Um temporizador para executar uma função.

Cria um loop infinito para rodar uma função.

Uso de promise para aguarda o retorno de uma função.

Trycatch para capturar error caso ocorra.

Escutadores de evento

Consultado api viacep usando fetch

Trabalhando datas com a biblioteca momentjs

Criação dos arquivos e o html com input, button e ul

Adicionando itens na lista usando javascript

Remove itens na lista usando javascript

Detalhamento do css do projeto parte 1

Detalhamento do css do projeto parte 2

Criando array contatos, adicionando contatos e mostrando os contatos

Função e botão de excluir e editar

Máscara de telefone sem bibliotecas externa

Adicionando cep e botão limpar novos arquivos nos recursos da aula

Criação do menu horizontal com seu estilo

Sessão gastronomia com cards em linha responsivo

Instalação do nodejs pré requisito React e criação do projeto

Detalhando principais pasta do projeto, e reinstalando dependências da pasta node_modules

Extensões para auxiliar na formatação e erro nos arquivos js e ts

Detalhamento dos arquivos de src

Criando componente com function e class

Passando valores por props

Criando um botão customizado

Adicionando typescript no projeto e adicionando no custombutton

Tipo na classe e retorno da função

Import com * , importa style, conflito de nome , export para muitas funcoes

Evento click do mouse disparando useState para fazer algo na tela

Usando state em classes

Clico de vida em classe, para modificar valores de acordo com momento necessário

Adaptação da classe para função em relação ao ciclo de vida do componente