What challenges did you encounter, and how did you overcome them?
This was a very easy challenge as it only required HTML and CSS, that too very basic knowledge. However, I still struggled with centering the main div. I haven't overcome it properly but I did try a temporary solution. I took help from a few popular websites such as Stack Overflow and W3Schools. Other than that, it was fun coding this!
What specific areas of your project would you like help with?
Centering the div. Whenever I use margin: auto or any other common solutions, it sits in the center but not exactly at the middle of the page. It's stuck to the top. That's what I need help with.
Great job on completing your first project on Frontend Mentor! It’s an exciting milestone, and I appreciate your effort. 😊
Now, let’s address the issue you faced with centering a <div>. Centering elements can be tricky, especially when you’re just starting out. Here are some suggestions to improve your code:
Centering Elements:
Consider using Flexbox or Grid for more consistent results.
For horizontal centering, use justify-content: center; (Flexbox) or place-items: center; (Grid).
For vertical centering, use align-items: center; (Flexbox) or place-items: center; (Grid).
CSS Reset:
Consider using a CSS reset to remove default browser styles. This ensures a
consistent starting point for your styling.
EX:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
You should add it first thing in the CSS file using the universal selector *{ }
OR
add it to the body { }
Remember, practice makes perfect! Keep experimenting, learning, and building more projects. Happy coding! 🚀
