Desenvolvimento Web – CSS

Ementa: Ao longo das oito aulas deste curso, o aluno aprenderá sobre a linguagem de programação responsável pela estilização das páginas da web: a CSS. Com ela, o aluno aprenderá a exibir o conteúdo das páginas de uma maneira mais agradável e bem organizada. Para isso, utilizará, na prática, diferentes conceitos, como as tags <style>, <link>, <header>, <nav>, <ul>, <li>, <a>, <iframe>, entre tantas outras. Aprenderá, também, sobre os atributos, as propriedades, o uso de seletores, a importância das cores, as animações, os keyframes, o desenvolvimento responsivo, os códigos de um site externo e o Bootstrap.

Mercado de trabalho/Público-alvo: Os conhecimentos adquiridos com o curso Desenvolvimento Web – CSS, se aplicam de forma ampla para atuação em desenvolvedor de Web, em todo o tipo de empresa de pequeno a grande porte, além de agências focadas em marketing digital e criação de sites.

Carga horária: 8h

Conteúdo Programático

Aula 1 – Introdução ao CSS

• Entender o que é CSS,  as suas vantagens e saber o porquê foi criado;
• Entender a estrutura da escrita e saber como aplicar os atributos do CSS;
• Estilizar a página HTML; 
• Utilizar alguns atributos CSS;
• Estilizar com CSS; 
• Aprender a baixar o Atom.

Aula 2 – Aplicando CSS no HTML

• Entender a diferença entre class e ID; 
• Compreender o uso de seletores; 
• Aprender sobre os atributos da tag <link>;
• Entender a importância dos atributos de cores; 
• Conhecer o código hexadecimal;
• Criar um documento CSS; 
• Programar um seletor de estilo; 
• Importar um arquivo CSS para o HTML;
• Usar atributos de CSS em um arquivo separado.

Aula 3 – Incluindo conteúdos interativos

• Compreender o que é o <iframe> e suas propriedades;
• Adicionar a tag <main>; 
• Inserir a tag <iframe> e suas propriedades; 
• Acrescentar a tag <div> e suas propriedades;
• Adicionar caixas de textos e um botão.

Aula 4 – CSS3 e Animações

• Conhecer o CSS3;
• Conhecer os atributos que criam uma animação e entender o que são as transições no CSS; 
• Aprender sobre os keyframes; 
• Usar o elemento hover para animar; 
• Criar animações com keyframes; 
• Aplicar efeito de transição.

Aula 5 – Desenvolvimento Responsivo

• Entender o que é o desenvolvimento responsivo;
• Entender como inspecionar e alterar códigos de um site;
• Editar códigos de um site externo; 
• Visualizar o site por diferentes tamanhos de dispositivos;
• Realizar ajustes de estilo na página petcommerce.html pelo navegador; 
• Copiar as mudanças feitas no navegador e passar para o Atom.

Aula 6 – CSS3 e o Bootstrap

• Entender o que é o Bootstrap e aprender a baixar o arquivo Bootstrap; 
• Vincular o arquivo Bootstrap de CSS à página HTML;
• Construir uma página e estiliza-lá com os comandos CSS presentes no arquivo Bootstrap;
• Adicionar imagens ao álbum e configurar a organização das imagens de forma responsiva.

Aula 7 – Classes do Bootstrap

• Compreender como interpretar algumas classes do Bootstrap;
• Conhecer algumas propriedades e classes do Bootstrap;
• Construir um menu de navegação usando as classes do Bootstrap;
• Adicionar a seção Home e criar a seção Sobre nós;
• Saber como interpretar classes de espaçamento.

Aula 8 – Mais classes do Bootstrap

• Conhecer mais classes do Bootstrap;
• Criar a seção Preços e a seção Fale conosco;
• Adicionar linhas de separação de conteúdo entre as seções; 
• Inserir um botão no final do formulário e fixar o menu de navegação no topo do site.