Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreCurso prático - HTML 5, CSS 3, JS + Bootstrap 3.3 e JQuery
Rating: 4.6 out of 54.6(1,019 ratings)
2,770 students
Curso prático - HTML 5, CSS 3, JS + Bootstrap 3.3 e JQuery
Aprenda a fazer sites bonitos e interativo com as melhores linguagens e frameworks: HTML5, CSS3, JS+Bootstrap 3 e JQuery
Created byElias Ribeiro Da Silva Costa, Spacedu School
Last updated 5/2020
Portuguese
Portuguese [Auto],
What you'll learn
- Criar sites elegantes, bonitos e adotando os padrões W3C.
Explore related topics
Course content
9 sections • 96 lectures • 17h 19m total length
- Introdução20:55
Neste vídeo apresento uma introdução ao curso e as linguagens e frameworks que estudaremos.
- O que é Backend?13:19
Neste vídeo apresento o conceito de linguagens de backend.
- Instalando o Google Chrome e Listando característica de um bom editor8:54
Neste vídeo apresento como instalar o Google Chrome e também vamos listar algumas características de um bom programa de edição.
- Instalando o Editor HTML - Brackets11:01
Vamos neste vídeo instalar o editor Brackets.
- Brackets - Recurso Live Preview.9:05
Neste vídeo apresento como funciona o recurso do Live Preview.
- Brackets - Trocando de Tema.2:58
Neste vídeo apresento como trocar de tema no Brackets para personalizar o editor da forma que mais lhe agradar.
- Estrutura do HTML14:49
Neste vídeo apresento a estrutura de uma página HTML.
- Construindo uma página - Parte 1 - Texto e Imagem19:25
Neste vídeo ensino como trabalhar com texto e imagem em nossa página.
- Construindo uma página - Parte 2 - Cabeçalho, Conteúdo e Rodapé13:38
Neste vídeo apresento a estrutura do HTML 5 para a construção de páginas.
- Construindo uma página - Parte 3 - Link12:15
Neste vídeo vamos aprender a utilizar links.
- Construindo uma página - Parte 4 - Imagens Redes Sociais14:32
Vamos adicionar as imagens das redes sociais para nossa página.
- Construindo uma página - Parte 5 - Logo marcas6:47
Neste vídeo vamos adicionar as imagens de armação.
- Fale Conosco - Parte 115:46
Neste vídeo apresento construir uma página de Fale Conosco - Formulário.
- Fale Conosco - Parte 210:21
Neste vídeo apresento como continuar a construção da página Fale Conosco - Formulário.
- Fale Conosco - Parte 34:42
Neste vídeo apresento a criação da nossa página de fale conosco - parte de endereço.
- Onde Estamos8:35
Neste vídeo apresento como criar a página Onde Estamos.
- CSS - Usando CSS no HTML11:06
Neste vídeo apresento como usar CSS em nossas páginas HTML.
- Barra superior - Parte 0112:39
Neste vídeo vamos fazer o CSS da barra superior.
- Barra superior - Parte 215:49
Neste vídeo vamos continuar fazendo o CSS da barra superior.
- CSS - Cabeçalho12:52
Neste vídeo vamos aprender a adicionar estilo ao nosso cabeçalho.
- CSS - Seção - Foto - Armações e Lentes16:10
Neste vídeo vamos adicionar estilo as Seção de destaque.
- CSS - Seção - Logomarcas Armações e Lentes16:35
Neste vídeo vamos adicionar estilo a logomarca.
- CSS - Seção - Grande variedade22:01
Neste vídeo vamos adicionar estilo a seção final antes do rodapé.
- CSS - Seção - Rodapé18:24
Neste vídeo vamos adicionar estilo ao nosso rodapé.
- CSS - Melhorando os Links da Página10:39
Vamos adicionar mais links na nossa página.
- CSS - Responsivo - Trabalhando com Celular - Parte 112:03
Neste vídeo vamos fazer ajustes para que nossa página seja bem vista em celulares.
- CSS - Responsivo - Trabalhando com Celular - Parte 219:31
Neste vídeo vamos fazer ajustes para que nossa página seja bem vista em celulares.
- CSS - Adicionando estilo a pagina Fale Conosco - Parte 116:24
Neste vídeo vamos adicionar estilo a página Fale Conosco.
- CSS - Adicionando estilo a pagina Fale Conosco - Parte 214:54
Neste vídeo vamos continuar adicionando estilo a página Fale Conosco.
- CSS - Adicionando estilo a pagina Onde estamos12:59
Neste vídeo vamos adicionar CSS a página "Onde Estamos".
- CSS - Resolução para Tablets5:31
Neste vídeo apresento como funciona as resoluções x dispositivos.
- HTML - Codificação do Arquivo5:17
Neste vídeo ensino como resolver problemas de codificação em nosso site.
- CSS - Adicionando fonte ao nosso site10:48
Neste vídeo ensino como colocar uma font "não instalado" no computador o usuário em seu site.
- JS - Usando Javascript pela primeira vez10:14
Neste vídeo ensino como utilizar o Javascript dentro do HTML.
- JS - Variáveis10:30
Neste vídeo vamos aprender o conceito de Variável na linguagem JavaScript.
- JS - Operações Básicas - Matemática e Concatenar8:45
Neste vídeo vamos aprender a fazer operações matemáticas com Javasscript.
- JS - Decisão no Javascript - IF11:59
Neste vídeo ensino a utilizar o comando IF, ELSE IF e ELSE para fazer decisões no JavaScript.
- JS - Decisão no Javascript - Switch4:18
Neste vídeo ensino a utilizar o comando Switch para fazer decisões no JavaScript.
- JS - Repetição no JavaScript - While3:43
Neste vídeo ensino a utilizar o comando While para fazer repetições de código no JavaScript.
- JS - Repetição no JavaScript - For5:08
Neste vídeo ensino a utilizar o comando For para fazer execuções repetidas.
- JS - Usando For para acessar Arrays4:51
Neste vídeo ensino como percorrer o array com o comando de repetição For do JavaScript.
- JS - Trabalhando com Função8:41
Neste vídeo ensino como usar funções dentro do JavaScript para organizar o código e a execução de trechos de código.
- JS - Função com retorno e sem retorno de dados7:58
Neste vídeo ensino como criar funções com e sem dados para retorno.
- JS - Interação do JavaScript com o CSS13:06
Neste vídeo ensino como usar o Javascript para manipular o CSS em uma página.
- JS - Interação do JavaScript com o HTML4:51
Neste vídeo ensino como usar o Javascript para manipular o conteúdo da página.
- CSS - Criando um Modal17:05
Neste vídeo vamos utilizar HTML e CSS para criar um modal muito elegante.
- JS - Abrir e Fechar Modal9:08
Neste vídeo vamos usar o Javascript para fazer o comportamento de abrir e fechar o Modal.
- JS - Validação Modal - Parte 113:06
Neste vídeo ensinarei a fazer a validação no formulário do Modal.
- JS - Validação Modal - Parte 216:20
Neste vídeo ensinarei a fazer a validação no formulário do Modal.
- JS - Validação Modal - Parte 314:19
Neste vídeo ensinarei a fazer a validação no formulário do Modal.
- JS - Validação - Fale Conosco - Parte 110:17
Neste vídeo ensinarei a fazer a validação no formulário da página Fale Conosco.
- JS - Validação - Fale Conosco - Parte 213:18
Neste vídeo ensinarei a fazer a validação no formulário da página Fale Conosco.
- JS - validação - Fale Conosco - Parte 312:08
Neste vídeo vamos adicionar via Javascript um texto de validação.
- JS - Baixando o jQuery6:50
Neste vídeo ensinarei a baixar e utilizar o melhor jQuery para o seu projeto.
- JS - Primeiros passos com jQuery9:34
Neste vídeo ensino como é os primeiros passos do jQuery.
- JS - Sintaxe do jQuery11:46
Neste vídeo irei explicar a sintaxe do jQuery.
- JS - Iniciando o Jogo da Velha14:59
Neste vídeo vamos começar a utilizar o jQuery para fazermos o jogo da velha.
- CSS - Jogo da Velha - Layout12:17
Neste vídeo criar o layout do jogo da velha.
- JS - Jogo da Velha - Validação Nome Jogador8:46
Neste vídeo vamos fazer a validação dos nomes para iniciar o jogo.
- JS - Jogo da Velha - Preenchendo com X ou O15:17
Neste vídeo vamos usar o jQuery para preencher com "X" ou "O" as posições disponíveis no Jogo da velha.
- JS - Jogo da Velha - Algoritmo do Vencedor - Parte 110:45
Neste vídeo vamos fazer o algoritmo que verificar quem é o vencedor.
- JS - Jogo da Velha - Algoritmo do Vencedor - Parte 211:31
Neste vídeo vamos fazer o algoritmo que verificar quem é o vencedor.
- JS - Jogo da Velha - Algoritmo do Vencedor - Parte 310:44
Neste vídeo vamos fazer o algoritmo que verificar quem é o vencedor.
- JS - Jogo da Velha - Refatorar5:08
Neste vídeo vamos melhorar a leitura de nosso código.
- JS - Jogo da Velha - Mensagens9:32
Neste vídeo vamos melhorar a apresentação da mensagem.
- JS - Jogo da Velha - Tempo16:03
Neste vídeo vamos adicionar o tempo de inicio e fim do jogo.
- JS - Jogo da Velha - Tempo Decorrido6:56
Neste vídeo vamos adicionar o tempo de decorrido do jogo.
- Baixando o Bootstrap 3.38:05
Neste vídeo vamos baixar o Framework mais popular de HTML, CSS e Javascript, o Bootstrap 3.3.
- Templates do Bootstrap8:56
Neste vídeo irei ensinar como funciona o Templates disponíveis no site do Bootstrap para iniciarmos o nosso projeto.
- Estudando o comportamento do site G1 da Globo4:38
Neste vídeo exploraremos o comportamento do site G1, de notícias da Globo, para aprendermos os comportamentos de sites modernos em dispositivos diferentes com telas de dimensões diferentes.
- Criando blocos - Sistema de Grid do Bootstrap10:46
Neste vídeo ensino como funciona o sistema de Grid do Bootstrap.
- Criando blocos - Grid no Smartphones, Tablet e Desktop8:47
Neste vídeo ensino como funciona o sistema de Grid do Bootstrap.
- PROJETO - Construção de um site para arquiteto8:38
Neste vídeo vamos usar a linguagem HTML para construir o conteúdo do nosso site(Texto, Tags HTML e etc).
- PROJETO - HTML - Adicionando Conteúdo - Parte 116:05
Neste vídeo vamos usar a linguagem HTML para construir o conteúdo do nosso site(Texto, Tags HTML e etc).
- PROJETO - HTML - Adicionando Conteúdo - Parte 24:40
Neste vídeo vamos usar a linguagem HTML para construir o conteúdo do nosso site(Texto, Tags HTML e etc).
- PROJETO - HTML - Adicionando Conteúdo - Parte 3 - Imagens17:10
Neste vídeo vamos usar a linguagem HTML para construir o conteúdo do nosso site(Texto, Imagens, Tags HTML e etc).
- PROJETO - CSS - Personalizando o topo - Parte 114:35
Neste vídeo vamos utilizar o CSS para personalizar o Menu já construído pelo Bootstrap.
- PROJETO - CSS - Personalizando o topo - Parte 29:51
Neste vídeo vamos personalizar o CSS do topo, para ficar mais parecido possível com o projeto original.
- PROJETO - CSS - Personalizando o rodapé - Parte 110:59
Neste vídeo vamos personalizar o CSS do rodapé, para ficar mais parecido possível com o projeto original.
- PROJETO - CSS - Personalizando o rodapé - Parte 210:46
Neste vídeo vamos personalizar o CSS do rodapé, para ficar mais parecido possível com o projeto original.
- PROJETO - CSS - Personalizando o rodapé - Parte 315:23
Neste vídeo vamos personalizar o CSS do rodapé, para ficar mais parecido possível com o projeto original.
- PROJETO - CSS - Personalizando o CSS página inicial10:12
Neste vídeo vamos adicionar as personalizações do CSS na página inicial.
- PROJETO - CSS - Imagem em Destaque - Parte 17:58
Neste vídeo vamos adicionar as personalizações do CSS na página inicial, imagem em destaque.
- PROJETO - CSS - Imagem em Destaque - Parte 26:24
Neste vídeo vamos terminar de personalizar a imagem em destaque da página inicial.
- PROJETO - HTML e CSS - Página Sobre nós16:26
Neste vídeo vamos fazer a página sobre nós.
- PROJETO - HTML e CSS - Página Contato - Parte 16:48
Neste vídeo vamos fazer a página contato.
- PROJETO - HTML e CSS - Página Contato - Parte 214:43
Neste vídeo vamos continuar criando a página de contato.
- PROJETO - HTML e CSS - Página Contato - Parte 313:00
Neste vídeo vamos continuar criando a página de contato.
- PROJETO - HTML e CSS - Formulário de Contato - Parte 18:40
Neste vídeo vamos fazer o HTML e CSS do formulário de contato.
- PROJETO - HTML e CSS - Formulário de Contato - Parte 29:24
Neste vídeo vamos fazer o CSS do formulário de contato.
- PROJETO - HTML e CSS - Formulário de Contato - Parte 317:53
Neste vídeo vamos fazer o CSS do formulário de contato.
- PROJETO - HTML - Atualizando os menus3:35
Neste vídeo vamos atualizar o nosso menu.
- PROJETO - Dever de casa - Termine o projeto4:58
Neste vídeo apresento o dever de vocês, completar o projeto.
- Arquivos0:02
Acesse recursos e faça o download dos arquivos.
- Layout - Fireworks
- Telas do dever de casa
Requirements
- Informática básica
- Conhecimentos em Internet - Navegação
Description
Neste curso estarei ensinando a desenvolver sites do zero, com as principais tecnologias de mercado, o HTML 5, CSS 3 e Javascript. Estas 3 linguagens trabalham em conjunto para a construção de uma página com conteúdo, estilo e interação. Neste curso, além de aprender as linguagens também ensinarei como utilizar dois frameworks, um framework é recurso construído com base em uma linguagem para facilitar o desenvolvimento, neste caso o desenvolvimento de sites. Aprender os frameworks Bootstrap versão 3.3, que utiliza a linguagem CSS para adicionar lindos estilos a sua página. Também aprenderemos a usar o framework jQuery, famoso por facilitar o desenvolvimento com Javascript.
Who this course is for:
- Estudantes de informatica
- Quem deseja se torna Web Designer
- Desenvolvedores Frontend em aperfeiçoamento