I know we are not saturday but I finished the challenge earlier that It seems. 🙂
You can see here my solution. Do not hesitate to leave a comment if you have some advice or code improvement. I'm open for all feedback. 🙃
Can you tell me what challenge can I do next ??
Thank you all !
Have a nice week ! 😉
Hi Andri, congrats on finishing your latest project.
To center your card, you can use absolute positioning. To try it out, add the following css lines to your container class:
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
If you try your website on smaller screens, you will notice that it overflows, for better responsiveness, you can:
1 - use the rem unit instead of px.
Each rem equals 16px by default, to avoid impossible rem to px calculations, you can set the font-size of your <html> element to 62.5% which is the result of 10[px] * 1[rem] / 16[px], this will make each rem equal to 10px.
2 - use media queries
Good luck!
Your HTML and CSS are well structured, well done!
It seems you tried centering the main element using margin, while that helps on the X axis, it;s not much help if you wanted to have it shown perfectly in the center of the screen. For that I suggest you remove the margin and add the folowing styles to your <main>:
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Good luck!
In this solution I have put into practice some topics that I have been learning in JavaScript, such as form validation, adding HTML content from JS and well I am happy with the final result, maybe I need to improve my code, but I think I am progressing in the short time I've been learning this programming language.
If you have any comments or recommendations. I gladly read them.
Hi Jonathan, not only does your app's UI look awesome, you've done an amazing job with vanilla JS, well done!!
If you are concerned about small devices trying your website, you may want to add additional media queries for that, your UI on devices smaller than 300px for example starts overflowing, to fix this you may want to decrease the grid-template-columns to two columns per row.
Good luck!
I'm not sure how to make the html, do I put too many div? what do you think?
Congrats on your first project on frontend mentor, Benjamin.
The html seems good to me, the css on the other hand is not.
@media queries are meant to add changes for different viewports, they don't interfere with the browser's access to the lines above or below it, that's why you don't need to include the whole styling of your website within every media query (:root variables can stay outside, on the top of your css file, unless they are meant to add changes for smaller or larger screens).
To learn more about stlying responsive websites, I suggest you start with the following youtube video: https://www.youtube.com/watch?v=VQraviuwbzU
Good luck!
Feedback Appreciated
Hi Meqdad,
The UI is good, I noticed you left the <img> alt attribute empty, it's important to be filled with the right information for search engines to know the content of the img, and for users who rely on accessibility features to navigate through your website.
It seems the quotes you used so far are static, working with APIs is always a good idea since they come with their own challenges.
Good luck!
have I named the classes correctly? have I used the right units? have I used HTML5 Semantic tags correctly? any hints about the structure of the CSS in general?
Hi Mohamed, congrats on your finishing your first project on Frontend Mentor!
Yes, you used the right units, your HTML5 semantic tags are good too.
The structure of css is alright except for the way you named some of your classes using the BEM method, for instance, I would have named the card__heading class as card__body_heading since it is a direct child of the card__body class, this would come in handy especially when using scss.
