3-Column Preview Card site using Bootstrap

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is good, however the mobile state, the layout is too squeezed, you may need to check and refactor some stylings in mobile layout.

  hardy already some great suggestion, just going to add some:

  • Firstly, if you are starting out with your web career, never use a framework. Use just pure css or scss, this will make you more knowledgeable about stylings. What you did in bootstrap can be exactly replicated in just css, go fundamentals first okay:>
  • Always have a main element on your webpage. This helps users to properly navigate your site. On this one, the .container could use a main element instead of div.
  • Avoid using multiple h1 on a webpage. Change those h1 to h2. But a webpage needs to have atleast 1 h1. On this case, the h1 would be a screen reader only text. It would have a sr-only class, you can search this stylings in google. Apply it in the h1 element. The h1 could be:

  <h1 class=sr-only> Frontendmentor car collections examples </h1>
  

  • The learn more should be a link, using a tag and not button. Use button if it will act like a control for something. But on this, it is treated as a link, go a tag.

  Lastly mostly on your part, change some mobile stylings. Make it look good in mobile state. Aside from those, great work once again.

  Marked as helpful

  1

  ---

  

  Syllight•35

  @SyllightThewayPosted about 3 years ago

  @pikamart Thank you so much for the advice! I'll currently new to the path web development and this advice will greatly help me with future projects!

  0
• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  Hey good job.

  Few suggestions:

  • try to give cards little small width size, they are too wide on desktop.
  • On mobile view it is exactly opposite they are to slim, that's because you are using to big padding, instead of padding use container with wraps all 3 cards and gave all max width, let's say 1100px to that container, then use margin: auto; to center that container..

  4

  ---

  

  Syllight•35

  @SyllightThewayPosted about 3 years ago

  @hardy333 Thank you for the advice! Greatly appreciate it!

  0