Project Tracking Intro Component Master

Community feedback

• 

  Bernardo Poggioni•6,770

  @R3ygoski

  Posted about 1 month ago

  Olá mais uma vez Evellyn, e mais uma vez parabéns pelo projeto.

  Sobre suas dúvidas vou começar pelas unidades de medida.

  • px essa é uma unidade absoluta, ela sempre tem o mesmo valor de sempre, 100px é 100px sempre, independente do navegador e/ou tamanho de fonte escolhido.
  • rem essa é uma unidade relativa, ela tem o valor baseado no tamanho de fonte do seu projeto, vamos supor que no seu html {} você passe um font-size: 24px;, nesse caso 1rem equivale a 24px. Por padrão o 1rem vale 16px ou o tamanho de fonte definido no seu navegador, na parte de configurações. Tanto que na maioria dos caos que for utilizar tamanho de fonte, é recomendado utilizar rem, porque ele se adapta e é responsivo.
  • % essa é uma unidade relativa, ela se baseia no tamanho do elemento pai, ou seja, suponhamos que temos uma <main> com uma <aritcle> dentro, a <main> tem 600px de largura, e <article> tem 50% de largura, ou seja, article tem 300px de largura porque é o 50% do elemento pai, se fosse 20% por exemplo, daí seira 120px.
  • vh e vh ambas são relativas e são baseadas na viewport do seu navegador, o vw é para a largura e o vh é para a altura, o que grosso modo significa a parte onde fica sua página, por exemplo, essa barra de cima que dá pra inserir URL ela não é parte da Viewport, agora onde está aparecendo esse site é.

  Sobre flex bom, ele é utilizado sempre para fazer alinhamento unidirecional, ou seja, da esquerda pra direita, de cima pra baixo e vice-versa. É bastante utilizado para centralização e alinhamento, mas ele pode acabar deixando o HTML verboso caso você tente utilizá-lo para alinhamento bidirecional. Para alinhamento bidirecional o ideal seria o grid. Bom eu criei esse exemplo aqui no CodePen do qual você pode dar uma olhada nos casos em que cada um cabe melhor: Flex e Grid - Codepen.

  Sobre acessibilidade, quando você for criar links utilize sempre a tag <a> (com exceção do NextJS). Na sua ul dentro de cada li poderia ser colocado um a dessa forma:

  <li>
    <a href="#">Nome</a>
  </li>
  

  E sempre utilize o "#" para que não seja enviado a outro link e mantenha na página atual, e também note que tags <a> sempre devem ter um href.

  E sobre semântica, há apenas um trecho que vejo possibilidade de melhoria, que seria:

  • div.nav-list poderia ser alterada para uma nav e manter essa ul devido a esses links serem para navegação interna da página. Agora para casos de navegações externas utilizamos apenas o ul sem o nav.

  Sobre estrutura, a div.container que contêm a imagem, ela está sendo redundante, você pode remover ela que não causará nenhum problema no layout.

  E agora sobre o CSS, uma dica é de sempre utilizar no seu body a propriedade: min-height: 100vh;, isso garante que o tamanho mínimo da tela sempre será de no mínimo 100% do tamanho da viewport.

  E na imagem, remover o width: 1200px fará com que ela não fique cortada.

  E é isso! Novamente parabéns pela conclusão do projeto, ele ficou muito bem-feito, caso tenha ficado qualquer dúvida, já sabe, só perguntar abaixo que tentarei ajudar da melhor forma possível.

  01

  Marked as helpful
• 

  Harsh Kumar•3,410

  @thisisharsh7

  Posted about 1 month ago

  Hi Evellyn! 😊

  Great job on your project! Making a website responsive can be really tricky, so it's awesome that you kept going and made it work across different screen sizes.

  Here are a few simple tips that might help:

  Flexbox

  Try starting with just these properties:

  • display: flex
  • justify-content
  • align-items
  • gap

  These can help a lot in placing elements without writing too much extra CSS.

  Choosing Units

  • Use rem for font sizes and spacing — it's scalable and easier to manage.
  • Use % when you want something to adjust based on its container.
  • Use vh and vw for full-screen sections.
  • Avoid px for layout unless it's really needed — it can make your design less flexible.

  HTML Structure

  Your HTML structure looks really clean — nice job using <header>, <main>, and <nav>!

  A few quick tips:

  • Use <a> tags inside your nav list for better accessibility:

    <li><a href="#">Product</a></li>
    
    

  • If your buttons are meant to navigate, use styled <a> tags instead of <button>:

    <a href="#" id="demo">SCHEDULE A DEMO</a>
    
    

  • Add meaningful alt text to your images for accessibility:

    <img src={Logo} alt="Company Logo" />
    
    

  You're on the right track — keep going! 🚀

  01

  Marked as helpful