Duvida Ex.1 Atributo Class

Oi Ivan, você precisa o código fonte do arquivo e colar aqui, dentro do trecho gerado pelo botão "inserir código". Você pegou o resultado exibido no navegador, aí complica para a gente ajudar.

....

Oi Ivan,

Eu formatei seu código :). É só colocar três backticks(```) antes e três depois.

Além disso, meu chute é que a imagem não aparece pq os caminhos para elas não estão sendo encontradas. Clica com o botão direito no icone quebrado e verifica se o navegador carregou :).

Oi Ivan,

A tag <li> tem por padrão um display: block. Isso quer dizer que sem nenhum CSS elas deveriam ficar uma embaixo da outra.

Com o código que você mostrou pra gente aqui, essas tags <li>agora devem ficar uma do lado da outra mesmo.

.....

Oi Ivan,

O display: inline-block diz pra tag que ela deve ocupar o tamanho que o conteúdo dela tem. Se o <a> ou a <img> tiverem 200 px de largura, a <li> que fica em volta deles vai ocupar 200px só. Se essa s <li>s estiverem uma do lado da outra e couberem uma do lado da outra , elas vão fazer isso.

Assim, só consigo pensar em dois casos que as <li>s continuariam uma em cima das outras.

1) Pode ser que elas não tenham espaço pra ficar uma do lado da outra. Se elas tiverem 30px de tamanho, mas estiverem dentro de uma tag com espaço de 50px, não vai rolar.

2) Pode ser que o display: inline-block não tenha chegado na sua tag. Como o nome da classe e do seletor estão iguais, pode ser que o arquivo css não esteja sendo carregado, ou que no mesmo css, exista algum outroe seletor que também chega na suas <li>s e esteja colocando um display diferente

Se não for nada disso, bora continuar investigando :)

.....

Ivan,

Ao colocar a class, poderá "personalizar" um grupo de ul.

Se está trabalhando com os arquivos css dos exercícios, tente mudar o aside li para block, que é o padrão.

aside li { display: block; }

.icones-redes-sociais li { display: inline-block; }

desta forma, você estará colocando as li anteriores um em cima da outra e o que foi definido na classe ficará um ao lado do outro..

Espero ter auxiliado.

Por partes e resumidamente:

Com o inline-block ele dividirá as partes em blocos e irá colocá-los na mesma linha, ou seja, ficando os ícones na horizontal.

Sobre o atributo class, você não verá diferença visual, é funcional em questão do seu código.

Para não haver bugs na página quando você estiver usando seu CSS com Java Script, por exemplo.

O id não é recomendado para trabalhar com repetições de nomes, enquanto o class você poderá usar o mesmo nome para reaproveitar os códigos já feitos.

....