911 what's your emergency? HELP I HATE LISTS AND TABLES!!!!

Community feedback

• 

  P

  krru09•150

  @krru09Posted 6 days ago

  Hi there, good work on completing the challenge. Here's some tips for the ul/ol li trouble that might help:

  1. You can use list-style: none to remove default markers
  2. Inside the li you can wrap a <span> with the number - this makes styling the li much easier and the span can apply the styles necessary to make the marker look like the design
  3. display: flex and align-items: center the li elements

  good luck!

  Marked as helpful

  1
• 

  Flamick•305

  @FlamickPosted 6 days ago

  I found a solution to the UL LI problem. I wrapped the entire li element in a span and then I targeted that span and made it display: inline-block; and vertical-align: middle; I hope that helped

  Marked as helpful

  1
• 

  Bernardo Poggioni•6,390

  @R3ygoskiPosted 6 days ago

  Olá mais uma vez Bianca. Parabéns pela conclusão de mais um projeto aqui do FEM, ele está bem próximo do design proposto.

  Parece que você já conseguiu corrigir o problema de alinhamento nas listas, pois testei e não vi nada desalinhado. Até cheguei a apagar alguns trechos do CSS pra ver se desalinhava, e nada.

  Sobre o line-height não ficou claro pra mim o problema, tanto que você mencionou o gap. Para usar o gap precisa de usar flex ou grid e como suas listas não utilizam nenhum desses, ficou meio confuso pra mim.

  Já sobre a forma que você utilizou para alinhar os marcadores e texto, acredito que você esteja falando sobre o espaçamento entre eles, certo? Porque se for, a maneira que você fez, utilizando o ::before está correta. Existe uma outra forma, que seria utilizando uma tag <span> dessa forma:

    <ul>
      <li><span>1</span></li>
      <li><span>1</span></li>
      <li><span>1</span></li>
    </ul>
  

  span {
    margin-left: 1rem;
  }
  

  Essa foi a forma mencionada pelo Flamick, só que note que o <span> não pode cobrir a tag <li>, mas sim estar dentro dela.

  Sobre as cores, seu título está usando as cores #000, só que no desafio ele seria a hsl(24, 5%, 18%) (Stone 900).

  Sobre a Tabela, ela também está bem-feita, tanto em semântica quanto em estilização, então não creio que ela precise ser alterada.

  E sobre o clamp() como você tentou utilizá-lo? Vou usar o seletor main para exemplificar o uso dele. No seu seletor main apague o min-width e adiciona no seu width esse clamp(): clamp(375px, 90%, 740px) , isso fará com que o seu card tenha o mesmo comportamento.

  E agora sobre o seu CSS, existem várias dicas para melhorar o CSS, como por exemplo separar seletores por prioridade, colocando de cima pra baixo:

  • seletores de elemento (main, body, li...)
  • seletores de atributo ([type="text"], [alt]..0.)
  • seletores de classe (.inst,.ing,.Ing...)
  • seletores de id (#id-um, #outro-id, #meu-id...)

  Obs.: Isso ajuda muito na legibilidade e manutenção do código, também evite deixar espaços em branco dentro dos seletores.

  Outra dica seria usar múltiplos arquivos CSS, tendo por exemplo um responsive.css, reset.css, etc. Daí pra importar você pode usar um @import no topo do CSS e passar o caminho do CSS alvo, ou importar todos via <link> do HTML (mesma coisa que isso: <link rel="stylesheet" href="style.css">)

  Outra seria utilizar Nested CSS mas pra isso eu recomendo usar SCSS ao invés de CSS, já que tem mais funcionalidades e é bem melhor.

  Outra seria utilizar comentários para definir secções.

  Agora sobre o HTML, recomendo você utilizar nomes de classes que sejam mais descritivos, pois isso ajuda na legibilidade do código, por exemplo:

  • Ao invés de ing utilizar ingredients-list.
  • Ao invés de Ing utilizar ingredient, ingredients-item ou ingredients-list-item.
  • Ao invés de prepT utilizar preparation-time.

  Isso ajuda a deixar mais organizado e fácil de manutenção, pois é difícil entender o que significa Ing a primeira vista.

  E ainda sobre nome de classes, é convenção no CSS utilizarmos kebab-case, ao invés de camelCase, tanto que eu recomendo utilizar de fato kebab-case ou snake_case, que é mais simples de ler. Já o camelCase recomendo que seja apenas utilizado no JavaScript, pois essa é a convenção do JS. Mas claro, isso não está errado, é só que é uma boa prática seguir as convenções.

  E pra finalizar, sobre o HTML, as tags de headings estão seguindo uma hierarquia, só que elas não estão corretas, pois Ingredients, Instructions e Nutrition são subtítulos da página, ou seja, esses trechos são na verdade todos <h2> e Preparation time é um subsubtítulo então ele seria <h3>.

  E é isso, novamente parabéns, você está evoluindo bem, continue praticando e se aprimorando. Caso tenha ficado qualquer dúvida já sabe, tanto que reitero aquilo que falei, se quiser uma ajuda In-time, basta me mandar uma mensagem no LinkedIn ou Discord, você encontra ambos no meu Github.

  0