HTML5_e_CSS3-Alura

Status do Projeto: :heavy_check_mark: Concluído

Tópicos

:small_blue_diamond: Descrição do projeto

:small_blue_diamond: Funcionalidades

:small_blue_diamond: Deploy da Aplicação

:small_blue_diamond: Objetivos

:small_blue_diamond: Pré-requisitos

:small_blue_diamond: Como rodar a aplicação

:small_blue_diamond: Desenvolvedores

:small_blue_diamond: Instrutores

Descrição do projeto

Funcionalidades

:heavy_check_mark: Parte 1: Crie uma página da Web.

:heavy_check_mark: Parte 2: Posicionamento, listas e navegação.

:heavy_check_mark: Parte 3: Trabalhando com formulários e tabelas.

:heavy_check_mark: Parte 4: Avançando no CSS.

Deploy da Aplicação

Link do deploy da aplicação com Vercel: https://barbearia-alura-leocbm.vercel.app/

Imagem Representativa da página

Objetivos

• Parte 01

Nós vamos criar textos, imagens, blocos de conteúdo, listas de informações; além de aprender a mudar cores, espaçamento, posicionamento de elementos e tudo o mais que se pode realizar numa página web utilizando o HTML e o CSS.

• Aprenda o que é o HTML e o CSS
• Entenda a estrutura básica de um arquivo HTMLs
• Utilize o navegador para inspecionar elementos
• Aprenda a definir estilos para elementos usando o CSS
• Desenvolva um página Web

Após todos esses conhecimentos, seremos capazes de construir a página Home da Barbearia Alura.

O que aprendemos:

• 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
• 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
• Como passar as informações do encoding da nossa página para o navegador, através da tag meta e da propriedade charset
• 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
• 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

• Parte 02

Vamos evoluir o nosso conhecimento, criando uma segunda página, a página dos produtos. Nessa página, vamos ter um cabeçalho complexo com imagem e item de menu. Esse menu são links que vão te levar para outras páginas.

Vamos ter ainda uma lista de itens de produtos, cada um desses itens, extremante complexo, com título, imagem e texto de descrição. Por fim, um rodapé com uma imagem e um texto sobre Copyright.

• Aprenda a estrutura da página HTML
• Navegue entre páginas webs
• Conheça reset.css e o posicionamento pelo CSS
• Entenda a diferença entre inline e block
• Lide com bordas e pseudo-classes CSS

Após todos esses conhecimentos, seremos capazes de construir a página Produtos da Barbearia Alura.

O que aprendemos:

• 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 inline e block
• 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 elemento
• active, 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

• Parte 03

vamos criar a página de contato da Barbearia Alura, vai ter um grande formulário onde nós pedimos o nome, o e-mail, o telefone. Pedimos para o usuário nos mandar uma mensagem. Ele seleciona como prefere receber a ligação, como prefere receber o nosso contato, que horário ele prefere ser atendido. Ele ainda tem a opção de enviar isso e ver uma tabela com o horário de funcionamento.

Seguindo o mesmo padrão de página que nós criamos na página de produto, com aquele cabeçalho, rodapé e o conteúdo centralizado no meio, nós vamos do zero criar a página de contato. Passar por todos os itens, entender absolutamente tudo sobre formulário e tabela, como eles funcionam, como se comportam, como que nós criamos tags, marcamos esses elementos direito com CSS e temos no final essa página completa.

• Crie formulários complexos
• Trabalhe com campos para celulares
• Apresente informações em tabelas
• Use estilos para formulários, campos e tabelas
• Entenda a hierarquia no CSS
• Trabalhe com transformações e transições

O que aprendemos:

• A criar um formulário HTML
• A tag que o representa é a form
• 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 input com o seu label
• Colocamos um id para o input e associamos esse id ao atributo for do label
• Alguns tipos de input, como text e submit
• Que label possui o display inline e o input possui display inline-block
• A estilizar o nosso formulário
• O textarea, para entradas de texto de mais de uma linha
• O input do tipo radio
• Como agrupar vários input do tipo radio, impedindo que mais de um input seja selecionado
• O input do tipo checkbox
• Que podemos criar um input dentro de um label, 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 o option, que representa cada opção do seletor
• Alguns tipos de inputs para celular: email, tel, number, password, date, datetime, month e search
• 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 input radio e checkbox, através do atributo checked
• Como estruturar melhor o nosso código com fieldset e legend
• 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

• Parte 04

Neste módulo iremos nos atentar para a home page , que está visualmente inacabada e incompatível com as outras páginas. Modificaremos a fonte, melhoraremos a distribuição do conteúdo, adicionar efeitos de sombra como importar um mapa e um vídeo para o site.

• Importe conteúdo externo na sua página HTML, como fontes, vídeos e mapas
• Conheça pseudo-classes e pseudo-elementos
• Use seletores de CSS avançados
• Saiba como lidar com opacidade e sombra
• Entenda sobre o Viewport e design responsivo

O que aprendemos:

• 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 float do CSS
• Como limpar o float, com a propriedade clear do 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 filh