Loopstudios Landing Page - (SASS)

Community feedback

• 

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted 7 months ago

  Muito bom!

  Não tem muito o que falar na parte de html e estilização, você sempre trabalha bem com essa parte.

  Algo que eu recomendaria você ir pegando o jeito, seria em deixar os seus commits mais profissionais. Existe alguns padrões que você pode seguir, mas a parte principal é seus commits serem mais descritivos. Exemplo:

  • Seu segundo commit: dot. O que isso significa? Não tem como saber só vendo o nome, então se você precisar restaurar algum commit antigo por qualquer motivo que seja, ou algum outro dev precisar fazer um review, vai ser difícil você lembrar o correto. A mesma coisa com o último commit, que diz fixes, mas fixes do que?

  Agora se você descrevê-lo como: Fix: Correct image paths to resolve broken images. Aqui você já sabe só de ler o commit o que foi feito. Se você não souber o que escrever, joga no chat gpt o que você fez, e pede pra ele te dar um commit. Por exemplo: "I added media queries to handle responsiveness, and changed some values from font sizes (I'm using clamp() in css so it handles responsiveness better. What's a good commit?". Nisso o chat gpt me deu: "feat: Add media queries for responsiveness"

  Sobre esse fix, feat, e afins que vem antes do commit, é um dos padrões que alguns usam que o github recomenda. Você pode ler mais sobre nesse artigo!.

  Marked as helpful

  1

  ---

  

  Daniel 🛸•44,270

  @danielmrz-devPosted 7 months ago

  @LucianoDLima

  Você tem toda razão quanto a isso. Nunca liguei muito pra fazer commits mais descritivos, já que sou só eu mesmo que vejo e eu uso mais pra estudar. Tem até alguns commits que eu só coloco umas letras aleatórias, tipo "lisgwabfs" porque não dá pra mandar vazio kkkkkkk

  Eu nunca tinha me atentado a esse aspecto, valeu pela dica Luciano!

  0
• 

  P

  gabrieltrtl•580

  @gabrieltrtlPosted 7 months ago

  Muito bom irmão! você é fera ;d

  2

  ---

  

  Daniel 🛸•44,270

  @danielmrz-devPosted 7 months ago

  @gabrieltrtl

  Valeu, Gabriel! Praticando todo dia pra tentar melhorar 🙏🏽

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted 5 months ago

  Congrats on completing this challenge! You marked your challenge as "Accessible", unfortunately, it is far from it...

  Regarding building the mobile nav without JavaScript should be avoided at all cost at is makes it extremely unaccessible.

  • In mobile, even though your nav menu is hidden, users are still able to select the links.
  • aria-labels and alt are being use incorrectly.
  • buttons are being used in situations where they do not make sense.
  • When a keyboard is used to interact with the "creations" they are skipped.
  • etc...

  • The site logo doesn't need an aria-label since it is an img and you did not make it interactive; the alt is more than enough and it should only say "Loopstudios - Home" (this goes for the footer logo also).

  • The nav button has to be inside the nav element to make sense and it should have an aria-label, aria-expanded and aria-control. Delete this, <label for="menu"></label> and add <img src="images/icon-hamburger.svg" alt=""> to the button.

  • When the nav is open, the scroll on the body should disabled and only the scroll on the nav should be enabled.

  • The img for the "The leader in interactive VR" is purely decorative, so its alt tag should be left blank.

  • The "See All" buttons should be built using the anchor element since this "button:" would definitely direct users to another part of your site.

  • The project cards are perfect candidates to use the figure and figcaption elements.

  • Only the project text should be inside the anchor element. You will then use absolute / relative to make the entire card interactive.

  • Remove all the br elements; they are inconsiderate to screen reader users.

  • The footer links should be wrapped in a nav along with an aria-label.

  • For the social media logos, it should look like this;

  <a href="#" aria-label="Facebook">
     <img src="images/icon-facebook.svg" alt="" >
  </a>
  

  • There is still more things that need improvement, but this should be good for now...

  If you have any questions or need further clarification, feel free to reach out to me.

  Good Luck and Happy Coding!

  0

  ---

  

  Daniel 🛸•44,270

  @danielmrz-devPosted 5 months ago

  Tks 👍🏽

  0