Achei difícil a parte da organização do html, porque sempre voltava e teria que particionar mais ainda, detalhar muito mais, e no css demorei porque mesmo sabendo o básico, a parte de bloco, ficava meio confuso mas acabou dando tudo certo no final. Existe melhoras no código sim, porém com o conhecimento que tenho ainda não tem como dar uma melhorada.
Vou te dar algumas dicas, nem tudo precisa ser encapsulado, por exemplo, o fato de estar dentro de um <p> ou de um <h1>, <h2>, h3 já vai servir pra posicionar aquele elemento bem.
Assim como tu falou, tem um encapsulamento enorme, vou na parte direita desse exemplo, na parte do Summary:
<div class="box-summary">
<div class="div-summary">
<h2 class="title-summary">Summary</h2>
</div>
[... RESTO DO CODIGO]
</div>
nesse caso acima, tu poderia simplemente tirar esse primeiro div e deixar o h2, o box-summary nem precisa ser flex ou grid. Aí poderia ter uma div pro resto do conteudo e ela sim seria flex ou grid:
<div class="box-summary">
<h2 class="box-summary-title">Summary</h2>
<div class="box-summary-flex">
[... RESTO DO CODIGO]
</div>
</div>
outra dica, tente não usar nomes em português ou misturar línguas (<div class="caixa-right red">), mesmo q tu seja brasileiro, o inglês é a língua universal, e se tu não souber inglês, pode traduzir e vai tudo ficar show, cê pode continuar pedindo ajuda aqui em português, tenho certeza que alguém te ajudará.
🥰 Boa sorte com sua jornada, também estou aprendendo.
My hardest understanding of CSS is how to know what you need to write to get what you want. But im in start of learning CSS.
Hello, I also have this problem, after some projects things started to settle in my mind, but if there's one thing that took me a while to understand, it was the measurements: REM and EM the second thing was: FLEX and GRID
I'm using google translator, but I'll try to explain these very important things for you to do any project from now on.
be careful when using the rem measurement absolutely, such as the height and width of an item, this measure leaves nothing to push, it is stronger, if this item is too large, it may break everything else, in these cases, you can try to use a min or max so that it does not extrapolate
let's go to the most important: FLEX and GRID
FLEX is a flexible object, it means that using it, the items or even it, can be modeled with the page, the items can be compressed to stay close to each other, or they can be separated.
GRID is tougher, it's great for making cymetric scenarios, for example, a series of cards that need to be perfectly symmetrical
In short: Symmetric or "tough" = GRID
Adaptable = Flex
I hope I haven't made your learning more difficult, but I'll leave links with great visual examples to study.
This solution creates a scroll bar when I include the attribution line in the footer. I'm not exactly sure what to do to get this page to render without a scrollbar.
I'd also like feedback on how the CSS is set up. I built this out haphazardly, so I am fairly certain that this isn't the right way to organize a CSS file. For example:
About scroll bar, you put in container: min-height: 100vh;
100vh makes your container occupy 100% of the visible height of the screen, which in turn pushes the rest out
this line should be in the body
keep it up, you're doing well.
