build out news website homepage using create-react-app

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Ha Kyo, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

  To resolve do this:

  <a type="button" class="read-more-btn btn btn-warning btn-lg ">READ MORE</a>

  Every html document must contain a main tag, to inform what is the main content of the page, as this page is a complete page, that is, it has a header a main and the footer, wrap the main content with the main tag , for users who use screen readers, to be able to understand what the main content of the screen is!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Ha Kyo•40

  @kyo-is-my-nicknamePosted almost 2 years ago

  @AdrianoEscarabote oh I'm not pay attention about the main tag until you said. Thank you so much!

  1
• 

  Maxime•430

  @maxime927Posted almost 2 years ago

  Hi Kyo ! Hope you're fine. You're solution is almost close to the result it misses only few optimisations to fix the solution :

  • Since i'm checking every solution about this challenge, display:grid is not a good way to develop this design, it is not enough specific to get the design properly, i advise you to prefer display: flex you'll be able to fix some widths and heights specific to each bloc and adjust some alignements;

  • Usually, the designer and the customer worked hard to come to an agreement so, the closer we well be at the design the better. I advise you to use the chrome extension PerfectPixel to compare your development with a png/jpg file of your design. I always use this to be sure i'm ok with each breakpoints :)

  • Concerning responsive breakpoints : Even if the mobile design is 375px, let your breakpoint reach max-width: 768px, to let the mobile design expend until you'll be able to display the desktop properly for landscape tablet

  • Concerning the three columns section : you can put a fixed width to the image and align it to the top, it will look tidier ;)

  Keep going this way, Hope it helps...

  Maxime

  Marked as helpful

  1

  ---

  

  Ha Kyo•40

  @kyo-is-my-nicknamePosted almost 2 years ago

  @maxime927 thank you so much. It help me a lots. I'll fix following your advice!!!

  0