Curso pratico - HTML 5, CSS 3, JS + Bootstrap 3.3 e JQuery
4.6 (13 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
101 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Curso pratico - HTML 5, CSS 3, JS + Bootstrap 3.3 e JQuery to your Wishlist.

Add to Wishlist

Curso pratico - 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
4.6 (13 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
101 students enrolled
Last updated 7/2017
Portuguese
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 17.5 hours on-demand video
  • 1 Article
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar sites elegantes, bonitos e adotando os padrões W3C.
View Curriculum
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 construido 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 is the target audience?
  • Estudantes de informatica
  • Quem deseja se torna Web Designer
  • Desenvolvedores Frontend em aperfeiçoamento
Compare to Other Web Development Courses
Curriculum For This Course
94 Lectures
17:19:59
+
Introdução
6 Lectures 01:06:12

Neste vídeo apresento uma introdução ao curso e as linguagens e frameworks que estudaremos.

Preview 20:55

Neste vídeo apresento o conceito de linguagens de backend.

Preview 13:19

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 Google Chrome e Listando característica de um bom editor
08:54

Vamos neste vídeo instalar o editor Brackets.

Instalando o Editor HTML - Brackets
11:01

Neste vídeo apresento como funciona o recurso do Live Preview.

Brackets - Recurso Live Preview.
09:05

Neste vídeo apresento como trocar de tema no Brackets para personalizar o editor da forma que mais lhe agradar.

Brackets - Trocando de Tema.
02:58
+
Aprendendo HTML
6 Lectures 01:21:26

Neste vídeo apresento a estrutura de uma página HTML.

Estrutura do HTML
14:49

Neste vídeo ensino como trabalhar com texto e imagem em nossa página.

Construindo uma página - Parte 1 - Texto e Imagem
19:25

Neste vídeo apresento a estrutura do HTML 5 para a construção de páginas.

Construindo uma página - Parte 2 - Cabeçalho, Conteúdo e Rodapé
13:38

Neste vídeo vamos aprender a utilizar links.

Construindo uma página - Parte 3 - Link
12:15

Vamos adicionar as imagens das redes sociais para nossa página.

Construindo uma página - Parte 4 - Imagens Redes Sociais
14:32

Neste vídeo vamos adicionar as imagens de armação.

Construindo uma página - Parte 5 - Logo marcas
06:47
+
Criando outras páginas
4 Lectures 39:24

Neste vídeo apresento construir uma página de Fale Conosco - Formulário.

Fale Conosco - Parte 1
15:46

Neste vídeo apresento como continuar a construção da página Fale Conosco - Formulário.

Fale Conosco - Parte 2
10:21

Neste vídeo apresento a criação da nossa página de fale conosco - parte de endereço.

Fale Conosco - Parte 3
04:42

Neste vídeo apresento como criar a página Onde Estamos.

Onde Estamos
08:35
+
Aplicando estilo na nossa página CSS
17 Lectures 03:53:42

Neste vídeo apresento como usar CSS em nossas páginas HTML.

CSS - Usando CSS no HTML
11:06

Neste vídeo vamos fazer o CSS da barra superior.

Barra superior - Parte 01
12:39

Neste vídeo vamos continuar fazendo o CSS da barra superior.

Barra superior - Parte 2
15:49

Neste vídeo vamos aprender a adicionar estilo ao nosso cabeçalho.

CSS - Cabeçalho
12:52

Neste vídeo vamos adicionar estilo as Seção de destaque.

CSS - Seção - Foto - Armações e Lentes
16:10

Neste vídeo vamos adicionar estilo a logomarca.

CSS - Seção - Logomarcas Armações e Lentes
16:35

Neste vídeo vamos adicionar estilo a seção final antes do rodapé.

CSS - Seção - Grande variedade
22:01

Neste vídeo vamos adicionar estilo ao nosso rodapé.

CSS - Seção - Rodapé
18:24

Vamos adicionar mais links na nossa página.

CSS - Melhorando os Links da Página
10:39

Neste vídeo vamos fazer ajustes para que nossa página seja bem vista em celulares.

CSS - Responsivo - Trabalhando com Celular - Parte 1
12:03

Neste vídeo vamos fazer ajustes para que nossa página seja bem vista em celulares.

CSS - Responsivo - Trabalhando com Celular - Parte 2
19:31

Neste vídeo vamos adicionar estilo a página Fale Conosco.

CSS - Adicionando estilo a pagina Fale Conosco - Parte 1
16:24

Neste vídeo vamos continuar adicionando estilo a página Fale Conosco.

CSS - Adicionando estilo a pagina Fale Conosco - Parte 2
14:54

Neste vídeo vamos adicionar CSS a página "Onde Estamos".

CSS - Adicionando estilo a pagina Onde estamos
12:59

Neste vídeo apresento como funciona as resoluções x dispositivos.

CSS - Resolução para Tablets
05:31

Neste vídeo ensino como resolver problemas de codificação em nosso site.

HTML - Codificação do Arquivo
05:17

Neste vídeo ensino como colocar uma font "não instalado" no computador o usuário em seu site.

CSS - Adicionando fonte ao nosso site
10:48
+
JavaScript
12 Lectures 01:34:04

Neste vídeo ensino como utilizar o Javascript dentro do HTML.

JS - Usando Javascript pela primeira vez
10:14

Neste vídeo vamos aprender o conceito de Variável na linguagem JavaScript.

JS - Variáveis
10:30

Neste vídeo vamos aprender a fazer operações matemáticas com Javasscript.

JS - Operações Básicas - Matemática e Concatenar
08:45

Neste vídeo ensino a utilizar o comando IF, ELSE IF e ELSE para fazer decisões no JavaScript.

JS - Decisão no Javascript - IF
11:59

Neste vídeo ensino a utilizar o comando Switch para fazer decisões no JavaScript.

JS - Decisão no Javascript - Switch
04:18

Neste vídeo ensino a utilizar o comando While para fazer repetições de código no JavaScript.

JS - Repetição no JavaScript - While
03:43

Neste vídeo ensino a utilizar o comando For para fazer execuções repetidas.

JS - Repetição no JavaScript - For
05:08

Neste vídeo ensino como percorrer o array com o comando de repetição For do JavaScript.

JS - Usando For para acessar Arrays
04:51

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 - Trabalhando com Função
08:41

Neste vídeo ensino como criar funções com e sem dados para retorno.

JS - Função com retorno e sem retorno de dados
07:58

Neste vídeo ensino como usar o Javascript para manipular o CSS em uma página.

JS - Interação do JavaScript com o CSS
13:06

Neste vídeo ensino como usar o Javascript para manipular o conteúdo da página.

JS - Interação do JavaScript com o HTML
04:51
+
Javascript no nosso site
8 Lectures 01:45:41

Neste vídeo vamos utilizar HTML e CSS para criar um modal muito elegante.

CSS - Criando um Modal
17:05

Neste vídeo vamos usar o Javascript para fazer o comportamento de abrir e fechar o Modal.

JS - Abrir e Fechar Modal
09:08

Neste vídeo ensinarei a fazer a validação no formulário do Modal.

JS - Validação Modal - Parte 1
13:06

Neste vídeo ensinarei a fazer a validação no formulário do Modal.

JS - Validação Modal - Parte 2
16:20

Neste vídeo ensinarei a fazer a validação no formulário do Modal.

JS - Validação Modal - Parte 3
14:19

Neste vídeo ensinarei a fazer a validação no formulário da página Fale Conosco.

JS - Validação - Fale Conosco - Parte 1
10:17

Neste vídeo ensinarei a fazer a validação no formulário da página Fale Conosco.

JS - Validação - Fale Conosco - Parte 2
13:18

Neste vídeo vamos adicionar via Javascript um texto de validação.

JS - validação - Fale Conosco - Parte 3
12:08
+
jQuery - Escreva menos, faça mais
14 Lectures 02:30:08

Neste vídeo ensinarei a baixar e utilizar o melhor jQuery para o seu projeto.

JS - Baixando o jQuery
06:50

Neste vídeo ensino como é os primeiros passos do jQuery.

JS - Primeiros passos com jQuery
09:34

Neste vídeo irei explicar a sintaxe do jQuery.

JS - Sintaxe do jQuery
11:46

Neste vídeo vamos começar a utilizar o jQuery para fazermos o jogo da velha.

JS - Iniciando o Jogo da Velha
14:59

Neste vídeo criar o layout do jogo da velha.

CSS - Jogo da Velha - Layout
12:17

Neste vídeo vamos fazer a validação dos nomes para iniciar o jogo.

JS - Jogo da Velha - Validação Nome Jogador
08:46

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 - Preenchendo com X ou O
15:17

Neste vídeo vamos fazer o algoritmo que verificar quem é o vencedor.

JS - Jogo da Velha - Algoritmo do Vencedor - Parte 1
10:45

Neste vídeo vamos fazer o algoritmo que verificar quem é o vencedor.

JS - Jogo da Velha - Algoritmo do Vencedor - Parte 2
11:31

Neste vídeo vamos fazer o algoritmo que verificar quem é o vencedor.

JS - Jogo da Velha - Algoritmo do Vencedor - Parte 3
10:44

Neste vídeo vamos melhorar a leitura de nosso código.

JS - Jogo da Velha - Refatorar
05:08

Neste vídeo vamos melhorar a apresentação da mensagem.

JS - Jogo da Velha - Mensagens
09:32

Neste vídeo vamos adicionar o tempo de inicio e fim do jogo.

JS - Jogo da Velha - Tempo
16:03

Neste vídeo vamos adicionar o tempo de decorrido do jogo.

JS - Jogo da Velha - Tempo Decorrido
06:56
+
Bootstrap
26 Lectures 04:29:20

Neste vídeo vamos baixar o Framework mais popular de HTML, CSS e Javascript, o Bootstrap 3.3.

Baixando o Bootstrap 3.3
08:05

Neste vídeo irei ensinar como funciona o Templates disponíveis no site do Bootstrap para iniciarmos o nosso projeto.

Templates do Bootstrap
08:56

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.

Estudando o comportamento do site G1 da Globo
04:38

Neste vídeo ensino como funciona o sistema de Grid do Bootstrap.

Criando blocos - Sistema de Grid do Bootstrap
10:46

Neste vídeo ensino como funciona o sistema de Grid do Bootstrap.

Criando blocos - Grid no Smartphones, Tablet e Desktop
08:47

Neste vídeo vamos usar a linguagem HTML para construir o conteúdo do nosso site(Texto, Tags HTML e etc).

PROJETO - Construção de um site para arquiteto
08: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 1
16: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 2
04:40

Neste vídeo vamos usar a linguagem HTML para construir o conteúdo do nosso site(Texto, Imagens, Tags HTML e etc).

PROJETO - HTML - Adicionando Conteúdo - Parte 3 - Imagens
17:10

Neste vídeo vamos utilizar o CSS para personalizar o Menu já construído pelo Bootstrap.

PROJETO - CSS - Personalizando o topo - Parte 1
14:35

Neste vídeo vamos personalizar o CSS do topo, para ficar mais parecido possível com o projeto original.

PROJETO - CSS - Personalizando o topo - Parte 2
09:51

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 1
10: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 2
10: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 3
15:23

Neste vídeo vamos adicionar as personalizações do CSS na página inicial.

PROJETO - CSS - Personalizando o CSS página inicial
10:12

Neste vídeo vamos adicionar as personalizações do CSS na página inicial, imagem em destaque.

PROJETO - CSS - Imagem em Destaque - Parte 1
07:58

Neste vídeo vamos terminar de personalizar a imagem em destaque da página inicial.

PROJETO - CSS - Imagem em Destaque - Parte 2
06:24

Neste vídeo vamos fazer a página sobre nós.

PROJETO - HTML e CSS - Página Sobre nós
16:26

Neste vídeo vamos fazer a página contato.

PROJETO - HTML e CSS - Página Contato - Parte 1
06:48

Neste vídeo vamos continuar criando a página de contato.

PROJETO - HTML e CSS - Página Contato - Parte 2
14:43

Neste vídeo vamos continuar criando a página de contato.

PROJETO - HTML e CSS - Página Contato - Parte 3
13:00

Neste vídeo vamos fazer o HTML e CSS do formulário de contato.

PROJETO - HTML e CSS - Formulário de Contato - Parte 1
08:40

Neste vídeo vamos fazer o CSS do formulário de contato.

PROJETO - HTML e CSS - Formulário de Contato - Parte 2
09:24

Neste vídeo vamos fazer o CSS do formulário de contato.

PROJETO - HTML e CSS - Formulário de Contato - Parte 3
17:53

Neste vídeo vamos atualizar o nosso menu.

PROJETO - HTML - Atualizando os menus
03:35

Neste vídeo apresento o dever de vocês, completar o projeto.

PROJETO - Dever de casa - Termine o projeto
04:58
+
Código-fonte
1 Lecture 00:02

Acesse recursos e faça o download dos arquivos.

Arquivos
00:02
About the Instructor
Elias Ribeiro Da Silva Costa
4.3 Average rating
1,365 Reviews
7,047 Students
7 Courses
Analista de Sistemas

Profissional em Desenvolvedor de Softwares desde 2007. Já atuei na área de programador, analista de sistemas e analista de requisitos. Possuo um vasto conhecimento que abrange a área de programação, análise, levantamento de requisitos até administração de servidores web.

Trabalhei em grandes empresas no Brasil, nacionais e multinacionais. Tenho vasto conhecimento de desenvolvimento de softwares e programas de edição de imagem, texto e 3D. Minha intenção é passar o conhecimento e experiência adquira ao longo de minha carreira, que tenho certeza que será útil para potencializar o seu talento.

Atualmente sou proprietário da empresa Gigaworks - Desenvolvimento de sistemas, empresa focada no desenvolvimento de sites, aplicativos e sistemas customizados e co-fundador da Resistance, empresa que visa oferecer tecnologia para a execução de atividades esportivas.