N/A
What challenges did you encounter, and how did you overcome them?This is just a revision challenge, been a while i touched a keyboard and i kind off lost my touch
What specific areas of your project would you like help with?N/A
Please let me know your Feedback <3
center your div by adding this to your body in css
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
and try to move your styles to a stylesheet to make your code clean, Overall, this is an awesome solution :).
I hope this has been helpful.
This challenge was relatively easy based on what I already know about HTML & CSS. Styling this was pretty straight forward when it came to the fonts, font-sizes and the image. As well as keeping this responsive for desktop and mobile.
My process was to complete the layout before centering the design. Once it came to that did I hit my first speed bump. Centering elements on a page seems to be a simple process however I've always had difficutly figuring it out. From using different methods like flexbox, grid and the famous absolute position. I decided to use flexbox for this solution however in future projects I think I would try absolute positioning again to get a bit of a refresher and to challenge myself more.
Once I was done I had a look at my code again to clean it up and make it more efficient. Overall this was a fun and quick project to build and I am looking forward to the next one.
What is your best case in centering elements on a page? I would love to know how and why you use a particular process to do so.
Happy coding everyone! DevDan
You should move all the codes in your main css to body, also add a flex direction: column to it and make your min-height: 100vh, By applying these styles to the body element, you create a flex container that centers its child elements both vertically and horizontally, I hope this has been helpful. Overall, this is a good solution :)
All feedbacks are welcome.
I think you may have reuploaded the base files instead of your completed work
How to properly position the card div in the center of the viewport (mobile and desktop)
Text style and positioning: "Improve your front-end skills by building projects", the sentence is not correctly align. I am not sure if it's the padding or the margin.. or anything else.
Position your body in css using display: flex flex-direction: column justify-content and align items: center min-height: 100vh this will put it in the center with the correct height
