@kaneki-codesSubmitted 4 months ago
Latest comments
- @cosminbordianuPosted 2 months ago
Congratulations on finishing this project! First of all, I’m also a beginner, so I’ll try my best to offer some advice, but please take it as such. HTML:
- Use semantic elements (<main> and <footer>): Instead of relying solely on <div> elements, using semantic tags like <main> and <footer> helps improve the accessibility and structure of your document. This practice enhances readability for both developers and search engines.
- Replace <div> with <section> where appropriate: While <div> elements are common, <section> provides more semantic meaning when grouping related content. It also aids in creating a more organized and understandable HTML structure.
- Ensure all <img> elements have alt attributes Adding an alt attribute improves accessibility by providing alternative text for screen readers. Additionally, it offers context when the image fails to load.
CSS:
- Utilize global CSS variables: Example:
:root { --background-color: hsl(30, 54%, 90%); }Defining reusable CSS variables can simplify color management across your stylesheet. This approach ensures consistency and makes future updates easier. 2. Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles. 3. Fix the incomplete font-family declaration There’s an error at line 14 where font-family: is declared without specifying a value. Make sure to complete the declaration. 4. Address layout issues on smaller screens In your body styling, using padding-left: 60px; causes alignment problems when the viewport is minimized. You need to add padding right (and consider using relative units like rem/em)
body { padding-left: 3.75rem; padding-right: 3.75rem; }Great job overall! Wish you nothing but the best of luck! Keep up the great work! 😎
0 - @akiracodeninjaSubmitted 3 months ago@cosminbordianuPosted 2 months ago
Congratulations on finishing this project! First of all, I’m also a beginner, so I’ll try my best to offer some advice, but please take it as such.
HTML:
- You can replace the <div> elements with the class "link" by using <a> tags instead. This will semantically improve the structure since links are meant to be represented by anchor tags.
CSS:
- Use relative units like "rem"/"em" instead of px for margins, padding, and font-size because it’s better for accessibility. This ensures that the layout scales more easily for users who adjust their font size for readability.
- Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
- In the actual design the background color of the links change when you hover over them.
Overall, it is a solid project. Keep up the good work!
Marked as helpful1 - @Perfect-PatienceSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud that I paid extra attention to the Figma file and managed to get the card to look as close to the design as possible. I noticed details like the vertical gap and drop shadow measurements in the Figma file.
What challenges did you encounter, and how did you overcome them?The main challenge in this challenge for me was finding a way to adjust the widths of components based on the screen size without using the @media query. I researched and learnt of the clamp property in CSS which is what I used to obtain this effect.
What specific areas of your project would you like help with?I want feedback on whether I used variables properly in this project. And on anything I could improve.
@cosminbordianuPosted 2 months agoCongratulations on finishing this project! First of all, I’m also a beginner, so I’ll try my best to offer some advice, but please take it as such.
- Use relative units like "rem" instead of px for margins, padding, and font-size because it’s better for accessibility. This ensures that the layout scales more easily for users who adjust their font size for readability.
- Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
Also, just a small piece of advice: when asking for help with specific areas of your project, it can be more effective to directly ask about the things you're struggling with or don’t understand (it can be anything). I noticed that some solutions get reviewed quickly, and if you don't ask specific questions, you might end up with a response like, "You've done a great job." and then no responses after. I do have time to look at your code, but I’m still a beginner, so I tried my best to give you advice with the experience I have.
That said, thank you for sharing your solution! It helped me understand a lot, especially when it comes to adjusting screen sizes width and height, with properties like clamp() and fit-content. I’ve learned a ton from your work! Best of luck!
Marked as helpful1 - @baloriaakashSubmitted 3 months ago@cosminbordianuPosted 3 months ago
Hello! Congratulations on completing your first project on Frontend Mentor! I'm also a beginner, so I'll try my best to offer some helpful advice and feedback from my experiences. Please take my suggestions as optional—I'm still learning myself. These are just things I tried in my own project, and they might work for you too.
- Avoid using percentages for spacing (margins/padding) to ensure the layout is consistently spaced, especially for responsiveness. (it is much more easier to just use px or other fixed units: rem, em etc.)
- Replace the li tag with a more appropriate element, such as a div. If you want to keep the list structure, wrap the li elements inside a <ul>
- Avoid using position: absolute for elements that need to adjust based on the screen size. From my perspective, this is why the qr card is not responsive. When you use position: absolute, the element is taken out of the normal document flow, meaning it does not affect the layout of other elements on the page, and it doesn’t adjust dynamically based on the size of the screen or surrounding content. To fix this you can use CSS Flexbox or CSS Grid (Flexbox was easier for me and with 3 lines of code you can center any div).
What I like about your project:
- You linked the Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times. (I did this mistake and someone else pointed that out)
- Great job incorporating media queries into your project! It's a fantastic way to ensure that your website is responsive and looks good on a variety of screen sizes. It shows that you're thinking about the user experience on different devices, which is crucial for modern web design.
Conclusion:
Your project looks great for a first attempt, but there’s definitely room for improvement and further learning. While reviewing your code, I actually picked up a few tips myself! I wish you the best of luck on your learning journey.
If you’re looking to deepen your understanding of HTML and CSS, I highly recommend checking out the YouTube channels Kevin Powell and freeCodeCamp. Both offer excellent resources to help you grow your skills.
Best of luck with your future projects!
Marked as helpful1
