🔸 Cursos Realizados e Conceitos Aprendidos
🔸 Deploy
Esse Projeto foi desenvolvido durante 4 cursos de HTML5 e CSS3 da Alura, seu objetivo era construir 3 páginas web de uma barbearia fictícia. Cada página tem uma finalidade, a primeira página era destinada para home da barbearia, a segunda é uma página para os produtos e última página apresenta um formulário para contato com a barbearia. Para criar essas páginas várias funcionalidades foram aplicadas, por exemplo:
- Criação de cabeçalho e rodapé para manter uma identidade visual nas páginas;
- Texto e formatação;
- Adição de imagens e configurações de suas dimensões;
- Uso e formatação de listas;
- Adição de elementos externos como vídeos e mapas;
- Adição de links para permitir a navegação entre as páginas;
- Introdução de formulário para recepção de dados do cliente;
- Interações dos elementos da página com o cursor do mouse;
- Elementos de edição, como o uso de degradê, opacidade e sombra.
HTML5 e CSS3 - Parte 1: Crie uma Página da Web
- Uma introdução ao HTML e às suas tags
- Como definir o título e os parágrafos de um texto
- Utilizando as tags
<h1>e<p>, respectivamente
- Utilizando as tags
- Como dar destaque para algumas informações do texto, deixando-as em negrito, utilizando a tag
<strong> - Como dar ênfase para algumas informações do texto, deixando-as em itálico, utilizando a tag
<em> - A definir a estrutura básica do HTML
- Com a tag
DOCTYPE, definimos qual versão do HTML estamos utilizando - A tag
<html>, que marca o conteúdo a ser renderizado no navegador- Dentro desta tag, podemos definir a linguagem da página, através da propriedade
lang
- Dentro desta tag, podemos definir a linguagem da página, através da propriedade
- Com a tag
- Como passar as informações do encoding da nossa página para o navegador, através da tag
<meta>e da propriedadecharset - Como definir o título de uma página, através da tag
<title> - Como separar as informações que estão sendo passadas para o navegador, utilizando a tag
<head> - Como separar o conteúdo da página, utilizando a tag
<body> - A mexer na apresentação dos textos
- No alinhamento deles (
text-align) - No tamanho da fonte (
font-size) - Na cor de fundo (
background) - Na cor do texto (
color)
- No alinhamento deles (
- CSS inline
- Na linha onde temos a nossa tag, adicionamos a propriedade do CSS
- A tag
<style>- Dentro da tag, podemos colocar marcações de CSS referentes aos elementos que temos no nosso HTML
- A apresentação do CSS com um arquivo externo
- Como funciona o estilo em cascata do CSS
- Como importar um arquivo externo de CSS dentro da nossa página HTML
- Como representar cores no CSS
- Através do nome da cor
- Através do seu hexadecimal
- Através do seu RGB
- Como reestruturar o nosso código, removendo os CSS inline e colocando-os no arquivo CSS externo
- Como criar um identificador para marcar especificamente um elemento
- Como fazer referência a esse identificador no CSS
- Como adicionar uma imagem à nossa página
- Como ajustar a altura do elemento, através da propriedade
height - Como ajustar a largura do elemento, através da propriedade
width - Como ajustar o espaçamento interno do elemento, através da propriedade
padding - Como ajustar o espaçamento externo do elemento, através da propriedade
margin - Como se comporta um time de front-end hoje em dia
- A trabalhar com listas não-ordenadas e listas ordenadas
- Para cada um dos itens da lista, utilizamos a tag
<li>
- Para cada um dos itens da lista, utilizamos a tag
- O conceito das classes no CSS
- Elas servem para marcar itens, que são repetíveis
- Como referenciar uma classe no CSS
- Divisões de conteúdo, utilizando a tag
<div> - Os comportamentos inline e block
- O conceito de cabeçalho da página e como criá-lo
- Que o cabeçalho da página deve ter mais destaque
- Que não é recomendado criar estilos usando tags
- O ideal é usarmos classes para tudo
HTML5 e CSS3 - Parte 2: Posicionamento, Listas e Navegação
- Uma introdução ao projeto do treinamento
- Uma revisão do conteúdo aprendido no treinamento anterior
- Uma revisão da base de uma página HTML
- Lista HTML não ordenada
- A criar links para outras páginas, sejam elas do nosso projeto ou páginas externas
- Um reforço aos estilos
inlineeblock - Como transformar o texto para ter todas as letras maiúsculas
- Como deixar o texto em negrito com CSS
- Como remover a decoração do texto
- Como remover os estilos que o navegador cria automaticamente
- Como funciona os posicionamentos static, relative e absolute dos elementos
- Como posicionar o cabeçalho da nossa página
- A tag
main, para o conteúdo principal da nossa página - A criar listas complexas, com títulos, imagens e parágrafos
- A utilizar o
inline-block - A praticar e estilizar o conteúdo principal da nossa página
- Através do CSS, aplicar bordas nos elementos.
- Os diferentes tipos de bordas.
- A deixar a borda arredondada.
- Algumas pseudo-classes CSS
hover, quando o usuário passa o cursor sobre o elementoactive, quando um elemento está sendo ativado pelo usuário
- A mudar a cor do texto e/ou da borda de um elemento, quando o usuário passar o cursor sobre o mesmo
- A mudar a cor da borda de um elemento, quando o mesmo estiver sendo ativado pelo usuário
- A tag
footer, para o rodapé da nossa página - Que, com CSS, podemos colocar uma imagem de fundo em um elemento
- Quando colocamos uma imagem de fundo em um elemento, o CSS, por padrão, copia e cola a imagem diversas vezes até ocupar todo o espaço do elemento
- A tabela Unicode
HTML5 e CSS3 - Parte 3: Trabalhando com Formulários e Tabelas
- Uma revisão do conteúdo aprendido no treinamento anterior
- Uma introdução ao projeto do treinamento
- A criação da página de contato
- Um pouco sobre os formulários
- A criar um formulário HTML
- A tag que o representa é a
<form>
- A tag que o representa é a
- A tag
<input>, para a entrada de dados do usuário - A criar uma etiqueta para o
input, com a tag<label> - A conectar um
inputcom o seulabel- Colocamos um
idpara oinpute associamos esseidao atributofordolabel
- Colocamos um
- Alguns tipos de
input, comotextesubmit - Que
labelpossui odisplay inlinee oinputpossuidisplay inline-block - A estilizar o nosso formulário
- O
textarea, para entradas de texto de mais de uma linha - O
inputdo tiporadio - Como agrupar vários
inputdo tiporadio, impedindo que mais de uminputseja selecionado - O
inputdo tipocheckbox - Que podemos criar um
inputdentro de umlabel, assim associando-os - Mais estilizações para a nossa página
- Como funciona a hierarquia no CSS
- O
select, que é seletor, um campo de seleção de um item, e ooption, que representa cada opção do seletor - Alguns tipos de inputs para celular:
email,tel,number,password,date,datetime,monthesearch - Como não permitir que um campo não seja preenchido, através do atributo
required - Como exibir uma sugestão de preenchimento para os campos, através do atributo
placeholder - Como deixar uma opção marcada por padrão nos nossos
inputradioecheckbox, através do atributochecked - Como estruturar melhor o nosso código com
fieldsetelegend - Como adicionar uma alternativa à imagem, descrevendo-a, com o atributo
alt - Como estilizar o botão de envio de formulário
- A realizar transições nos nossos elementos, com a propriedade CSS
transition - A modificar o estilo do ponteiro do mouse, quando passar por cima de determinado elemento, através da propriedade CSS
cursor - A realizar transformações nos nossos elementos, como aumentar proporcionalmente a escala de determinado elemento ou rotacioná-lo, através da propriedade CSS
transform - A criar uma tabela HTML
- A tag
table, que representa a tabela - A tag
tr, que representa a linha da tabela - A tag
td, que representa a célula da tabela - A tag
thead, que representa o cabeçalho da tabela - A tag
tbody, que representa o corpo da tabela - A tag
th, que representa a célula do cabeçalho da tabela - A tag
tfoot, que representa o rodapé da tabela
- A tag
- A estilizar a tabela
HTML5 e CSS3 - Parte 4: Avançando no CSS
-
A ajustar a página principal para utilizar os mesmos padrões da página de produtos
-
Medidas proporcionais com CSS
-
Como funciona a flutuação dos elementos e como modificá-la, com a propriedade
floatdo CSS -
Como limpar o
float, com a propriedadecleardo CSS -
A utilizar fontes externas nas nossas páginas
-
Como incorporar um mapa à nossa página
-
Como incorporar um vídeo à nossa página
-
A melhorar mais ainda a semântica da página principal, com novas divisões, classes, etc
-
Novas pseudo-classes
-
Como aplicar um background gradiente na página
-
Pseudo-elementos
-
Seletores avançados CSS
-
Seletor
>, para acessar os filhos de determinado elemento. Por exemplo, para acessar todos ospdentro demain:main > p { } -
Seletor
+, para acessar o primeiro irmão de determinado elemento. Por exemplo, para acessar o primeiropapós umimg:img + p { } -
Seletor
~, para acessar todos os irmãos de determinado elemento. Por exemplo, para acessar todos ospapós umimg:img ~ p { } -
Seletor
not, para acessar os elementos, exceto algum. Por exemplo, para acessar todos ospdentro demain, exceto opque temidmissao:main p:not(#missao) { }
-
-
Como fazer contas com CSS, com a propriedade
calc -
Como manipular a opacidade dos elementos, com a propriedade CSS
opacity -
Como manipular a opacidade das cores
-
Como adicionar um sombreamento em volta dos elementos, com a propriedade CSS
box-shadow -
Como adicionar um sombreamento em textos, com a propriedade CSS
text-shadow -
Design responsivo: como ajustar o estilo da nossa página de acordo com o tamanho da tela do dispositivo que a acesse
- Meta tag de Viewport
- Media Queries
HTML5CSS3
 Diego Borelli Dias |
|---|