Huddle LP w/ Curved Sections (Vanilla CSS + Custom Logo)

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi Lucas,

  Awesome job on the challenge as always

  Just something small I picked up on mobile, card-2 needs to flip. the illustration is below the text

  article.card.card-2 {
      flex-direction: column;
  }
  

  and the logo and button pushes up against each, should just stack I think.

  Marked as helpful

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @hyrongennike Oh thanks Hyron! I wasn't aware of that. I'll fixit asap.

  0
• 

  P

  Vander Santos•1,750

  @vandermsPosted about 2 years ago

  E ai Lucas! Parabéns pela sua solução. Ficou excelente!

  Quanto a estrutura do HTML e o problema com as landmarks, eu acredito que você fez algumas opções pouco usuais.

  Mas antes, uma breve explicação: existem basicamente duas estruturas tipicas para uma pagina:

  <nav>...</nav> <main>...</main> <footer>...</footer>

  <header>...</header> <main>....</main> <footer>...</footer>

  A escolha entre a primeira e a segunda depende de se você considera ou não a parte de cima da página como um cabeçalho (banner landmark) ou como uma simples barra de navegação (nav landmark). Mas geralmentes ambas escolhas justificáveis e são válidas.

  Então, por escolha pouco usual, eu me refiro ao fato de vc aparentemente ter colocado a barra de navegação dentro de <main>. Difícil considerar ela como parte do conteúdo principal.

  Por outro lado, você colocou algumas seções fora de <main>. Dá para fazer isso? Sim, mas uma <section> precisa ter o atributo aria-label ou aria-labelledby para ser considerada uma landmark. Como você não usou nenhum desses atributos o validator apontou o erro.

  Mas pra mim o principal problema é que se você não considera tais seções como parte do conteúdo principal, você deveria ter usado <aside> e não <section>.

  Resumindo, existem diferentes formas de você resolver esses problemas: .e.g. adicionando aria-label ou aria-labbeledby as sections, colocando elas dentro de main, substituindo elas por aside.

  Espero que as dicas tenham ajudado e continue sendo uma inspiração para toda a comunidade.

  Marked as helpful

  0

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @vanderms Valeu Vander! Vou arrumar tudo isso.

  0
• 

  Miran Legin•680

  @miranleginPosted about 2 years ago

  Hi Lucas,

  you did a great job on this challenge but i think you can improve it even more with couple minor adjustments:

  1. if you look at the page at 421px you can see in the header that the logo is overlapping with the button. @media (max-width: 420px) { .flex-header {...
  2. social icons in footer are kinda messy when you hover over them, i will suggest making link slightly taller and animate only the icon inside the <a> tag
  3. also minor visual adjustment regarding little bit of padding on the newsletter input just to make some extra room for text

  Other than that great job, i really like the logo animation!

  Keep coding!

  Marked as helpful

  0

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @miranlegin Thank you Miran! I'll fix it ASAP.

  0
• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Falaa lucas! tudo bem?

  Parabéns pelo resultado do desafio, é sempre muito legal olhar os seus projetos e observar o tanto de mudança que você faz neles.

  Tenho uma dica que julgo que é valido citar:

  Os níveis de título devem aumentar apenas em um, os títulos devem estar em uma ordem lógica válida, o que significa que h1as h6tags de elemento devem aparecer em ordem decrescente sequencial. Link do artigo: click here

  O resto está insanoo!

  Tamo junto man! 👍

  Marked as helpful

  0

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @AdrianoEscarabote Vou ajustar aqui e os outros erros de validacao alguma ideia de como corrigir? tem uns 6

  1

  

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  @correlucas Sim! Para podermos arrumar isso podemos fazer deste modo:

  Temos que certificar que todo o conteudo esteja contido em uma região de referência, designada com elementos de referência HTML5 ou regiões de referência ARIA.

  Exemplo:

  elementos de referência HTML5 nativos:

  <body>
      <header>This is the header</header>
      <nav>This is the nav</nav>
      <main>This is the main</main>
      <footer>This is the footer</footer>
  </body>
  

  As práticas recomendadas de ARIA exigem o uso de elementos de referência HTML5 nativos em vez de funções ARIA sempre que possível, mas a marcação no exemplo a seguir funciona:

  <body>
       <div role="banner">This is the header</div>
       <div role="navigation">This is the nav</div>
       <div role="main">This is the main</div>
       <div role="contentinfo">This is the footer</div>
  </body>
  

  É uma prática recomendada conter todo o conteúdo, exceto links para pular, em regiões distintas, como cabeçalho, navegação, principal e rodapé.

  Link para ler mais sobre: click here

  1
• 

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted about 2 years ago

  I really need information on how you added those curvy backgrounds, I'm doing this project now and i need help in that area.

  2

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @chukwudobe-Micah The curvy backgrounds are svg images and I've added them with as an html element with <img> making it a display: block / width: 100%. The image files are inside the starter files from FEM.

  0

  

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted about 2 years ago

  @correlucas yes, there are. But how did you make an SVG that's in your html a background image?

  Edit: I think I just figured it out, it's a combination of background SVG and background color. Am I right?

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @chukwudobe-Micah is not a background is in the first row of each section. Check my repository and you'll see every curvy img on top of each section.

  0

  

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted about 2 years ago

  @correlucas yes, I just realized it's not a background, my big mistake was that I was trying to make it a background cause it looked like it's a background, it was really deceiving my eyes, thank you.<3

  0
• 

  Osama•20

  @osama806Posted about 2 years ago

  Hi @correlucas

  don't show image in my solution, why in your opinon? https://www.frontendmentor.io/solutions/qr-code-solution-HSyW7tAnDh

  although show image in preview site ==> https://osama806.github.io/QR-code/

  If you have a solution

  can you help me understand this problem ???

  0

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @osama806 Update the screenshot the preview site is yet displaying the image

  0