Curso completo de desenvolvimento web
Sobre o instrutor
Thiago Sousa Santos
Desenvolvedor full stack no Expandr
Sou desenvolvedor PHP, com OO, atualmente trabalhando com PHP 7.3 no meus projetos atuais. Conhecimentos em SQL e ORM. Entusiasta de desenvolvimento ágil. Familiarizado com frameworks de desenvolvimento back-end PHP, atualmente desenvolvo em Zend Framework 3. Entretanto conheço CodeIgniter e CakePHP 3.0. Como também já desenvolvi em VRaptor, framework Java.
Conhecimento de configuração e manutenção avançada de servidor. Segurança: SSL, Firewall. Servidor WEB: Apache ou Nginx, configuração de hosts virtuais e módulos. Servidor de Email: Postfix, POP3, IMAP, ANTI-SPAM. Backup automático. Servidor de versionamento GIT e SVN.
1. Neste curso você aprenderá:
- Criar páginas estáticas com HTML5, CSS3 e JavaScript;
- Criar páginas responsivas com Bootstrap: sites que se adaptem aos diversos tipos de dispositivos;
- Utilizar a biblioteca JQuery: manipule facilmente o DOM, e torne a experiência do usário mais dinâmica;
- Aprender AJAX: execute requisições assíncronas e torne a usabilidade de sites e sistemas web muito mais agradável;
- Aprender PHP: uma das linguagens de programação mais utilizadas no mundo;
- Aprender o conceito de orientação a objetos;
- Aprender MySQL: aprenda a manipular banco de dados relacionais com SQL.
2. Crie 6 projetos reais!
Para aprender tudo isso na prática! Desenvolva esses projetos, e treine suas habilidades!
- Crie um site para um time de eSport em HTML;
- Crie um blog de eSports com HTML e CSS;
- Recrie a página inicial do famoso site Spotify;
- Crie um jogo de desarmar bombas em JavaScript;
- Crie um jogo da velha em JQuery;
- Recrie o Twitter em nosso projeto Parrotwitter.
3. O que serei capaz de fazer depois deste curso?
- Iniciar uma carreira de sucesso como programador web;
- Desenvolver sistemas web completos com HTML, CSS, Bootstrap, JavaScript, Jquery, PHP orientação a objetos e MySQL;
- Ganhar dinheiro com o desenvolvimento de sites, sistemas ou aplicativos web;
- Estará apto a desenvolver seus projetos web.
4. Qual é o público-alvo?
- Pessoas com vontade de aprender a criar sites e sistemas ou aplicativos web;
- Iniciantes em desenvolvimento web;
- Desenvolvedores veteranos que querem aprimorar seus conhecimentos web de forma prática, utilizando as tecnologias HTML, CSS, Bootstrap, JavaScript, Jquery, PHP orientação a objetos e MySQL.
5. Ementa
5.1 Preparando-se para o desenvolvimento
5.2 HTML
- O que é HTML?
- Estrutura de uma Página Web
- Cabeçalhos <h1>, <h2>, <h3>, <h4>, <h5> e <h6>
- Parágrafos <p>
- Formatação de textos
- Listas não ordenadas <ul>
- Listas ordenadas <ol>
- Imagens <img>
- Links <a>
- Tabelas <table>
- Formulários <form>
- Caracteres Especiais
- Projeto: site de um time eSport
5.3 CSS
- Introdução CSS
- Inline CSS
- Seletores CSS
- Classes e IDs
- Diferença de classes e IDs
- Tags <div> e <span>
- Bordas
- Fontes e cores
- Formatações de textos
5.4 CSS intermediário
- Introdução CSS intermediário
- Box model
- Elementos flutuantes
- Posicionamento
- Elementos inline, block e inline-block
- Formatando links
- CSS externo
- Projeto: blog de eSports
5.5 HTML5
- Introdução
- Teste o suporte das novas tags do HTML5
- Novas tags: <header>, <footer> e <nav>
- Novas tags: <section>, <article>, <aside> e <time>
- Compatibilidade com HTML5
- Novas tags de input
- Atributo data
5.6 CSS3
- Introdução
- Navegadores que suportam CSS3
- Normalize CSS
- Box sizing e cantos arredondados
- Degradês e transparências
- Sombras
- Animações
- Transições
5.7 Bootstrap 4 - Front-end framework(HTML5, CSS3 e JS)
- Introdução
- Design responsivo e Bootstrap
- Configurando o Bootstrap
- Visão geral
- Sistema grid
- Objeto de mídia
- Utilitários
- Reboot: normalize do Bootstrap
- Tipografia
- Imagens responsivas
- Tabelas
- Formulários
- Botões
- Ícones (Font Awesome, Glyphicons, Font8)
- Barra de navegação
- Modal
- Alert
- Navs
- Cards
- Tooltip e popover
- Paginação
- Projeto: homepage do Spotify
- Spotify: barra de navegação
- Spotify: criando a capa principal
- Spotify: criando a área de conteúdos
- Spotify: criando o rodapé
- Spotify: media queries
- Spotify: overflow
- Spotify: otimização com media queries
- Spotify: escondendo elementos
5.8 JavaScript
- O que é JavaScript?
- Incluindo JavaScript em páginas HTML5
- Comentários
- Declarando e modificando variáveis
- Relizando operações aritiméticas
- Relizando operações lógicas
- Tomando decisões (Condicionais)
- Decisões limitadas (Switch)
- Realizando repetições (Loops)
- Funções: declaração, parâmetros e retorno
- Funções: parâmetros opcionais e funções anônimas
- Escopo das variáveis
- Classes, atributos, métodos e objetos
- Construtores
- Getters e setters
- Herança e polimorfismo
- Reescrita de métodos
- Eventos
- Eventos: mouse
- Eventos: teclado
- Eventos: janela
- Eventos: formulário
- HTML DOM: introdução
- HTML DOM: manipulando elemento (node)
- HTML DOM: manipulando valores de elementos
- Projeto: game desarmar bombas
5.9 JQuery
- O que é JQuery?
- Incluindo JQuery em páginas HTML
- Selecionando, escondendo e exibindo elementos
- Eventos via JQuery
- Eventos via JQuery: mouse
- Eventos via JQuery: teclado
- Eventos via JQuery: formulário
- Projeto: jogo da velha
5.10 Iniciando com servidor Apache, PHP e MySQL
- A dinâmica da Word Wide Web
- O lado do servidor
- Instalando o XAMPP
- Um pouco mais de XAMPP
5.11 PHP
- O que é o PHP?
- Embutindo blocos PHP em páginas HTML
- Echo/print
- Comentários
- Declarando e modificando variáveis
- Relizando operações aritiméticas
- Relizando operações lógicas
- Tomando decisões (Condicionais)
- Decisões limitadas (Switch)
- Realizando repetições (Loops)
- Processando formulários
- $_GET
- $_POST
5.12 Funções PHP
- Introdução
- Funções: declaração, parâmetros e retorno
- Funções: parâmetros opcionais e funções anônimas
- Escopo das variáveis
- Include e require
- Funções básicas
- Validação de formulários
- Funções de strings
- Funções de data e hora
- Funções de array
5.13 Orientação a objetos PHP
- Classes, atributos, métodos e objetos
- Construtores
- Herança e polimorfismo
- Reescrita de métodos
- Encapsulamento e visibilidade
- Getters e setters
- Construtor e destrutor
- Projeto: calculadora
5.14 MySQL
- O que é MySQL?
- Um pouco mais sobre SQL
- Utilizando o PHPMyAdmin para manipulação do MySQL
- Criando e excluindo bancos de dados
- Tabelas e tipos de dados
- Editando nome de tabelas
- Incluindo, editando e removimento campos de tabelas
- Inserindo dados em tabelas
- Realizando consultas simples
- Filtrando registros
- Selecionando registros
- Atualizando registros
- Excluindo registros
- Relacionamento entre tabelas
- Junções entre tabelas
- Relacionamento entre tabelas do tipo 1 para 1
- Select com left join
5.15 AJAX (Asynchronous Javascript and XML)
- O que é AJAX?
- O que são requisições síncronas e assíncronas?
- O objeto XMLHttpRequest
- Requisições síncronas com links
- Requisições assíncronas com JavaScript puro
- Requisições assíncronas com JQuery
5.18 Projeto final: Parrotwitter
- Introdução ao Parrotwitter
- Entendendo a página inicial, a página de cadastro e o formulário de login
- Registrando usuários: enviando e recebendo dados via GET e POST
- Criando a conexão com banco de dados MySQL
- Registrando usuários: registrando dados no MySQL
- Efetuando autenticação de usuários
- Controlando a sessão do usuário
- Criptografia de dados com MD5
- Cadastro de usuário
- Página inicial: criando barras laterais e timeline
- Incluindo post de 140 caracteres
- Exibindo post na timeline
- Procurando pessoas
- Adicionando o botão para seguir pessoas
- Seguindo pessoas
- Deixando de seguir pessoas
- Controlando a exibição do botão de seguir e deixar de seguir pessoas
- Exibindo posts de quem estamos seguido em nossa timeline
- Montando o painel de tweets e seguidores
- Opcional: atividades práticas