Responsive landing page using CSS grid

Community feedback

• 

  Andre Ferreira•450

  @Namonaki0Posted about 1 year ago

  Hi SHRIJA2, well done for completing the challenge.

  I've sent you a Pull Request with some changes that might help you achieve what you wanted. Don't need to merge it, it's just for reference and will hopefully be useful to you.

  Basically what I've done:

  • Simplified the CSS a little, mainly media-queries and selectors.
  • Main tag introduced to encapsulate the whole content of the challenge and since it is the most important content it makes sense semantically.
  • External div for each <section> has been removed as it didn't serve any particular purpose.
  • Transitions and cursor: pointer on element hover/focus introduced for better UX.
  • Skills score and images displayed dynamically making use of the json file provided.

  I merely looked at code readability and structure. Pixel perfecting would still need to be looked at and design guidelines would still need to be followed.

  Marked as helpful

  0

  ---

  

  Shrija2•100

  @Shrija2Posted about 1 year ago

  @Namonaki0 Thank you for your feedback. Really appreciate it.

  1
• 

  Ash3071•80

  @Ash3071Posted about 1 year ago

  Hi Shrija, display the container as flexbox. Child 1 for left side and child 2 for right side "Summary" box. Now use "Justify Content as Center" and "Align Items Center". This might be a easy and efficient fix.

  Marked as helpful

  0

  ---

  

  Shrija2•100

  @Shrija2Posted about 1 year ago

  @Ash3071 Thank you for your help.

  0
• 

  Lemnsa•110

  @LemnsaPosted about 1 year ago

  Hi Shrija2, I had issues with that too but I decided to set whole containers position to relative, then used top, bottom, right, left to adjust it's position.

  Marked as helpful

  0

  ---

  

  Shrija2•100

  @Shrija2Posted about 1 year ago

  @Lemnsa Thank you for the your reply. Will try it out.

  0