Noções básicas de layout de conteúdo - curso RUB 3.900. da Hexlet, treinamento 18 horas, Data: 1º de dezembro de 2023.

1. Introdução
Trabalhar com conteúdo é parte básica na hora de criar um projeto. Há conteúdo escondido atrás de belas animações, blocos e imagens. O usuário acessa o site ou abre um aplicativo para ele. Nesta lição veremos brevemente os tópicos que serão estudados ao longo do curso.

teoria

2. Modelo de caixa e CSS
Quais propriedades CSS afetam o tamanho dos elementos quando exibidos na página? Vamos relembrar o conceito do modelo box e estudar como as propriedades margin, padding e border funcionam para definir o padding externo/interno e as bordas visíveis de um elemento. Vamos conhecer a propriedade box-sizing, que altera o comportamento padrão do modelo de caixa

teoria

3. Estilos de texto
Criar uma página é, antes de tudo, trabalhar com texto. Por mais bonito que seja o design, se a informação for difícil ou impossível de ler, o usuário sairá rapidamente da página. Nesta lição, conheceremos as propriedades básicas do estilo de texto.

teoria
testes
exercício

4. Fontes e como trabalhar com elas
Você já ouviu a frase “brincar com fontes”? É hora de fazer isso. Aprendemos a conectar fontes usando CSS, controlar o tamanho do texto, o design e definir o espaçamento entre linhas. No final da lição, estudaremos a propriedade generalizada da fonte, com a qual você pode definir 6 estilos de texto diferentes ao mesmo tempo

teoria
testes
exercício

5. Listas
As listas são parte integrante do texto. Eles permitem agrupar fragmentos relacionados, unindo-os de acordo com seu significado. Nesta lição, exploraremos os tipos de listas disponíveis em HTML, praticaremos o aninhamento de listas e abordaremos o tópico de estilo de marcadores de lista

teoria
testes
exercício

6. Colunas
Criar um layout de revista com várias colunas era problemático usando CSS. Com o advento do padrão CSS3, surgiu um novo módulo - CSS Multi-column Layout, que possibilitou a criação de colunas com transferência automática de conteúdo. Vamos estudar os recursos do módulo CSS Columns e as limitações impostas a este método de estilização de texto

teoria
testes
exercício

7. Unidades
Assim como no mundo real, o mundo do layout usa unidades de medida para indicar tamanhos de elementos, preenchimento, tamanho do texto e assim por diante. Nesta lição conheceremos as unidades básicas de medida e sua relação com os elementos do site. Vamos estudar o conceito de unidades relativas e absolutas e identificar a diferença entre as unidades em e rem

teoria
testes
exercício

8. Elementos de mídia
Os visitantes do site não gostam apenas de ler textos, mas também de perceber informações por meio de elementos de mídia: imagens, vídeo, áudio. Como adicioná-los corretamente e levar em consideração as diferenças dos navegadores? Por que a imagem do site tem um pequeno recuo na parte inferior? Vamos explorar isso e um pouco mais na lição.

teoria
testes
exercício

9. Tabelas
As tabelas são o pesadelo de um designer de layout. Muitas tags são usadas para criá-los, e pequenos erros podem estragar o clima. Nesta lição, passo a passo, estudaremos a criação de tabelas simples e complexas, entenderemos de onde podem surgir erros e como evitá-los. Ao final da lição, você será capaz de criar tabelas com segurança e parar de ter medo delas.

teoria
testes
exercício

10. Formulários
Os formulários são um importante elemento interativo de uma página da web. Assim como os links, os formulários proporcionam interação entre o usuário e a página, permitindo o envio de dados. Vamos aprender como criar formulários, adicionar campos de texto, campos de seleção, listas e botões. Vamos abordar o tema acessibilidade de formulários para pessoas com deficiência

teoria
testes
exercício

11. Seletores
Nesta lição, aprendemos e testamos seletores simples que nos permitiram selecionar elementos por classe, identificador ou tag. De que outra forma você pode selecionar um elemento na página? Nesta lição analisaremos seletores relacionados e vizinhos, aprenderemos como usar seletores por atributo

teoria
testes
exercício

12. Pseudo-classes
Vamos continuar com o tópico de seletores em CSS e nos familiarizar com o conceito de pseudoclasse. Vamos aprender como usá-los para selecionar elementos pares ou ímpares, como adicionar novos estilos de foco passe o mouse sobre um elemento e por que até mesmo os elementos ficarão assim ao usar apenas um determinado pseudo-classe. Vamos entender os estados dos elementos e as pseudoclasses estruturais

teoria
testes
exercício

13. Pseudo-elementos
Faltam elementos na página? Pseudoelementos vêm em socorro - elementos criados usando CSS. Nesta lição, veremos como os pseudoelementos são criados, por que eles são necessários e quais recursos eles possuem. Vamos ver como os marcadores de lista são estilizados em CSS

teoria
testes

14. Transbordar
Overflow é uma situação em que o conteúdo dentro de um contêiner é maior que o tamanho do próprio contêiner. Esta situação pode estragar o layout mesmo para um designer de layout experiente. Aprenderemos o que fazer com isso e como gerenciar a ocultação de conteúdo usando a propriedade overflow nesta lição. Vamos dar uma olhada na propriedade text-overflow e aprender como adicionar reticências em textos se não houver espaço suficiente para isso

teoria
testes
exercício

15. Variáveis ​​CSS
Imagine que em um site haja uma dezena de blocos com fundo da mesma cor. Você precisa mudar todas essas cores. Como fazer isso sem substituir constantemente a cor em cada seletor e como as variáveis ​​podem ajudar aprenderemos nesta lição. Vamos ver como as variáveis ​​são criadas e usadas, aprender sobre o escopo e por que as variáveis ​​globais são melhores que as variáveis ​​por seletor

teoria
testes

16. Fundo
Um designer de layout muitas vezes enfrenta a necessidade de estilizar não apenas elementos específicos, como tabelas, listas, texto, elementos de mídia e formulários. Às vezes você também precisa estilizar os blocos em que estão localizados. Para fazer isso, você pode definir o plano de fundo do bloco com conteúdo, e aprenderemos como fazer isso usando a propriedade background nesta lição. Vamos estudar as propriedades de configuração de cor, imagem, aprender como posicionar o fundo e definir seu tamanho

teoria
testes

17. Gradientes
Um fundo ou imagem de cor única não é a única maneira de estilizar um bloco. Artistas e designers costumam usar gradientes para criar planos de fundo – transições suaves de uma cor para outra. Neste tutorial aprenderemos como criar gradientes lineares e radiais. Usando gradientes e truques, estudaremos a criação de transições nítidas entre cores, e também aprenderemos sobre a roda de cores e como, com sua ajuda, encontrar combinações de cores para gradientes

teoria
exercício

18. Trabalho independente
Tarefas adicionais que permitem consolidar a teoria adquirida

19. Materiais adicionais
Artigos e vídeos com curadoria da equipe Hexlet. Ajudará você a se aprofundar no tópico do curso