leandroomenezes/barbeariaalura

barbeariaAlura

Nesta aula, aprendi:

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 Nesta aula, começamos a mexer na apresentação dos textos, no alinhamento deles e no tamanho da fonte. Na próxima, vamos ver como fazer isso em grandes quantidades de texto e de forma muito mais organizada. Te espero lá.

Nesta aula, aprendi:

A trabalhar com listas não-ordenadas e listas ordenadas 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

Os comportamentos inline e block

Nesta aula, aprendi:

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

Nesta aula, vimos:

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

Nesta aula, aprendi:

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

Nesta aula, aprendi:

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

Nesta aula, aprendi:

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

Nesta aula, aprendi:

Através do CSS, aplicar bordas nos elementos. Os diferentes tipos de bordas. A deixar a borda arredondada.

Nesta aula, aprendi:

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

Nesta aula, aprendi:

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

Nesta aula, vimos:

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

Nesta aula, aprendi:

A criar um formulário HTML A tag que o representa é a

A tag , para a entrada de dados do usuário A criar uma etiqueta para o input, com a tag 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

Nesta aula, vi:

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

Nesta aula, aprendi:

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

Nesta aula, aprendi:

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

Nesta aula, aprendi:

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 estilizar a tabela

Nesta aula, aprendi:

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

Nesta aula, aprendi:

A utilizar fontes externas nas nossas páginas Como incorporar um mapa à nossa página Como incorporar um vídeo à nossa página

Nesta aula, aprendi:

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

Nesta aula, aprendi:

Seletores avançados CSS Seletor >, para acessar os filhos de determinado elemento. Por exemplo, para acessar todos os p dentro de main: main > p { }

Seletor +, para acessar o primeiro irmão de determinado elemento. Por exemplo, para acessar o primeiro p após um img: img + p { }

Seletor ~, para acessar todos os irmãos de determinado elemento. Por exemplo, para acessar todos os p após um img: img ~ p { }

Seletor not, para acessar os elementos, exceto algum. Por exemplo, para acessar todos os p dentro de main, exceto o p que tem id missao: main p:not(#missao) { }

Como fazer contas com CSS, com a propriedade calc

Nesta aula, aprendi:

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

Nesta aula, aprendi:

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