Fully Responsive Page on All Devices Using Boostrap 5 and CSS

Community feedback

• 

  hardy•3,640

  @hardy333

  Posted almost 4 years ago

  hey, website looks good. nice job.

  Few suggestions:

  • try to align huddle logo and big showcase image correctly on left size, for that I suggest you to use one container/wrapper div which will have some margin from left, your logo and image will be exactly the left side of that container.

  • Try to add box shadow on cta button and maybe some more hover effects on it...

  • In terms of using bootstrap, it is ok but you don't need bootstrap here, it will make your life just harder, this is very simple layout use instead vanilla css ...

  30
• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this. Layout looks good both desktop and mobile. The responsiveness is fine as well.

  I second to what hardy said about bootstrap. You don't need that in here. Go with just pure vanilla css or scss. That would make you much greater in stylings, do not go using framework.

  Some other suggestions would be:

  • The alt text for the website logo should be alt="huddle". The website logo already have the text on it, better use it as the alt value.
  • Always have a main element on a webpage. This helps user navigate properly within your site. On this, the div that captures all the layout should be the main tag.
  • The register should use a tag instead of button.
  • The register lacks a visual indicator on it. If you try using tab key in your keyboard, you won't see anything that indicates you are within the element. Use some stylings in the :focus-visible selector of that element. Apllying a outline or border or box-shadow.
  • The social media links should be inside ul element, each with their own li element, since those are list of links.
  • The a tag that wrap the social media link should have aria-label on it. For example:

  <a aria-label="facebook">
    { the icon in here }
  </a>
  

  This way, users will know where this link will take them.

  Aside from those, great work.

  00