I need comments and review on this guys. thanks for the comment have made changes to my code. have leant something
Lahan
@lahanhelithAll comments
- @AlbanDavid494Submitted 9 months ago@lahanhelithPosted 9 months ago
Hey man!
You have done an OK job with your solution but it seems you had trouble centering it horizontally and vertically. For this, you can use CSS Flexbox on the body by using this code in CSS.
body{ display:flex; margin:0; min-height:100vh; align-items:center; justify-content:center; }
If you have no idea about what Flexbox is or how you can work with it you can watch this video which explains the concept quite clearly.
Also, there are some things you can change within your HTML such as using a <main> element to contain your card content which does not impact how it looks and using an <h1> tag with a reduced font size which aids in SEO.
Furthermore, it is possible to make the card look responsive on all screen sizes without using a media query which I would suggest you try to achieve.
Good Luck with your Frontend Journey!
0 - @andersentessSubmitted 9 months ago
I am brand new to coding - I finished an online workshop at the end of last year and took a few months off due to illness. I am just getting back in the swing of things and I wanted to begin with a straightforward challenge. This is my first time submitting one on frontend mentor so any processes I need to change I am welcome to all feedback.
Much appreciated!
@lahanhelithPosted 9 months agoHey man. You have done an awesome job with the challenge!
There is only a very minor problem in the CSS where you have set
transition-property:all
for your hover transitions. This won't be a huge problem in small web pages but it can negatively affect the performance of a larger application.Instead, it's good practice to only set transition properties to what you are trying to animate.
Kevin Powell explains this in this video.
Marked as helpful0