Módulo de Extensivo HTML 5 e CSS em Porto Alegre

Este curso de HTML é ministrado em quatro aulas, cada uma com uma análise aprofundada de um site completo HTML.

Seguindo o modelo didático dos Extensivos Presenciais Alfamídia, o aluno tem acesso, antes do primeiro dia de aula, e durante o curso, a diversos conteúdos de HTML5 e CSS e Web Design Responsivo.

Na primeira aula, o instrutor trabalhará com o estudo de um template profissional de um site de Yoga, mostrando como é construído cada elemento do site, tanto no aspecto da semântica da informação (em html) quanto do layout (com css). No dia da aula, o mesmo conteúdo da aula é disponibilizado online, em uma série de videoaulas e fontes do exemplo apresentado.

No segundo dia de aula, será trabalhado um site de cursos, seguindo a mesma dinâmica. Da mesma forma, o terceiro e último dia de aula apresentarão, cada um, um site diferente. No último dia, além de HTML e CSS, o aluno terá a oportunidade de trabalhar com um template que utiliza Bootstrap.

Próximas Datas em Porto Alegre
(visite também cursos online Alfamídia para cursos em todo Brasil).
Nenhuma data confirmada ainda. Consulte nossa equipe em info@alfamidia.com.br para informações sobre previsão de datas.

Extensivos com este Módulo:
Design e Web Design
Desenvolvimento Web e Mobile

Valor do curso:
ver valor do curso

Confira também os cursos Intensivos:
Criando Sites com HTML 5 e CSS

Conteúdo Programático

Introdução a Linguagens Web I – HTML 5 e CSS
Uma breve história do HTML
Nossa primeira página html
Comentários em html
Criando links em html
Alguns comandos de formatação de parágrafos
Agora propomos nosso primeiro desafio, para fixar os conteúdos já vistos e trabalhar algumas novas tags.
Referências do Exercício
Criando uma página html - Solução do desafio
Utilizando imagens no HTML 5
Elementos de agrupamento, incluindo listas ordenadas e não ordenadas
Uso de Iframe no html 5
Introdução a tabelas
Introdução a tabelas - colspan e rowspan
Introdução ao CSS
Especificando CSS diretamente na página HTML
Inspecionando elementos no Chrome
Seletores - Parte 1
Seletores - Parte 2
Representação de cor em CSS
Fontes em CSS - Os 5 tipos genéricos
Fontes em CSS - Selecionando uma fonte
Fontes em CSS - font-style, font-variant, font-weright, font-size
Cor e imagem no fundo em CSS
Atributos de texto
Layout de links em CSS
Mensagem de final de curso

Introdução a Linguagens Web II – HTML 5 e CSS
Introdução a formulários em HTML
Introdução a formulários em HTML - Parte 2
Introdução a formulários em HTML - Parte 3
Introdução a Formulários em HTML - parte 4
Posicionamento em CSS - margin e padding
Posicionamento em CSS - Largura e centralização de elementos
Posicionamento em CSS - Atributo float
Posicionamento em CSS - Atributo display
Estudo de um formulário com layout CSS
Estudo de um formulário com layout CSS - Continuação
Arquivo do Exemplo de Formulário com CSS
Posicionamento em CSS - Atributo position - Parte I
Posicionamento em CSS - Atributo position - Parte II
Posicionamento em CSS - Atributo position - Parte III
Desafio - Página com layout simples e duas colunas
Desafio HTML
Solução desafio

Web Design Responsivo – desenvolvendo para web e mobile I
Desenvolvimento web responsivo
Linguagens para desenvolvimento de sites responsivos
Design Responsivo
Começando a configurar o css para um site responsivo
Configurando o css para a adaptação de imagens
Configurando o menu
Inserindo um texto ao lado do menu
Inserindo imagens
Configurando o rodapé
Ajustando o layout para uma tela de no máximo 600px
Ajustando as imagens para uma tela de no máximo 600px

HTML 5 e CSS 3
O que sera visto no extensivo HTML5 e CSS3
Os principais elementos estruturais
border-radius e a relação entre imagem e padding
Atributo position
Menu Dropdown com dois niveis
Incluindo textos e títulos
Estilizando links e botões
Inserindo font
Continuando a inserção de font
Finalizando a inserção de font
assets e reset
Icones e desafio
Icones e resolução
Flex
Containers
Gradients
Background gradients
Desafio, alinhamento e menu
Resolução do desafio
Fieldset form
Input text
input email

Estudo de HTML 1 - Site de Yoga
Apresentação do Curso
Arquivo Exemplo 1
Aula 1 - Construção do HTML do Texto Principal
Aula 1 - Construção do CSS do Texto Principal
Arquivo Exemplo 2
Aula 1 - Definição das Fontes
Arquivo Exemplo 3
Aula 1 - Posicionamento da Imagem Principal
Aula 1 - CSS da Imagem Principal
Arquivo Exemplo 4
Aula 1 - Criação do Rodapé
Arquivo Exemplo 5
Aula 1 - Criação do Menu
Aula 1 - Criação do Menu - 2
Arquivo Exemplo Completo
Aula 1 - Formulário do Template
Aula 1 - Responsividade
Aula 1 - Desafios

Estudo de HTML 2 - Site Responsivo de Cursos
Site de Cursos - Apresentação
Site de Cursos - Estrutura do Site
Código do topo do site
Site de Cursos - Topo do Site
Código do posicionamento do menu
Site de Cursos - Posicionando o menu
Código da configuração das tags
Site de Cursos - Configurando as tags
Código da inserção de imagens
Site de Cursos - Inserindo imagens
Código da configuração do elemento footer
Site de Cursos - Configurando o elemento footer
Código da configuração do layout para dispositivos móveis
Site de Cursos - Configurando o layout para dispositivos móveis
Código das transições
Site de Cursos - Transições
Código do desafio
Site de Cursos - Desafio

Estudo de HTML 3 - Site de Viagens
Aula 1
Site de Viagens - Apresentação
Site de Viagens - Topo do Site
Aula 3
Site de Viagens - Código HTML das imagens
Aula 4
Site de Viagens - Código CSS das imagens
Aula 5
Site de Viagens - Ajustando as imagens
Aula 6
Site de Viagens - Rodapé
Aula 7
Site de Viagens - Layout para telas com no máximo 800 pixels

Estudo de HTML 4 - Site com Bootstrap
templates e frameworks - bootstrap, font-awesome
arquivo do exemplo com font-awesome
templates e frameworks - ícones do font-awesome
templates e frameworks - layout do menu
Exemplo Template Kelvin
templates e frameworks - grid do bootstrap
Arquivo mostrando grids do bootstrap
templates e frameworks - grid em diferentes tamanhos
templates e frameworks - container e container-fluid
Arquivo do Template Knight
templates e frameworks - aprendendo a utilizar

Metodologia de Ensino dos Módulos de Extensivos Presenciais

Este curso é um dos módulos que compõem nossos extensivos presenciais, mas pode também ser contratado e realizado de forma independente.

Cada módulo é composto por um conjunto de exemplos de códigos e um conjunto de desafios, que são trabalhados em uma sequência pré-definida pelo instrutor, em aulas que acontecem uma vez por semana. Basicamente, novos exemplos e novos desafios são apresentados a cada aula.

Este modelo se baseia na ideia que é a prática que vai lhe dar naturalidade e fluência para ter um real domínio das ferramentas, conceitos e metodologias apresentadas em aula.

Adicionalmente, os mesmos exemplos e desafios também são disponibilizados na forma de vídeos, permitindo que você estude e revise o conteúdo apresentado.