MOBILE-FIRST WORKFLOW

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

  ---

  body {
    min-height: 100vh;
    justify-content-center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .container {
    margin: 1.2rem auto;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Michael Chukwu•360

  @Mike-DavePosted over 1 year ago

  @0xAbdulKhalid Thank you so much for your time. I found your feedback really helpful. I will do as you advised.

  Happy coding!

  0
• 

  Shivraj K•400

  @Shivraj-K09Posted over 1 year ago

  The code looks good and well structured. Here are some suggestions to further improve the code:

  • Accessibility: Add a descriptive alt attribute to the img element. This will help screen readers give more context about the image to users with accessibility needs.
  • Use semantic HTML: Consider using semantic HTML tags like <header>, <main>, and <section> instead of <div>s. This will make your code more accessible and easier to understand for people using assistive technologies like screen readers.
  • Consistency: For consistency purposes, try to use either a hyphen or an underscore when naming classes. In this code snippet, both conventions are used, which can be confusing for future developers working on the code. And Happy Coding 😉

  Marked as helpful

  1

  ---

  

  Michael Chukwu•360

  @Mike-DavePosted over 1 year ago

  @Shivraj-K09 Thank you for your time. I will be updating my code soon, like you suggested. I have two questions:

  1. Can you like pin-point the occasions where I used different naming coventions as I am not able to find it in my codebase? And yes I understood what you meant about the naming convention.
  2. How do I master the usage of semantic HTML because in some cases I can't tell if somthing is a headeror section or aside ?
  3. I mean I know semantic HTML tags but sometimes the design doesn't tell which is which, I don't kow if you get me. Once more thank you so much. HAPPY CODING 😌

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center .container on the page using flexbox instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Michael Chukwu•360

  @Mike-DavePosted over 1 year ago

  @Hassiai Thank you so much for taking your time to look into my work. I have noted your corrections and will be updating my project as you suggested. You were very much helpful.

  HAPPY CODING!

  1