@bennk0509Submitted 29 days ago
Latest comments
- P@SimonCassanPosted 29 days ago
Hello,
You forgot to include the quotation marks in the background of the first card. The box shadow is also missing on those cards, and you didn’t replace the placeholder text in the title and the attribution block.
Additionally, avoid putting styles directly in the HTML — use a linked stylesheet instead. You should also try to include the font directly in your CSS rather than linking to Google Fonts. This improves performance and enhances user privacy.
Good job on the use of CSS Grid!
0 - P@VirginiaPatSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I enjoyed building this project. For the first time I used css variables and BEM methodology for the class names.
What specific areas of your project would you like help with?You are welcome to leave any feedback!
P@SimonCassanPosted about 1 month agoThe minimum screen width you should support for the mobile layout is 320px.
While calc() is a useful tool, it’s best to use it sparingly to maintain clean, readable, and maintainable code. Overcomplicating layouts with too many calculations could make the CSS harder to manage, especially in larger projects.
Your tablet design looks great—well done!
0 - P@Oliko136Submitted about 2 months agoP@SimonCassanPosted about 2 months ago
Feedback
-
For your CSS reset, you can directly use the following rule:
*, ::before, ::after { margin: 0; padding: 0; box-sizing: inherit; } -
Never combine max-width and min-width in your media queries. You need to choose only one.
-
You should apply a max-width to your main content with fixed margins and then center it using Flexbox. This will improve the appearance on medium-sized screens and allow for smoother expansion on larger screens.
Marked as helpful0 -
- @internetcode999Submitted about 2 months agoP@SimonCassanPosted about 2 months ago
Great job! The card looks good, but it appears a bit too small on larger screens. Instead of using width/min-width, consider applying a max-width with some margin-left and margin-right to ensure there’s free space on smaller screen-sizes.
Happy coding! 😊
0 - @Ali-LearnerSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
Proud of making the design as similar as possible
What challenges did you encounter, and how did you overcome them?CSS optimization is the main challenge I encounter and I am not able to solve it
What specific areas of your project would you like help with?CSS optimization is the main challenge I encounter
P@SimonCassanPosted about 2 months agoHello, You’ve done a great job overall! I do have a few suggestions for improvement:
HTML Enhance your semantic markup by adding <main> and <footer> elements where appropriate. Always include an <h1> element and ensure you don’t skip heading levels. Avoid using HTML elements like <strong> purely for styling; instead, use CSS for visual presentation.
CSS Consider using rem for padding and margin values—it’s generally a better practice for scalability. Adding a fixed width or max-width to your <img> elements would improve the layout on very large screens. You might want to add align-items: center; to your .profile class for better alignment. The layout is not fully responsive for mobile. Replace width: 25% on the card with a max-width to improve its adaptability on smaller screens.
Keep up the great work! 😊
Marked as helpful1 - @soldochrisSubmitted 2 months agoP@SimonCassanPosted about 2 months ago
From a semantic point of view, your card should have been a div and not directly using the main.
Centering it using and absolute position is maybe a good idea.
Marked as helpful1
