@luizaisok
What are you most proud of, and what would you do differently next time?
I'm proud that I did it. I learned to do some thigs in less code and I would like to practice more of that. (sorry not my fisrt lang :c)
Latest solutions
Latest comments
- @RasMurph420
Your code looks great! It successfully creates a well-structured and styled social links profile page.
Suggestions for Improvement:
Responsiveness: Currently, the width of the card is fixed at 500px. Consider using media queries to make the layout responsive and adapt to different screen sizes.
Font weight: While you've set font weight for different elements, you can explore further adjustments for subtle visual hierarchy.
Margin and padding: The margin and padding values can be further fine-tuned for better spacing and balance within the card.
Overall, you've built a solid foundation for your social links profile. With these minor tweaks and further exploration, you can create an even more polished and responsive design
Marked as helpful - @Versatile28@RasMurph420
The HTML is well-structured, making it easy to follow the content flow. Good use of semantic elements like <h3> for the title and <p> for the brief.
The CSS is well-organized and follows a clean approach with variables, which is great for maintainability.
Adding transitions to the hover states, especially for the category link, gives a smooth interaction feel.
The dimensions, particularly the 375px width, suggest you’re targeting mobile devices first, which is a smart move.
- @MindCode-89@RasMurph420
HTML Review Strengths Semantic Structure: You’ve used semantic HTML elements like <main>, <section>, and <div>, which helps improve the readability and accessibility of your code. Viewport and Favicon: Including a viewport meta tag and a favicon is good practice for mobile responsiveness and branding. Font Loading: You’ve efficiently preconnected to Google Fonts, which can improve loading times for the font. Areas for Improvement Image Alt Text: The alt attribute for the image should be more descriptive. Instead of alt="images-QR_CODE", consider using something like alt="QR code linking to Frontend Mentor". This helps with accessibility. Consistent Naming Conventions: Your class names vary in style (e.g., content_images_qr_code vs. content_title). Choose a consistent naming convention (e.g., camelCase or kebab-case) for better readability. Accessibility: Consider wrapping your main content in a <header> and <footer> for better semantic structure. Additionally, ensure that the text contrast meets accessibility standards. CSS Review Strengths Global Reset: Using * { margin: 0; padding: 0; } is a good approach to remove default browser styles and maintain consistency. Responsive Design: Using width in ems for your main container is a good way to support responsive design. Areas for Improvement Use of Units: Instead of fixed pixel values (e.g., width: 350px; height: 350px;), consider using percentages or viewport units (vw/vh) for better responsiveness. This will help the layout adapt better on smaller screens. Unnecessary CSS Classes: The class content_images_qr_code does not have any styles applied. You can remove it unless you plan to add styles later. Attribute Alignment: The float: center; property in the .attribution class is incorrect. Instead, you can use display: flex; justify-content: center; to center the attribution text. Text Decoration: The text-decoration: none; property in the .attribution class doesn't have any effect because it is not applied to any links. You might want to apply it specifically to the anchor (<a>) elements if you want to remove underlines.
