Html, Css and JavaScript

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 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;
  }
  

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

  main {
    margin: 0 auto;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  RESOURCE TO IMPROVE YOUR PROGRAMMING 💡:

  • There are many excellent websites and online resources to help you improve your JavaScript programming skills.

  • Here are two best options:

    • MDN Web Docs, MDN offers comprehensive documentation and guides on JavaScript. It covers everything from basic syntax to advanced topics.
    • "Eloquent JavaScript" is a popular book by Marijn Haverbeke, and the full text is available online. It's highly regarded for its clarity in teaching JavaScript concepts.

  • Remember that improving your programming skills takes time and practice. It's essential to not only read and watch tutorials but also to write code, work on projects, and seek feedback to truly master JavaScript.

  ---

  .

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

  Happy coding!

  0

  ---

  

  Mailoon01•70

  @Mailoon01Posted about 1 year ago

  @0xAbdulKhalid I think there is an error when you tell me to use margin or padding; the element I pointed to in the CSS body>div { margin: 2% 0; } doesn't exist. I made a mistake; it was a test I was doing, and I completely forgot to delete it. You're welcome for your advice; I will put them into practice.

  0