Curso Completo do Desenvolvedor Web

Aprenda a criar um site do zero, do básico ao avançado, aprenda HTML5 e CSS3 a fundo com muito JavaScript.
4.4 (1,302 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.
3,912 students enrolled
$19
$90
79% off
Take This Course
  • Lectures 80
  • Exercises 1 coding exercises
  • Length 13 hours
  • Skill Level All Levels
  • Languages Portuguese
  • Includes Coding Exercises New!
    Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 Portuguese

Course Description

Procurando melhorar sua renda como Programador WEB? Ou talvez buscando uma carreira que ofereça mais tempo livre e flexibilidade? Sempre teve curiosidade em aprender de uma forma simples e eficaz a desenvolver do zero seu Website?

Qualquer que seja sua motivação você veio ao lugar certo.

Este Curso Completo do Desenvolvedor Web vai proporcionar em um só lugar tudo o que precisa saber para criar seu próprio website. A equipe de instrutores da Hcode estará disponível para responder suas dúvida em até 24 horas

Neste curso cobriremos em mais de 12 horas de conteúdo os seguintes tópicos:

1) Aprenda em um curso completo HTML5, CSS3 e JavaScript com os comandos mais importantes.
2) Crie um site completo e responsivo que se adapta no Tablet e Smartphone e em telas maiores.
3) Trabalhe com imagens, áudio, vídeo e descubra boas práticas.
4) Aprenda a criar um carrinho de compras completo com cálculo de frete para uma loja virtual, utilizando PHP e MySQL.

Ao final deste curso você estará apto a criar sites modernos e responsivos, poderá se diferenciar no mercado de trabalho e até mesmo começar uma nova carreira de desenvolvedor web.

Acesso vitalício! Te aguardo no curso!

What are the requirements?

  • Você já deve estar familiarizado com a Internet.

What am I going to get from this course?

  • Crie sites incríveis com HTML5 e CSS3 em um curso completo com dois especialistas no assunto. Em mais de 75 aulas você aprenderá do básico ao avançado como criar um site que funcione bem nos smartphone, tablet e em Desktop.
  • São mais de 15 horas de gravação em um Estúdio profissional, com qualidade de áudio perfeita, didática impressionante com ilustrações, animações e vídeos de apoio.
  • Aprenda a criar um site responsivo temático, e um carrinho de compras completo de uma loja virtual com cálculo de frete utilizando web services, Angular.js e um pouco de PHP com Slim Framework, MySQL com Stored Procedures. Vamos do básico ao avançado em um projeto real passo a passo.

What is the target audience?

  • Este curso de HTML5 e CSS3 destina-se a iniciantes no desenvolvimento web, que talvez nunca tenham desenvolvido um site, mas querem se tornar um profissional da área de Desenvolvimento Web.
  • Recomendado também para estudantes de Tecnologia da Informação, ou que desejam tornar-se programadores para Web.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Estruturando o Ambiente
04:10
  • Aula de boas vindas, explicando o quão completo é o curso. E porque você deve fazê-lo até o final.
09:20
  • Um pouco da história de como era fazer sites
  • Web Designer e Web Master
  • Dicas para memorização


10:01
  • Ferramentas necessárias para um Front-End Developer
  • Navegadores
  • O que são editores de código
Section 2: Aprendendo o Core do HTML5, CSS3, Javascript e Bootstrap
07:09

Baixe o arquivo modelo.html para conhecer a estrutura de um arquivo HTML5.

  • <!doctype>
  • Elemento HTML
  • Head
  • Body
  • Elemento ancestral
  • Codificação UTF-8 para correção de acentuação
  • Atributos
  • Carregando um arquivo CSS
  • Carregando um arquivo JavaScript
4 pages
  • Com uma apresentação de slides, aprenda de uma vez por todas quais são os dois elementos filhos do elemento HTML, e qual a tarefa de cada um.
06:58
  • Dicas das linhas verticais do Sublime Text
  • Hierarquia das Tags (Pai, Irmão, Filho) - DOM Tree
  • Tags, Atributos e Valores - Usando as cores do Sublime Text
06:55
  • Dicas de teclas de atalho
  • Criando um arquivo CSS
  • Criando um arquivo JavaScript
  • Semântica do HTML5
15:46
  • Seletores CSS
  • Cores em Hexadecimal
  • DICA DA SEÇÃO: ChromeDev Tools Styles
1 question
Neste exercício vamos praticar os comandos de estrutura do HTML5.
12:13
  • Chrome Developer Tools: Console
  • Palavras reservadas do JavaScript
10:17
  • Tag Button
  • Eventos em JavaScript
  • Tipo de dados das variáveis JavaScript
10:32
  • Download do Bottstrap
  • Visão geral dos arquivos do Bootstrap
  • Arquivos com ".min"
14:46
  • Usando a documentação do Bootstrap como catálogo de opções.
  • Classes usadas em formulários
12:36
  • Métodos GET e POST
  • Novos campos de formulário do HTML5 (inout date, week, time)
  • Atributos MIN e MAX
15:40
  • Mais tipos de formulários HTML5
  • Input radio e Checkbox
  • Atributo checked
  • Input range
  • Progress e Meter
  • Input search
15:30
  • Tag select com option e optgroup
  • LandHover
  • Input month
  • Atributo autofocus
  • Atributo Tabindex
07:18
  • Organização do ambiente de trabalho
Section 3: Criando um site real completo
09:53
  • Visão geral do template do projeto real que será criado
  • Necessidade de ter um layout feita por um designer
  • Dica de sites que vendem templates prontos
08:43
  • Criando um projeto do zero e estruturando as pastas
  • Adicionando o Bootstrap e jQuery
14:49
  • Estrutura da página usando container do Bootstrap
  • Chrome DevTools Inspetor de Elementos
  • CSS position relative e position absolute
14:18
  • Conceito de sprite
  • Criando lista com a tag UL e LI
12:00
  • Fonte OpenSans
  • Usando o @fonte-face no CSS3
09:35
  • Usando input group do Bootstrap
  • Dica de usar comentários para localizar tags que fecham
10:30
  • O Projeto FontAwesome permite utilizar ícones em formato de fontes.
  • Nesta aula veremos como implementar o FontAwesome em um projeto
12:13
  • Toda Loja virtual possui um banner principal, veremos como criar o HTML e o CSS do nosso banner principal.
  • Veremos o position absolute do CSS e o uso de efeitos nas fontes com text-shadow
12:12
  • Nesta aula aprenderemos a criar uma seção de Notícias, o mesmo princípio servirá quando precisar criar blocos de códigos HTML e CSS que possuem um padrão.
06:44
  • Como colocar itens em destaque como o bloco de estatísticas? Nessa parte do projeto vamos criar uma seção onde as estatísticas do site aparecem para o usuário.
11:12
  • Todo projeto web moderno precisa levar o usuário a realizar alguma ação, como se cadastrar ou assinar uma lista de e-mail, veja como criar um Call to Action nesta seção.
04:01
  • Atualmente o sistema de GRIDS do Bootstrap é um padrão que é adotado para criar praticamente qualquer Layout Fluído, isso ajuda no design responsivo.
  • Aprenda o conceito de GRIDS e veja como utilizamos colunas como referência para o Layout.
07:27
  • Aprenda mais sobre a tag FOOTER do HTML5 nesta seção, e veja como começamos o nosso Rodapé.
  • Criamos um Rodapé completo e dividimos em alguns vídeos.
04:42
  • Uma vez explicado o conceito de GRIDS vamos colocar a mão na massa
  • Nesta aula você verá como utilizamos a classe col-md-3 e 4 para alinhar o Grid System do Bootstrap com nosso código.
19:15
  • Encerramos o primeiro projeto real, que foi transformar um layout que veio em imagem, em um site navegável com inúmeros recursos.
Section 4: jQuery e Plugins - Carousel Touch e Slider em jQuery, Vídeos com Plyr.io
05:41
  • jQuery é a biblioteca JavaScript mais poderosa que existe
  • Permite escrever menos código com uma simplicidade invejável.
17:23
  • Aprenda a utilizar os seletores do CSS3 no jQuery
  • Podemos selecionar qualquer parte do código com o famoso $().
  • Veja seletores por classe e id.
12:40
  • Criar um carousel Slider em jQuery é uma tarefa simples com esse plugin poderoso
  • Nesta aula você vai aprender tudo sobre esse plugin, e como implantar em seu projeto
05:24
  • Vídeos são atualmente o ponto principal de consumo dos usuários na Web, YouTube, Facebook e outros grandes portais de conteúdo social, exploram esse recurso ao máximo.
  • Como utilizar vídeos no HTML5? Nas próximas três aulas aprenda como, e boas práticas para explorar todos os recursos de vídeos em seus projetos e sites.
02:48
  • Você aprenderá como utilizar a Tag vídeo do HTML5, um recurso simples e muito interessante.
03:16
  • Um dos melhores recursos do HTML5 na parte de vídeos é a possibilidade de criar uma imagem como pôster para o seu vídeo.
  • Isso ajuda a criar um conteúdo interativo e dinâmico, veja como numa aula curta e muito divertida.
12:12
  • A API de Vídeos do HTML5 nos dá muitas possibilidades, nesta aula veremos como interagir com o vídeo usando jQuery.
08:44

Na parte dois dessa aula veremos mais sobre o jQuery e iremos preparar o ambiente para utilizar um player poderoso para vídeos utilizando um plugin do jQuery chamado Plyr.

07:25
  • Instalar o PHP, Apache e MySQL pode parecer uma tarefa assustadora, isso fica melhor quando usamos o XAMPP que facilita e instala corretamente o PHP, MYSQL e o APACHE em nossa máquina.
  • Nesta aula veremos como instalar o PHP 5.6
06:31
  • Agora que já temos um servidor web instalado, veremos como utilizar o Plugin Plyr do jQuery que exige que seja rodado num ambiente cliente/servidor.
  • Veremos como enriquecer nosso player já nativo com esta poderosa ferramenta.
03:09
  • Na Parte dois do vídeo vamos ver mais recursos do Player e como manipular elementos do vídeo.
07:23
  • Com o novo elemento Track do HTML5 veremos como adicionar legendas.
  • Aprenda também como evitar alguns erros comuns nesse processo.
Section 5: Criando um Site Responsivo Completo
05:01
  • Um dos pontos altos desse curso o Design Responsivo permite criar sites que se adaptam perfeitamente em diversos dispositivos, nessa primeira aula, você verá o conceito de como funciona o design responsivo.
06:00
  • A List Apart é um conceituado site onde profissionais experientes postam estudos, artigos e referências para a Web.
  • Foi neste site que Ethan Marcotte cunhou o termo Responsive Web Design.
  • Veja mais detalhes na parte dois desse assunto.
06:44
  • Sem dúvida uma das melhores ferramentas para o desenvolvedor web, o Chrome Developer Tools permite simular qualquer um dos principais dispositivos móveis do mercado.
  • Veja como nesta aula.


05:20
  • Desde que a Apple criou o primeiro navegador que interpreta corretamente o HTML num celular, viewport nunca mais foi o mesmo.
  • Veja detalhes dessa Meta Tag nesta aula.
08:49
  • A parte mais importante do Design Responsivo em termos técnicos é a variável interna @media, aprenda como utilizá-la e as medidas para Smartphone, Tablets e telas maiores.
  • Aprenda o que é Mobile First, e Non Mobile First.
Section 6: Responsivo - Projeto Real
07:11
  • Chegou a hora de iniciarmos o nosso segundo projeto real, ainda no mesmo tema, vamos criar a versão mobile do nosso site.
  • Começaremos com o Topo do nosso site.
04:34
  • Na versão Mobile do site vamos criar a parte do Banner principal.
  • Veja em primeira mão como um layout irá se ajustar dependendo do dispositivo utilizado.
10:50
  • Chegou a hora de aprendermos a fazer a parte de notícias no layout responsivo.
  • Nesta aula aprenderemos a mostrar as informações ajustadas no smartphone.
05:49
  • Assim como o projeto anterior, veremos a seção Estatísticas sendo implementada na versão mobile
  • Veja que muitas vezes ir para o design responsivo, não significa literalmente esconder elementos, antes tem haver com uma boa disposição dos mesmos, fluidez e organização.
08:39
  • Na versão Mobile o rodapé do site pode possuir informações numa disposição bem diferente da versão desktop.
  • Poucas mudanças podem ser necessárias para conseguir esse resultado.
  • Ainda continuamos trabalhando com o elemento footer do HTML5.
16:07
  • Depois de ajustada a estrutura vamos alinhar o conteúdo do Rodapé.
06:04
  • As redes sociais no Rodapé são um diferencial.
  • Veja como utilizá-las da maneira correta.
12:04
  • Depois de criado o Layout principal, vamos criar a versão Mobile do Menu.
09:04
  • Você verá nessa aula que a disposição de um menu mobile é diferente de um menu tradicional, além de ocultarmos o mesmo quando não estiver em uso.
13:39
  • Vamos ver o jQuery em ação para controlar nosso menu e encerrar o Layout responsivo.
  • Até aqui já construímos dois projetos reais no mesmo tema.
06:02
  • Vender pela internet é um sonho de muita gente.
  • Ter o seu próprio negócio on-line e quebrar a barreira da distância.
  • Começaremos a criar uma loja virtual.
  • Criaremos a página de produtos.
  • Carrinho de compras
  • Cálculo de frete.
Section 7: Loja Virtual com Angular.Js 2 - PHP, MySQL e Slim Framework 2
06:22
  • O Banco de Dados é o bem mais precioso de uma empresa.
  • Na internet o banco de dados mais usado que existe é o MySQL. Veremos como instalar o MySQL 5.7
05:04
  • Atualmente na recém lançada versão. O PHP 7 ainda não está sendo utilizado em produção.
  • Nesta aula veremos a instalação do PHP 5.6 que nos ajudará a criar o ambiente para desenvolver a nossa loja virtual
18:40
  • Assim como dois estrangeiros não conseguem se comunicar sem um interprete veja como a conexão do PHP 5.7 com o MySQL acontece, e aprenda a criar a sua própria conexão com o Banco de Dados.
05:49
  • Programação no Servidor com PHP evoluiu muito nos últimos anos.
  • Orientação a Objetos já é realidade há muito tempo.
  • Veremos nessa aula como utilizar o Slim Framework para o PHP 5.7 que nos ajudará a trabalhar com as Rotas.
  • O Slim Framework trabalha em cima da RestFul API e da Arquitetura REST.
  • É um microframework que facilita o nosso trabalho e muda o jeito de escrever PHP na Web.
14:11
  • Na aula anterior aprendemos o que é o Slim Framework, mas como iremos criar uma loja virtual, nessa aula aprenderemos a implantar o Slim Framework em nosso projeto.
19:57
  • Vamos aprender a listar os produtos principais.
  • Vamos ver Query SQL para listar os produtos em destaque.
18:17
  • Você deseja aprender como criar aquelas famosas estrelinhas que avaliam um produto.
  • Veja nesta aula como aplicar o plugin de review de produtos.
  • Vamos utilizar o plugin OWL carousel para fazer o Slider carousel com os principais produtos.
16:55
  • Finalizando a página inicial da loja com a listagem dos outros produtos na parte inferior.
  • Veremos consultas SQL no Banco MySQL e como tratar isso no PHP.
04:26

Angular.JS é um poderoso Framework para HTML, CSS3 e JavaScript. Criado e mantido pelo Google, facilita o desenvolvimento de Web Apps, além de facilitar a comunicação do Front-End com o Back-End

12:47
  • Aprendemos sobre a estrutura do Angular.js vamos ver como implementar em nosso projeto esse Framework Poderoso.
  • Veremos como criar um ng-app do angular e manipular seu conteúdo.
25:21
  • A nova forma de programar PHP utilizando a REST API como referências.
  • Utilize um mesmo arquivo para fazer várias operações tais como consulta, inserção e alteração.
  • Veja a praticidade da arquitetura REST com o RestFul API.
06:26
  • Após concluírem esta lição você poderá consultar produtos mais buscados em um banco de dados e manipular o resultado no PHP.
10:30
  • A página detalhes do produto da loja virtual permite exibir preço informações adicionais.
  • Nesta aula você aprenderá como fazer isso com Angular.js e extrair a informação usando PHP de dentro de um banco de dados.
09:04
  • A parte mais importante de uma loja virtual é o carrinho de compras, nesta aula você aprenderá a criar o layout do HTML e CSS do carrinho de compras.
16:42
  • Agora que já temos o layout do Carrinho de compras vamos ver como implementar o PHP.
  • Utilizando as ROTAS, GET, DELETE da arquitetura REST vamos manipular nosso carrinho.
11:10

Utilizando a API REST vamos adicionar e remover itens no carrinho de compras.

05:27
  • Aprenderemos nesta aula como atualizar a quantidade dos itens do carrinho de compras.
  • Veremos como chamar as Stored Procedures do MySQL para realizar essa operação no Banco de Dados MySQL
  • Veremos também um pouco mais sobre rotas no PHP com o Slim Framework
19:56
  • Aprenda a consumir um web service com PHP
  • Veja como calcular o frete com base no peso, cep de origem e destino e retornar para o carrinho de compras!
06:00
  • Como implementar Cartões de crédito e boletos bancários na nossa loja virtual?
  • O que são Gateways de pagamento?
  • Quais as melhores intermediários para esse processo?
  • A Importância do HTTPS://
  • Isso e muito mais nesta aula empolgante.
Section 8: Hospedagem e Registro de Sites
10:10
  • Como registrar um site?
  • Como hospedar um site na internet?
  • Quais são os melhores servidores de hospedagem?
  • Qual a diferença entre hospedagem e cloud host?
  • A resposta a essas perguntas será ministrada nesta aula.
01:08
  • Conclusão do curso e agradecimentos finais

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Glaucio Daniel atua como Instrutor de TI, Administrador de Banco de Dados SQL Server e MySQL, Web Develope focado em HTML5, JavaScript(ES6), PHP, e bibliotecas como JQuery e ExtJs. Durante 11 anos foi instrutor e coordenador de treinamentos web no Grupo Impacta o maior centro de treinamento em TI da América Latina. Já treinou mais de 6000 alunos das maiores empresas do País entre elas: Vale, Petrobras, Itau, Ministério Público, Bradesco, Sabesp, Telefônica, Prefeitura de São Paulo, Jornal Folha de São Paulo, Rádio CBN, Tribunal Regional Eleitoral, Polícia Militar SP, Corpo de Bombeiros SP.

Instructor Biography

Certificado MCP no exame 70-480 - Programming in HTML5 with JavaScript and CSS3, desenvolvedor web desde 2005 com ênfase em JavaScript e PHP. Tem vasta experiência em bibliotecas javascript como jQuery, Bootstrap, jQuery UI, jQuery Mobile, ExtJS, Backbone.

Instructor Biography

Djalma Sindeaux, Sr. Director at Hcode

Especialista em 3D, edição de vídeo e animação, projetista de Stands e cenografia. Atua a mais 15 anos em construção e projetos de eventos, atuando nas diversas nuances do projeto, construção civil, elétrica, hidráulica, projetista na CM Stands.

Instructor Biography

Hcode é uma empresa de cursos de alto nível online e presencial sobre as principais tecnologias para web e mobile usando HTML5, CSS3, Javascript e Banco de Dados.

Nossos instrutores atuam no mercado com mais de 10 anos de experiência e didática aprovada por mais de 92% dos alunos.

Nos últimos anos a Hcode tem se dedicado a criar cursos utilizando inovação, interação e recursos de cinema com o único objetivo de criar a melhor experiência possível para os alunos.

Pesquisando assuntos que normalmente são tratados superficialmente pelas empresas, conseguimos alcançar o âmago das questões e trazer informações completas e precisas aos nossos alunos, que aprovam este método de ensino.

Ready to start learning?
Take This Course