Stats Preview Card Component

Community feedback

• 

  palharesmagnon•85

  @palharesmagnonPosted almost 3 years ago

  Olá, Lara. Sua escolha de marcações HTML parece muito engenhosa pra resolver o problema do conteúdo de texto do card, o alinhamento ficou perfeito, assim como o espaçamento. Como eu também sou iniciante, qualquer coisa que eu tenha a dizer merece um estudo mais aprofundado, então vou adicionar links para artigos ou vídeos, quase sempre em inglês. Bom, uma coisa que eu notei é que no meu notebook, cuja resolução é estranha (1366x766), a imagem e a camada de overlay sofreram deslocamento. Isso ocorre por causa da escolha de usar position: absolute; associado a medidas fixas como px para determinar o tamanho e posição dos elementos renderizados na tela, embora no seu monitor esteja perfeito, em monitores de resolução diferentes isso causará deslocamento. Há várias abordagens possíveis para resolver esse problema, mas antes de abordar qualquer alternativa seria mais proveitoso estudar o funcionamento das várias unidades de medidas relativas/flexíveis já que cada unidade tem um comportamento específico que irá influenciar na forma como você estrutura seu documento HTML. Outro ponto interessante seria desde já adotar uma abordagem semântica para escrever seus documentos HTML5. Isso facilitará no processo de desenvolvimento pensado para usuários com problemas de acessibilidade. Partindo dessa premissa, algumas coisas que já poderiam ser refatoradas no documento HTML seriam por exemplo: <div class="card"> onde <div> poderia ser substituído por <article>, sem perder a formatação. Outra possível mudança seria criar uma lista não ordenada <ul> que irá servir de contenção para os seus elementos <li>10k+<span>Companies</span></li> onde <span> deveria receber a regra display: block; para que o conteúdo se comporte como bloco, quebrando para linha de baixo. O componente card como um todo deveria estar inserido em uma tag <main></main>, onde <main> é a tag que envolve o conteúdo principal de uma página, toda página Web por convenção deveria ter uma tag <main> para identificar seu conteúdo principal. Há outras soluções mais fáceis para resolver o posicionamento dos elementos na tela, uma delas é utilizando CSS Grid e FlexBox. Até mais \o/ Happy code!

  Marked as helpful

  0

  ---

  

  Lara Fernanda•400

  @Lara123-pgPosted almost 3 years ago

  @palharesmagnon Olá, agradeço pelo seu feedback, vou estudar mais essa parte da semântica e do CSS Grid e FlexBox. Obrigada pelas dicas.

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job Lara

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

  Keep up the good work!

  Marked as helpful

  0

  ---

  

  Lara Fernanda•400

  @Lara123-pgPosted almost 3 years ago

  @Crazimonk Thank you for the tips.

  1