HTML, CSS, JavaScript, FlexBox, Responsive Grid etc..

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  hey Marufjan nice job there! 🙌 Looking good. Here's a few things you might like to consider:

  When working with h elements, it's best not to skip levels so only a h2 should follow a h1. At the minute you go from h1 to h4. I would just a h2 and then just use CSS to style it as you like.

  I might be missing your labels linked to your inputs, but I can't see them? Just in case, an input must always have a label associated with it.

  Here's a nice article that gives a good explanation of why this is: https://css-tricks.com/html-inputs-and-labels-a-love-story/ (you can always hide the label using CSS if you don't want people to see it)

  If you don't want the label to appear on the page you can apply a 'screen-reader-only' class to hide the content. If you google that you'll soon find lots of solutions and it's a good technique to be familiar with and it'll be useful in a lot of other challenges.

  Also on the inputs and buttons, if you remove outline styles then it is important to add back in your own custom outline styles as otherwise it can make it very hard for keyboard users to navigate the page.

  If you don’t like the default styles I have found the advice in this article very useful, and use it in pretty much all my projects: https://css-tricks.com/the-focus-visible-trick/

  /* Add styled focus states on tab not hover */
  
  :focus-visible {
    outline: 3px dotted currentColor;
    outline-offset: 0.25rem;
  }
  
  :focus:not(:focus-visible) {
    outline: transparent;
  }
  

  Hope this helps!

  Cheers 👋

  Dave

  Marked as helpful

  1
• 

  Mamatkulov Maruf•340

  @MarufjanPosted about 3 years ago

  Hi Dave! I appreciate all your work there. I will consider those things next time 😄 Thank you 🤗

  0