Desvendando a web: HTML, CSS, Javascript e Typescript [2023]

Desenvolvimento Web Full Stack: HTML, CSS, JavaScript, TypeScript e Lógica de Programação. Bonus: React.js

4.40 (119 reviews)
Udemy
platform
Português
language
Web Development
category
Desvendando a web: HTML, CSS, Javascript e Typescript [2023]
406
students
34 hours
content
Jun 2023
last update
$19.99
regular price

What you will learn

Javascript básico e orientação a objetos

Criação de site estático

Criação de site complexo utilizando React

Criação de sites responsivos

Criação de layout com flexbox e grid

Lógica de programação e boas práticas no desenvolvimento de software

Typescript: Aprender a tipar os objetos de forma avançada

Programação orientada a objetos

Criação de testes unitários utilizando Jest

Description

Este curso completo de Desenvolvimento Web Full Stack foi projetado para ensinar HTML, CSS, JavaScript, TypeScript e lógica de programação para iniciantes. Você aprenderá os fundamentos das tecnologias web mais populares, desde a criação de páginas estáticas até o desenvolvimento de aplicativos web dinâmicos e interativos.

O curso começa com uma introdução à lógica de programação, abrangendo conceitos básicos como variáveis, condicionais e loops. Em seguida, você aprenderá sobre HTML, incluindo a estrutura básica da página, tags, atributos e elementos comuns usados para criar uma página web.

Depois disso, o curso ensinará CSS, abordando conceitos como seletores, propriedades, valores, layout e estilos responsivos. Você aprenderá a criar layouts atraentes e responsivos para suas páginas.

Em seguida, você mergulhará no JavaScript, onde aprenderá a criar interatividade em suas páginas web. O curso cobre desde os conceitos básicos de JavaScript, como variáveis, tipos de dados, funções e loops, até tópicos mais avançados como eventos, manipulação do DOM e AJAX.

Por fim, o curso ensinará TypeScript, uma linguagem de programação que ajuda a escrever código JavaScript mais seguro, confiável e escalável. Você aprenderá a criar aplicativos de página única usando React, uma das principais bibliotecas JavaScript.

Ao concluir este curso, você terá adquirido as habilidades e o conhecimento necessários para criar páginas web estáticas e dinâmicas, bem como aplicativos web de página única com um conjunto completo de tecnologias web modernas.

Content

Introdução

Roteiro do curso
Como está estruturado o curso

[Javascript] aprendendo lógica de programação

Introdução
Link Github
Instalando as ferramentas necessárias
O que é um CONST e um LET
Como verificar se uma condição é verdadeiro ou falso
Como utilizar o FOR
Como utilizar o WHILE
Como utilizar o DO WHILE
Criando e utilizando um array
Fazendo conversão de String para Número e Número para String
Criando e executando uma função
Teste Gasto de combustível
Corrigindo o Teste: Gasto de combustível
Operadores no javascript
Teste: Seis Números Ímpares
Corrigindo teste: Seis números ímpares
Teste: Múltiplos de 13
Corrigindo teste: Múltiplos de 13
Aprendendo mais sobre String e suas funções
Teste: Contando Caracters (Olimpiada Brasileira de Programação)
Corrigindo Teste: Contando Caracters
Entendendo sobre variáveis primitivas e imutáveis
Aprendendo sobre Switch Case
Aprendendo sobre Try, Catch e Finally

[Javascript], aprendendo sobre funções e objetos

Funções: Como declarar, executar, enviar parâmetros e receber respostas
Escopo léxico
Função de callback
Função Async Await
Função recursiva
Teste: Soma recursiva
Correção: Soma recursiva
Trabalhando com objeto simples

[Javascript] Manipulando Arrays de objetos

Introdução
Trabalhando com o array utilizando .map
Trabalhando com o array utilizando .forEach
Trabalhando com o array utilizando .filter
Trabalhando com o array utilizando .find
Trabalhando com o array utilizando .reduce
Trabalhando com o array utilizando .keys
Trabalhando com o array utilizando .sort
Trabalhando com o array utilizando .some e .every
Trabalhando com o array utilizando .flatMap

[Javascript] Orientação a objetos

Introdução
Link git hub
Criando classe pessoa e entendendo um pouco sobre orientação objeto
Trabalhando com herança
Trabalhando com polimorfismo
Trabalhando com Object.defineProperty e Object.defineProperties
Trabalhando com Get e Set na classe
Trabalhando com Spread
Teste: Criando produtos de um marketplace
Correção: Criando produtos de um marketplace

[HTML5] - Conceitos básicos

Introdução
Estrutura de um arquivo html
Trabalhando com o <Head>
Trabalhando com as tags de texto
Trabalhando com lista ordenada e não ordenada
Trabalhando com tags de estrutura
Trabalhando com tags de Imagem e Multimídia
Trabalhando com tags de formulário
Trabalhando com tags de tabela
Entendendo a montagem de uma página com html

[HTML + CSS] - Incluindo o css nos nossos projetos

Introdução
Incluindo CSS no html utilizando: tag, class, id e inline
Como utilizar margin e unidades de medida no css
Como utilizar o padding e o border
Como utilizar o width e height (com responsividade)
Como trabalhar com as posições dos itens na tela
Como trabalhar com float

[CSS] - Aprendendo sobre Flexbox

Introdução
Aprendendo a utilizar Display Flex e wrap
Aprendendo sobre o Flex-direction
Aprendendo sobre Flex-wrap
Aprendendo sobre flex-flow
Aprendendo sobre o justify-content
Aprendendo sobre Align-items
Aprendendo sobre align-content
HTML + CSS na prática: Montando nossa primeira página web
Inserindo responsividade na página web

[Typescript] - Montando o projeto

Introdução
Criando o projeto typescript
Link Github
Instalando Eslint e Prettier
Instalando o Ts-node
Configurando o tsconfig

[Typescript] - Tipagem básica

Introdução
Tipos básicos do typescript (string, number, boolean e any)
Trabalhando com tipos de Objetos e Arrays
Trabalhando com tipos opcionais
Trabalhando com tipagem em funções
Trabalhando com funções de callback dentro de outra função

Montar projeto React

Criando projeto com Vite
Configurando Eslint e Prettier
Instalando styled-components e Antd

Informações básicas sobre o React

Como funciona o React
Utilizando Google Chrome para ajudar no desenvolvimento
O que são e como utilizar as Props de um componente
Como funciona o useState
Como funciona o useEffects
Como e quando utilizar o useCallback
Como e quando utilizar o useMemo
O que é e como criar um hook customizado

Montando os primeiros componentes globais

Criando um componente
Colocando responsividade na tela de login
Criando input reutilizável
Criando botão reutilizável
Mudança de estados dos componentes
Fazendo comunicação com o backend utilizando axios
Utilizando SVG no nosso projeto
Criação de rotas com o React-router
Criando React hook customizado
Utilizando context e criando um hook para usá-lo
Criando componente de notificação e utilizando useEffects
Criando função para padronizar requisições

Criar lógica de login

Salvando token no localStorage
Redirecionando usuário que já fez login
Inserindo token JWT em todas as requisições
Verificando se o usuário fez login utilizando o loader do React router
Criando tela 404 (Not found)

Criar tela de listagem de produtos

Criando um novo hook para requisições
Buscando lista de produtos no backend
Criando uma tabela com o Antd
Inserindo a coluna de categoria na tabela de produtos
Criando tooltip personalizado para imagem
Criando breadcrumb e tela de inserir produto
Ordenar e buscar dados na tabela de produtos
Criando o formulário de inserir produto
Criando select personalizado e requisição de inserir produto
Finalizando a tela de inserir produto
Criar um input monetário
Criando hook da tela de inserir produto

Criando layout principal após o login

Criação do menu lateral
Criação do header
Utilizar o redirect no loader do React router
Criar menu lateral com layout do Antd
Bloquear commits com warnings do Eslint

Criar seção de categorias

Criar tela de categorias
Criar tabela de categorias com AntD
Criar tela de inclusão de categorias
Finalizar lógicas de inserir categoria

Inserir Redux no projeto

Inserir React Redux no projeto
Removendo o useContext e substituindo pelo Redux

Testes unitários

Configurar Jest + React Testing Library no Vite Typescript
Teste unitário de um botão e um input
Teste unitário do header
Como gerar e utilizar mocks com jest.mock
Testar onChange no React Testing Library
Finalizar os testes unitários da tela de inserir produtos
Testar um hook com a biblioteca react-hooks-testing-library
Testar useEffect no nosso hook
Criar mock para o axios com a lib axios-mock-adapter
Testar funções com o jest
Testar a função auth
Testar a função ConnectionAPI
Continuação do teste unitário da função ConnectionAPI

Criando telas de pedidos e usuários

Criar tela de listagem de pedidos
Criar tabela dos pedidos utilizando AntD
Criar a tela de detalhes do pedido
Passando parametros utilizando o React-router
Inserir loading e tipagem para os detalhes do pedido
Inserir tabela com listagem de produtos do pedido
Inserir máscara para CPF, telefone e CEP
Criar tela de listar usuários
Criar tabela na tela de listar usuários
Converter informações do JWT de base64 para um objeto
Criar tela de inserir administrador
Inserir botão na tabela de produtos para deletar
Inserir novos campos no produto
Inserir botão de editar produto na listagem
Editar produto parte 2
Editar produto parte 3
Inserir modal de confirmar exclusão
Criar função de deletar categoria
Deletar e editar categoria
Criar função de editar categoria

Testes unitários da seção anterior

Teste unitário da função breadcrumb
Teste unitário do componente InputMoney
Teste unitário do componente Select
Teste unitário do loading
Teste unitário do Tooltip
Teste unitário das funções de endereço, telefone e CEP
Mudando configuração de cobertura dos testes unitários

Reviews

Cristiano
August 3, 2023
Quando entra em React o professor parece perdido, deixando o aluno mais perdido ainda. As vezes o code apresenta erro, o professor corrige mas não explica o que está fazendo. A exemplo, o final da aula 119. Confesso que não estou aprendendo. Apenas assistindo e tentando copiar.
Marcos
July 7, 2023
A partir da seção TypeScript e React é impossível acompanhar o professor. Poderia disponibilizar diversos links ao longo das aula para facilitar o acesso dos alunos. A exemplo do figma, não consegui encontrar a imagem no site e logo não conseguir prosseguir na criação de login. Para não me prolongar muito até HTML e CSS é iniciante/básico e quem nunca teve acesso consegue aprender. Depois disso fica muito difícil para iniciantes.
Joabe
June 23, 2023
Esatava precisando disso, melhor curso sobre Html, css, javascript e typescript. Podem confiar pessoal, o curso é exelente!
Rodrigo
June 23, 2023
comecei n tinha nem ideia de como começar a programar, agora já consigo entender como as pessoas fazem um site e me interessei mais pela área
Jhoni
June 10, 2023
Comprei um curso fora da Udemy com o valor 10x mais caro e não tem a metade da qualidade desse curso, não adianta inventar... Os melhores cursos estão aqui.
Juan
June 8, 2023
Algumas aulas do curso precisam de outras que acho que o criador esqueceu de colocar, como por exemplo a configuração do banco de dados
Caio
May 20, 2023
Gostei muito do jeito do professor a calma que ele transmite te faz acreditar que de fato você vai aprender o que precisa, vou dar nota máxima do mesmo nível das minhas expectativas, posteriormente volto aqui para reavaliar.
Ícaro
May 17, 2023
Curso muito bom para aprender o básico de programação, estou conseguindo aprender coisas que muitos outros cursos não ensinam.
Fabrício
May 16, 2023
Curso muito detalhado, aprendendo muito com ele! Sofri muito com os testes que o professor passou, e ele fez de forma tão simples. rsrsrsrs
Victor
May 15, 2023
Assim como os outros cursos do professor Júlio, este é mais uma obra-prima. Super didático e claro em explicações. Júlio é um engenheiro de software sênior, portanto ele tem um imenso conhecimento para oferecer, sendo nesse curso, ou em outros.
Breno
May 14, 2023
Estou gostando, tenho react completo, e comprei no intuito de reforçar a base no JS, aprender Typescript e seguir evoluindo!!! Está bem legal!!
Vitoria
May 13, 2023
Um dos melhores se não o melhor curso que já fiz aqui na Udemy, explicação passo a passo e testes para reforçar o conhecimento.
Ana
May 12, 2023
Estou entrando na área de desenvolvimento de software agora e estou amando o curso, professor é bem paciente para explicar as coisas além de passar alguns testes para fixação que está ajudando muito!
Rafael
May 11, 2023
Meu terceiro curso com esse instrutor, e estou cada vez mais impressionada com a clareza e calma que ele tem para transmitir o conhecimento. O que estava faltando nos outros cursos que era testes, foi inserido de uma forma muito criativa nesse curso. Amando!!!
Gabriel
May 10, 2023
Com pouco tempo de curso consegui criar um site bem simples, parece muito pouco, mas me deixou muito motivado para entrar no mundo de desenvolvimento web.

Charts

Price

Desvendando a web: HTML, CSS, Javascript e Typescript [2023] - Price chart

Rating

Desvendando a web: HTML, CSS, Javascript e Typescript [2023] - Ratings chart

Enrollment distribution

Desvendando a web: HTML, CSS, Javascript e Typescript [2023] - Distribution chart
5285696
udemy ID
4/22/2023
course created date
5/15/2023
course indexed date
Bot
course submited by