Curso Completo do Desenvolvedor Web

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

• 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.

• 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

• Dicas de teclas de atalho
• Criando um arquivo CSS
• Criando um arquivo JavaScript
• Semântica do HTML5

• Seletores CSS
• Cores em Hexadecimal
• DICA DA SEÇÃO: ChromeDev Tools Styles

• Chrome Developer Tools: Console
• Palavras reservadas do JavaScript

• Tag Button
• Eventos em JavaScript
• Tipo de dados das variáveis JavaScript

• Download do Bottstrap
• Visão geral dos arquivos do Bootstrap
• Arquivos com ".min"

• Usando a documentação do Bootstrap como catálogo de opções.
• Classes usadas em formulários

• Métodos GET e POST
• Novos campos de formulário do HTML5 (inout date, week, time)
• Atributos MIN e MAX

• Mais tipos de formulários HTML5
• Input radio e Checkbox
• Atributo checked
• Input range
• Progress e Meter
• Input search

• Tag select com option e optgroup
• LandHover
• Input month
• Atributo autofocus
• Atributo Tabindex

• Organização do ambiente de trabalho

Nessa aula você aprenderá sobre alguns recursos interessantes do HTML5.

• 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

• Criando um projeto do zero e estruturando as pastas
• Adicionando o Bootstrap e jQuery

• Estrutura da página usando container do Bootstrap
• Chrome DevTools Inspetor de Elementos
• CSS position relative e position absolute

• Conceito de sprite
• Criando lista com a tag UL e LI

• Fonte OpenSans
• Usando o @fonte-face no CSS3

• Usando input group do Bootstrap
• Dica de usar comentários para localizar tags que fecham

• O Projeto FontAwesome permite utilizar ícones em formato de fontes.
• Nesta aula veremos como implementar o FontAwesome em um projeto

• 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

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• Encerramos o primeiro projeto real, que foi transformar um layout que veio em imagem, em um site navegável com inúmeros recursos.

• jQuery é a biblioteca JavaScript mais poderosa que existe
• Permite escrever menos código com uma simplicidade invejável.

• 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.

• 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

• 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.

• Você aprenderá como utilizar a Tag vídeo do HTML5, um recurso simples e muito interessante.

• 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.

• A API de Vídeos do HTML5 nos dá muitas possibilidades, nesta aula veremos como interagir com o vídeo usando jQuery.

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.

• 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.

• 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

• Na Parte dois do vídeo vamos ver mais recursos do Player e como manipular elementos do vídeo.

• Com o novo elemento Track do HTML5 veremos como adicionar legendas.
• Aprenda também como evitar alguns erros comuns nesse processo.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• Depois de ajustada a estrutura vamos alinhar o conteúdo do Rodapé.

• As redes sociais no Rodapé são um diferencial.
• Veja como utilizá-las da maneira correta.

• Depois de criado o Layout principal, vamos criar a versão Mobile do Menu.

• 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.

• 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.

• 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.

• 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

• 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

• 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.

• 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.

• 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.

• Vamos aprender a listar os produtos principais.
• Vamos ver Query SQL para listar os produtos em destaque.

• 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.

• 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.

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

• 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.

• 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.

• Após concluírem esta lição você poderá consultar produtos mais buscados em um banco de dados e manipular o resultado no PHP.

• 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.

• 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.

• 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.

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

• 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

• 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!

• 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.

• 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.

• Conclusão do curso e agradecimentos finais

Nessa aula você poderá a solicitar o Certificado Digital da Hcode.

Veja quais são os cursos que a Hcode Treinamentos oferece para todos.