I used VS code being new to developing. Documentation was my friend.

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted 6 months ago

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

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

  ---

  CSS 🎨:

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

  ---

  • We don't need to use margin to center the component both horizontally & vertically. It will help us to dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component.

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

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

  .main-container {
    margin: 500px;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  0
• 

  Lê Hoàng Long•290

  @JamesWallison1Posted 6 months ago

  Seeing that you have made some progress here, congratulation on completing the challenges! But on the other hand, I think we need to discuss about styling your project.

  • Firstly, let's talk about padding: I see that you are adding a real big amount of padding here compared to the first design so minimize it to be the same as the design is extrememly important.
  • Secondly is the border-radius: As I mentioned before, keeping as closest to the design as possible is really important when attending FEM. Your image here is currently having no border-radius, so it is better to add them. Try adjusting again and again, making your solution more successful will make you a successful developer!
  • Thirdly, we will discuss about your HTML file. Your HTML file here is fine from my perspective, but I have some comment: first, you shouldn't use inline style code, this can cause to easy breaking maintainace, for instance: you are linking a inline style code in your body, you can fix this by removing it and put into your css file (but I think no need to put into css file anymore because you have already linked a color in body)
  • Moving to the next section, I see that your container is not in the middle yet, you can fix this by adding margin: 0 auto, this will automatically center your card (also remember to remove that margin: 500px)
  • Also, I still have no idea why you make the text of the challenge to be border and background and this maybe not considered as a part of the challenge but if this is your purpose of making your own style then it's fine ;) No need to follow completely to the design.

  And you are good to go, thank you very much for reading this small comment, your project is successful and I hope those advices I gave you can help you on your way of becoming a successful developers. Again thank you for take time reading this comment!

  0