- 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 negrit, utilizando a tag "strong"
- Como dar ênfase para algumas informações do texto, deixando-as em itálico, utilizando a tag "em"
- 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
- 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 (text-align), (font-size), (background), (color)
- CSS inline
- 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
- Removendo os CSS inline e colocando-os no arquivo CSS externo
- Como criar um ID para marcar especificamente um elemento
- Como fazer referência a esse ID 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
- Listas não-ordenadas e listas ordenadas
- Para cada um dos itens da lista, utilizamos a tag "li"
- O conceito das classes no CSS
- Como referenciar uma classe no CSS
- Divisões de conteúdo, utilizando a tag "div"
- Os comportamentos inline e block
- Cabeçalho da página e como criá-lo
- Não é recomendado criar estilos usando tags
- O ideal é usarmos classes para tudo
-
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
- Inline-block
- 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
- Um pouco sobre os formulários
- Como 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
- 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 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 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(Google Fonts)
- Como incorporar um mapa à nossa página(Youtube)
- Como incorporar um vídeo à nossa página(Goggle Maps)
- 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 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
- 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